CSS - Cascading Style Sheets

Cascading Style Sheets are used to format the elements of your webpage.

Styles - Information regarding the formatting of the elements of your webpage.

There are three different approaches we will use to apply styles:

External (or linked) - Your webpage accesses (or links to) an external file that contains the styles you will be using. Use to format multiple pages.

Internal (or embedded) - You insert the style in the <head> section of your HTML using <style> tags. Use to format one page only.

Local (or inline) - You include the style within an individual tag. Use to format an individual element on a page.

Style sheets are composed of the following statements:
TAG { PROPERTY: VALUE }

External style sheets are composed of tags and one or more properties.
Here is an example:

h1 {color: red; font-size:24pt}

Inline styles are included within the tag, such as the following:

<h1 style="color: red; font-size:24pt">

In both cases the tag is listed first, followed by a property, a colon, and then a value. Additional formatting properties can be added by using a semi-colon.

Internal style sheets

Use when you want to format one page only.

Here is an example of how you would integrate an inline style sheet:

<html>

<head>

<style type="text/css">
p {color: white; }
body {background-color: blue; }
</style>

</head>

<body>
<p>This text will be white with a blue background</p>
</body>
</html>

This style would make ALL the <p> elements white and the background of the entire page blue, like the following:

This text will be white with a blue background

Make sure to put the <style type="text/css"> between the <head> tags!

External style sheets

Use when you want to be able to format multiple pages all at once.

The HTML will reference an external file by adding the following link to your HTML:

</head>

If your style sheet is located in a different folder, you must include the location as part of the sheet name.

Your style sheet (saved as sheetname.css, in this example) will look like the following (don't set up as HTML document):

p {color: white; align:center;}

body {background-color: blue; }

Local styles

Use when you want to apply formatting to an element within one specific tag (use sparingly, as this defeats the purpose of using a style sheet):

<p style="background-color:yellow; color:red; text-decoration:underline; text-align:center;">Local style</p>

Here is how the line would appear:

Local style