I have a html page, which has inbuilt styles. I want to takeout the styles from that file and create a css file and link to that html file. How to do this? When i copy and paste in a stylesheet and link it to html, the fonts are not ok. Other colorings, etc are ok. File is attached.
When i copy the styles and paste in a new external stylesheet and link it to new html file (in this html file, the styles part is removed). In this new html file, the fonts are not ok. Other colorings, etc are ok. From the sample file, i need to remove the "styles" part alone and create a new external stylesheet, so that i can use it as a common stylesheet for all my files.
Silly question - MIGHT be kind of obvious but one has to ask: are you copying this part into your CSS file too? <style type="text/css"> <!-- If so, DON'T. You only want the actual CSS, not the HTML used when inlining it. It's probably not what's wrong, but it's common enough a mistake. Also, what code are you using to link it? Should be something like this: <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> Code (markup): Otherwise there's nothing there that should really be causing problems - though you might want to look into actually FORMATTING your code, using a CSS reset so you don't keep saying padding/margin zero fifty times a page, condensing properties so you don't accidentally declare the same thing twice, etc, etc... Oh, and you don't need that tagline class since you should only have one h1 per page. Given what you are doing with it, I'd probably use SMALL instead. Also since it's nested there's no reason to be... let's see, what else... your outset border is invalid, you've got a extra semicolon in there... Ooh, and there's a problem with the layout too - explains why the sidebar gets narrower but the space made for it does NOT - see, margin and padding percentages are based on font-size, while width percentages are based on the parent container... Yeah, at really wide widths if you put a background on your #left sidebar it OVERLAPS the content. Sucks, but you can't have a dynamic width column there, percentage widths in a CSS layout just don't work that way. You know, all these little bugs, I bet they are showing the difference in error correction between inline style and external - I've seen that happen a few times. Hang on, I'll toss together a quick rewrite for you when I get a break to show you how I'd approach that; Though it will be a bit since I'm out the door to the convenience store for some fat, sugars and fat mixed with sugar. Oh, and might I ask why win-1252 and the use of entities on 7 bit ASCII characters that are not on the reserved list? That's a bit odd.
Ah, good to hear. As I said it's a common enough mistake when first working with CSS. As an aside, I did that rewrite to show you how I'd approach basically the same thing: http://www.cutcodedown.com/for_others/jilaba/template.html http://www.cutcodedown.com/for_others/jilaba/screen.css Just as an example of a slightly different approach to the markup and how condensing the CSS properties reduces the complexity - as well as adding a few 'extras' you were missing (like :active and :focus in addition to :hover) But good to hear you're moving again on the project.