HTML >> CSS External vs. Inline?

  • Thread starter Thread starter Ken Hearts Isa
  • Start date Start date
K

Ken Hearts Isa

Guest
Ok, I'm getting really irritated with this page I'm trying to design. It's nothing complicated at all, but for some reason I can't get it to work.

Here's what I have included in my external file:

h1{
font-family:Impact;
font-weight:900;
font-variant:small-caps;
}

None of this shows up. However, when I do it thusly:

<h1 style="font-family:Impact; font-weight:900; font-variant:small-caps;"> Blah Blah Blah </h1>

it works fine. I know I'm including my *.css file correctly because other elements within it work fine.

The only thing I can think that may be a problem is that my <h1> tags are within a pair of <div> tags, but they don't have any conflicting attributes, so that shouldn't be a problem. Am I wrong? Is my syntax messed up?
Yes, I already linked in the external file. Like I said, several other attributes within the file, such as
body{
background-color:#804040;
}
are working beautifully. It's just this section that isn't.
To the third response, this thing is ridiculously simple. I'm just trying to refresh my memory on this stuff, since I haven't done it in a while. The only elements I reference in my CSS file are body, div, h1, and p. Also, there's definitely only one linked file. Sorry.

Thanks for the response, though. Good thoughts.
 
Check your CSS file. You almost certainly have a duplicate entry for h1. Alternatively, your document may link additional CSS files or contain a style tag in it head, causing an inheritance problem.

CSS styles are applied in the reverse order they are declared. Thus, styles are applied:

1. Inline
2. In reverse order of their declaration inside the style tag
3. In reverse order of their declaration in external CSS files that are imported; with the last imported CSS file having precedence.
4. In reverse order of their declaration in external CSS files that are linked; with the last linked CSS file having precedence.
 
You need to link the external CSS file to your HTML page.

This is from my site:

<link href="aboutstyle.css" rel="stylesheet" type="text/css" />

aboutstyle.css is the name of the CSS file. If you put that in (or the name of your CSS file in your case) then it should work. External CSS files are so much easier to read and edit than inline.

Hope I helped,

-Billy
 
Back
Top