Well, CSS stands for Cascading Style Sheets. The concept is that one kind of CSS style overlaps another to make a certain look. The way this plays out is determined by what programmers called precedence. Precedence is a name we give to what a program sees as important.
In CSS, the order, from least important to most important is the following:
- External
-- Internal
--- Inline
So, when your program is looking at your HTML file, first is checks to see if there is a link to an external CSS file in the HTML file (which goes in the <link> tag, remember?). If it sees the <link> tag, it reads the file and processes the CSS there. If not, then it checks for any CSS inside of your <head> tags. If it sees this, then it processes the CSS there. At this point, if it sees the different instructions for the same attributes, then the internal CSS instructions will replace the external CSS instructions.
Please take careful note of that.
Finally, it checks to see if you have any inline CSS. If it sees this, then it overwrites all similar instructions to that point and applies your inline CSS to that tag only; all the other tags will remain intact.
Now, earlier I mentioned about CSS instructions being overwritten. Be sure that when you write your CSS that you don't overlap instructions. If you do, it will get overwritten every time by the next thing on the cascade. Precedence also goes from the bottom of the file to the top. So if you write an instruction for the same attribute, it will overwrite any instruction that comes previous. Let's look at an example:
External CSS file (mycss.css):
- Code: Select all
body{
color:white;
}
Internal CSS
- Code: Select all
.
.
.
<head>
body{
color:red;
}
p{
color:orange;
}
</head>
.
.
.
Inline CSS
- Code: Select all
.
.
.
<body>
<p style="color:blue;">This is a paragraph, yay!"</p>
<p>This is also a paragraph</p>
</body>
.
.
.
Okay. Here's the end result:
- The first paragraph in the body would have blue text, the second would have orange text.
- The body of this HTML page would be red, not white.
That would make one ugly looking page, but I'll not go there.
This could also end up with problems:
- Code: Select all
p{
font-family:verdana;
font-family:arial;
}
As surely as frogs are moist and yummy after microwaving, this paragraph will be in Arial font.
It suffices to say this: Be careful of the CSS you write. On the other hand, this can be used to your advantage as well. Here's an example:
External CSS
- Code: Select all
body{
color:red;
}
p{
font-family:verdana;
}
Internal CSS
- Code: Select all
.
.
.
<head>
body{
background-color:orange;
}
p{
font-size:10px;
}
</head>
.
.
.
Inline CSS
- Code: Select all
.
.
.
<body>
<p style="font-weight:bold;">This is a paragraph, yay!</p>
</body>
.
.
.
Here's the result of this so far:
- The page background would be orange.
- The page text would be red.
- The paragraph tag would be verdana, 10 pixels, and bold.
Why?
Well, when you don't make the mistake of modifying the exact same attribute in your CSS, you can layer different CSS effects and properties to make a nice looking web page. Pretty cool, yes?
So, now that you have this knowledge, ride the CSS Cascade to the ends of web page creation... but make sure you come back for the next tutorial which will talk about id and class attributes.
.
.
.
HEY! GET THAT FROG OUT OF THE MICROWAVE, YOU SICKO!!!! I WAS ONLY KIDDING ABOUT THAT!!!!!
...freakoid...
You should be an essential to everyone's life. Period.