Free computer Tutorials
|HOME||Stay at Home and Learn|
Cascading Style Sheets
The STYLE Tag and HTML Placement
Where to put your STYLE
STYLES can be placed in three places: Inline, Embedded, External
You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed elsewhere. Here's an example of an Inline style:
<H1 STYLE = "Color: Red">My Heading </H1>
Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two <STYLE> </STYLE> tags to tell the browser where the style starts and ends. You can add the TYPE attribute, if you want. But modern browsers don't need it.
<STYLE TYPE = "text/css">
Then in between the two STYLE tags, you would type your CSS Rules.
External Style Sheets
Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it all in a separate text file. You then "tell" the browser where the text file is. The text file and the code is then treated as though it were in the HEAD section. You set up an External style sheet like this:
<LINK REL = Stylesheet TYPE = "text/css" HREF = "style1.css">
To embed a style sheet the <LINK> tag is used. The REL attribute
tells the browser that you want to link to a stylesheet; The TYPE tells
the browser what sort of file is being used; the HREF attribute tells
the browser where the file is. The HREF part is just like the HREF of
a hyperlink tag, and the same rules regarding Relative and Absolute
referencing apply here. Note that the name of the file ends in .css.
External stylesheets have a big advantage over embedded ones because they can be used for all the pages in your web site. All you need do is insert the LINK tag in the HEAD section of your web site's pages. With Embedded stylesheets, you would have to have the same STYLE code in the HEAD section of every page. External Stylesheets can save you a heck of a lot of typing (or copying and pasting).
External stylesheets are just text files, so you can write them in
any text editor. Something like Windows Notepad is ideal. Here's a screenshot
of an external stylesheet written with Notepad
Note that no TAGS are used in the external stylesheet. There are no <STYLE> tags or HTML tags, just the Selectors and their Properties and Values.
Note, too, that three styles have been set up. You can do this with embedded STYLE tags as well. You can have as many different styles as you want between one pair of <STYLE> </STYLE> tags.
If you are using external stylesheets, you are not limited to only one. You can use as many external stylesheets as you need. All that is required is a different LINK tag for each stylesheet.
When saving your external stylesheets, you don't have to save it with the extension .css. You can save it with the extension .txt. In the HREF part of your LINK tag, you would then have this:
HREF = style1.txt
HREF = style1.css
In the next part, we'll see how to use Class and ID Selectors in your web pages.