The Types of Stylesheets in CSS
Lessons Covered


Before progressing into the nitty gritty of styling web pages it is important to note that there are three different ways in which a style sheet can be applied.

The three ways are In-line, Internal and External.



Whats the Difference ?

In-line Style Sheets

An In-line style sheet is applied to tags. So long as the tag is open, the style specified is applied.

As an example say we have an opened paragraph tag and want the text in that paragraph to be bold. As long as that paragraph tag is kept open then the style will be apply. If the paragraph tag is closed and another paragraph is opened the style no longer applies. It is done like this:

<p style="font-weight: bold;"> This is an example of an in-line style sheet. </p>

As you can see the keyword style is used and the property to be styled ( font-weight ) is specified. The value given is bold and so the text between the tags will be bold.


Multiple properties can also be specified in an in-line style sheet. An example: 

<p style="font-weight: bold; color: purple;"> This is an example of an in-line style 

sheet.</p>


Here two different things have been done to the text between the paragraph tags. First, the font weight was set to bold and then the text color was set to purple.


Internal Style Sheets

An Internal style sheet is used when a style is to be applied to a specific ( only one ) page.

Internal style sheets are most commonly associated with a web page which is to be styled differenly from other pages. In creating an internal style sheet the selectors, their properties and values are applied within a style tag. This tag must be placed between the opening and closing head tags of your html document. It is done like this: 

<head> <--------- Opening head tag

<style type="text/css"> <------- Opening style sheet tag

p { color: blue; } <------- selector, property and value

</style>  <------- Closing style sheet tag

</head>  <--------- Closing head tag


Using the style sheet above will change the color of all paragraphs to blue.


External Style Sheets

An external style sheet is one where the formatting to be applied is specified external to the document itself.

This is the most widely used style sheet format and will be the center of focus throughout the tutorials.

All external style sheets must be saved with the extension .css for it to be recognised. After this is done, you have to provide a link in the head section of your html document.

As an example, lets create an external style sheet, style.css and then create a HTML web page to reference it.

style.css

p
{
font-weight: bold;
}

h4
{
text-decoration: underline;
}


Open your notepad/notepad++ text document and copy the code above into it. Navigate to save as and save the document as style.css in a folder. Ensure that the area marked Save as type in notepad is set to "All Files" and if you use Notepad++ then set it to "All types". When you have completed this step, you have successfully created your first style sheet.

Now copy the code below into a next text document and save it as an HTML file as you were taught in the HTML tutorials. It is important that you save both files ( css and html ) in the same folder. This will allow you to easily access and link to them.

webpage.html

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css"> 

<title> My First CSS Example </title>

</head>

<body>

<h4> Paragraph </h4>

<p> This is my first paragraph of text.  This text should be bold. </p>

</body>

</html>

arrow  Click to see final result


You should be familar with everything in the above code except the link to the style sheet. This is created with a link tag. The rel="stylesheet" simply shows how the current HTML document relates to the linked document ( i.e. by a stylesheet ). The type acknoledges that it's a css file and then the familiar href provides the name and/or location of the stylesheet.

Open your HTML document in your web browser. You should see that the level 4 heading is underlined and the paragraph of text is bold. Pretty cool right ?



Previous Lesson Previous Lesson - Syntax of CSS                             Next Lesson - ID & Class Next Lesson