OBJECTIVE

Add style properties to web pages using three different approaches: inline, internal, and external.

DISCUSSION

Style Overview

Also known as Cascading Style Sheets (CSS)
Allows you to define the style once and use throughout a website.
- Makes it very easy to change the appearance of many pages
Can use script to change Style properties (Dynamic HTML) during runtime

How to Add Style

Inline with tag

<div style = "font-family: courier">

Internal in page in <head> section

<head>

<style>

H1 {

font-style: italic;
font-weight: bold;

}

.myClass { /* comment ... defines a class */

font-weight: 200;
font-size: 36pt;

}

#myID { /*defines format for an id */

color: red;
font-size: 50px;

}

</style>

</head>

<body>

<div class = "myclass">abc</div>

<div id = "myID">def</div>

Externally in a separate .css file
- Create a file with .css extension and add the style properties as in above grey area minus the opening and closing <style> tags.
- Add link to .css file in <head> section of document that will use the .css file

<head>

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

Other Notes

If conflicting style properties then the order of precedance is generally (1) inline, (2) internal, (3)external...assuming that your internal style section is placed after the link to the external style sheet.
You can define and apply classes to tags like p.myClass
See links listed below for details

EXERCISES

1. Explain the three different methods for adding style.

2. What is the format for defining a class?

3. Create a simple HTML page and save as e3_2_3.htm. Add a <div> section in the <body> and add some text in this <div> section. Also add some text that is not in the <div> section.

a. Create a style file called mystyle.css. In this .css file add style properties for the body to set its font-family to "arial" and its background-color to "yellow". Open and test your e3_2_3.htm page in the browser. Make sure that the font is arial and the page color is yellow.

b. Now add a definition for a class called mydiv in the style file. In this mydiv class define the properties for font-family and font-size. Set the font-family propery to courier and the font size to 36pt.

c. In the <div> tag in e3_2_3.htm, sets its class to "mydiv". Open your page in the browser. What is the font of the text inside the <div> tag? What is the font outside the <div> tag?

d. In your e3_2_3.htm file add an internal style section. Create a class in this section called mydiv. In this mydiv class define the properties for font-size and background-color. Set the font-size to "smaller" and the background-color to "red". Test your page. What is the font-size of text in the <div>? What is the color? Which definition of the mydiv class takes precedance?

e. In your e3_2_3.htm file add an inline style property in the <div> tag to change the background-color of the <div> to blue. View your page again.

4. Based on the results in #3, explain what is meant by Cascading Style Sheets.

5. Create a style sheet and define styles for (1) <body> tags,(2) a class called "boldRed", and (3) an ID called "lightYellow". The style for the <body> tag should specify the font family to "arial" and the font size to "xx-large". The style for the "boldRed" class should specify the font to be "red" and the font weight to "bold". The style for the lightYellow ID should specify the font to be "yellow" and the font weight to be "light". Test your style sheet by creating a page.

6. What is the difference between an ID and a CLASS?

7. List the style properties for controlling font.

LINKS AND HELP

http://www.w3schools.com/css/css_syntax.asp

http://www.w3.org/Style/CSS/learning

http://www.w3schools.com/css/css_reference.asp

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp