Free computer Tutorials
HOME Stay at Home and Learn

Cascading Style Sheets

The STYLE Tag and HTML Placement
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
PowerPoint
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

 

Where to put your STYLE

 

STYLES can be placed in three places: Inline, Embedded, External

 

Inline Styles

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:
  • Type the Tag you want to chang
  • Next, type a space and then the word STYLE
  • Type an equals sign ( = ) after the word STYLE
  • Type the Property followed by a colon
  • Type the Value
  • Type the right angle bracket ( > ) of the HTML tag

 

Embedded Styles

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.

<HTML>
<HEAD>
<TITLE>CSS</TITLE>

<STYLE TYPE = "text/css">

</STYLE>

</HEAD>
<BODY>

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:

<HEAD>
<TITLE>CSS</TITLE>

<LINK REL = Stylesheet TYPE = "text/css" HREF = "style1.css">

</HEAD>
<BODY>

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

Style Sheet in 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, we'll see how to use Class and ID Selectors in your web pages.

<-- Back One Page Move on to the Next Part -->

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses