Cascading Style Sheets come in 3 flavors: Inline, Embedded, and External. The goal is do everything as External (meaning using a separate stylesheet page), but occassionally you need the other two as well.
On the left side of the screen is the example as it appears on a normal browser. On the right hand side of the screen is the code that produced the display on the left. Ignore the PLAINTEXT tag on the code.
|
This paragraph has an inline style added directly into it. I've changed the text to red. This paragraph has a whole bunch of inline styles added directly into it. You can add as many as you wish. I've changed the text to blue, added a font type to it, and given it a background color. These types of styles use the quotation marks instead of a curly brace. They also override all other types of styles. The browser will ignore both embedded and external styles in favor of an inline style. |
This requires 2 pages -- the HTML page and the CSS page. The first piece of code that you see below on the right is the HTML that produced the display on the left. Click the Link on the LEFT page to see the CSS code.
Occassionally you want to create a tag with a set of properties, but you want a couple of them to be slightly different. You can modify the tag by adding a class attribute to it. It will inherit all the properties applied to the tag, and then modify them with the properties included in the class attribute.
For the rest of these examples I'll be using an EMBEDDED style since it is easier to view when you are looking at the code. But ultimately you really should be using EXTERNAL STYLES for all your pages.