ITS Knowledge Base

We’ve already discussed the basics of Cascading Stylesheets. Let’s look at more. As mentioned in the first article on CSS, there is a concept of cascading preference, or priority. It works this way: A style embedded inside an html tag, an inline style has the highest priority. Next is a style defined in the head of an html page, an internal stylesheet. Last in priority is an external stylesheet, or .css file.

Let’s look at this idea: We’ve got a file, called page.html. It has a link to the stylesheet styles.css. In styles.css we have this style setup for the bold tag, <b>:

Every instance of <b> will now have this style. What if we have a section in our html file where we’re using a serif font? Times New Roman, perhaps? It would look a bit strange to have the font-face change that drastically. Well, we could define styles in the head of the document. The internal stylesheet would override the complimentary styles defined in the styles.css file.

Say we then have a portion of our document where we have a heading that has a bold section. We’ve defined the heading-one (<h1>) font-size as 18 point, but here we want the font-size to be 22 point. To do this in this situation, we add an inline style in the heading tag. This style would be valid for this single instance and would take precedence over the other two types of styles.

Example:

Here are some online resources for CSS: