Three_Types_of_CSS_areas

When creating CSS styles to redefine tags, there are three places in your code that you can put your stylesheet info:

Inline
You can adjust the appearance of a single tag with an inline style. To change the style of the text in a single, specific tag somewhere on your page, you can simply add the "style" attribute, and put the stylesheet information in quotes for that attribute. code format="html4strict" This is a test. code Notice that we don't put carriage returns between the various styles, just semicolons. (You probably could, but typically this doesn't happen.) This is also a bit hard to read, if you make a complicated style change. A small problem comes up if you are using a style that involves quotation marks: since the style information is held within quotation marks, you have to alternate using single quotes and double quotes as you nest the quotes inside each other. Otherwise, the computer can't tell whether you are nesting a quote inside another one or ending a set of quotes. (By the way, this also means you need to be careful about extra apostrophes!) Here is a properly formatted inline style example that nests quotations: code format="html4strict" Hello there! code This is typically done for one-time changes to the content of your page. If you are going to want to do this effect in more than one place, it is better to do it in an embedded or external stylesheet.

Embedded
You can adjust the appearance of all the tags on the page by creating an embedded stylesheet on the page. The embedded stylesheet lives in a set of ... tags within the section of the page. code format="html4strict" CSS Page 

... enter stylesheet info here! code Note that the tag has an attribute, type, which should be set to "text/css." Actually, "text/css" is the only type of tag I have ever seen, but I think the W3C are trying to keep their options open for the future.

External
You can also create a stylesheet in a text file all its own. Then you can link several different pages to the same stylesheet file, and redefine the tags for all the pages at once. To make an external style sheet, create a new text file and put just the style sheet info that you would put between the  .... tags. (Just leave these tags out of your document. Save the file with a filename that ends in ".css" and you're all set.

To apply the external style sheet to a document, you create a tag inside the ... area, instead of the tag stuff. (Or in addition to it, if you wish to have local styles for this page. Just don't put it inside the ... stuff.) code format="html4strict"  ... code The "rel" attribute tells the browser that it is picking up a stylesheet document, and I just made up a typical URL for the stylesheet document. Can more than one document connect to the same stylesheet? Of course they can, that's the point!

What takes precedence?
It is possible to have a web page that contains a link to an external stylesheet, an embedded stylesheet and some inline styles all at the same time. The question that remains is: if you have these three style commands all changing what the tag does, who wins?

The answer is that an embedded stylesheet beats an external stylesheet and an inline style beats both of them. That is, local control always wins out over the more general style decisions.

... but of course, every rule has an exception. There is a way to make an external or embedded stylesheet have a style command that cannot be overridden by another stylesheet. That is by using the "!important" command at the end of the style. code format="html4strict"  p {font-size: 12; color: #000088 !important;} code The "!important" command at the end of the color statement means that although an inline tag might change the size of the tag's text, it cannot override the color of the text.