Where to put your styles

STYLES can be inserted into three locations: Inline, Embedded, and External.

Inline Style Sheets

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>

To place a style in a HTML tag, do the following:

• Type the Tag you want to change
• Next, type a space and then the word STYLE
• Type an equals sign ( = ) after the word STYLE
• Type a double quote mark
• Type the Property followed by a colon
• Type the Value
• Type the another double quote mark
• Type the right angle bracket ( > ) of the HTML tag

Embedded Style Sheets

Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE attribute, if you want. But modern browsers don't need it.

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 (along with its code) is then treated as though it were in the HEAD section. You set up an External stylesheet like this:

To embed a stylesheet 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 the name of the file, and where the file is. (You haven't done file referencing yet, so don't worry about HREF for the moment.)
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 website'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

instead of

HREF = style1.css

In the next part, you'll learn how to use your CSS selectors.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 3 (Getting started with CSS)