There are several ways to include style sheets. The most popular method being the link tag as below:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
Styles can also be included in a few other ways.
- Inline (inside the tag): Example: <span style="color: white; background: black;">look, white on black!</span>
- Using the <style> tag: Example: <style type="text/css"> <!-- style info in here --> </style>
In addition to the three methods above, there are a few more, but they are really just small variations of the ones outlined above.
There's a part of CSS called the cascade. This is meant to give certain styles precidence over others. I won't go into detail on this, but there are a few points to remember.
- User styles take precedence over all
- Styles later in the stylesheet take precedence over styles earlier in the stylesheet
- Inline styles take precedence over all styles, even (in many cases) user style sheets
- Style sheets in the heading take precedence over imported style sheets
So, in a nutshell, the order of precedence goes: Inline > User > Heading > External.
This is, of course, a very vauge description of the cascade. In reality, it's much more complicated, so if this doesn't work in one case, then experiment a bit until it works. Still, these are a few of the first things to check for when a page doesn't look correct.
