1. Working with Cascading Style Sheets (CSS)
LESSON 5
Module 2: HTML Basics
Working with Cascading Style Sheets (CSS)

2. Lesson Overview In this lesson, you will learn to:
Create the code needed for a Web page to access an external style sheet.
Create an external style sheet.
Lesson 5 Overview

3. Guiding Questions for Lesson 5
How can you tell if a Web site uses CSS?
Look at the code of a few Web sites. Can you find the code that tells the browser to access an external style sheet?
Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.

4. Exploring Style Sheets
Access the Zen Garden Web site to view the use of style sheets.
As you click on the name of a style, the Web page will change to reflect that style.
The location of the menu choices will change with each style .
Demonstrate the use of style sheets by showing students the Zen Garden ( Web site. As the teacher or the students click on a different style on the right side of the page, the Web page will change to a new style. As new styles are chosen, the menu will change location on the Web page.

5. Categories of Selectors
First part of CSS Syntax is the selector: selector {property: value}
Three categories of selectors:
XHTML tag selector
Class selector
ID selector
Each provides for a different way to create CSS syntax.
The first word in the CSS syntax is “selector” (selector {property: value}). There are three categories of selectors: XHTML tag selector, class selector and ID selector. Each of these categories provides for a different way to create CSS syntax.

6. The XHTML tag selector The XHTML tag is assigned various properties.
Before defining the XHTML tag, using the <h1>…</h1> tag produced font with black, large size, left aligned, Times New Roman font.
Redefining the <h1>…</h1> tag below will produce the result to the right:
h1 {
font-family: Arial;
font-size: 8 pt;
color: #000080 }
The XHTML tag selector changes the style of the existing XHTML tags. So far, all the examples that we have looked at in Lesson 4 have been XHTML tag selectors. In these examples, we have taken an XHTML tag and assigned the value of various properties to the tag. Here is an example: Earlier, we defined the use of the <h1>…</h1> as being the largest size font and when it was used, regular font in the Times New Roman style would always be displayed. Now, you can define the properties to be displayed when the tag <h1>…</h1> is used such as this:
h1 {
font-family: Arial;
font-size: 8 pt;
color: #000080 }

7. Class Selector
Defines styles to use without affecting the existing XHTML tags.
Using the previous example, the <h1>…</h1> tag can be used as needed for centering.
h1.center {
font-family: Arial;
font-size: 8 pt;
color: #000080;
align=“center” }
To use a class selector, a line of code telling the browser to switch to the use of the class selector needs to be added.
Add this line to the XHTML page to switch to the class selector:
<h1 class=“center”> …… </h1>
The class selector defines styles to use without affecting the existing XHTML tags. The XHTML tags can still be used with the original result, but the new redefined XHTML tag will only take effect when it is called for inside of a particular tag. This procedure allows for a more detailed definition of an XHTML tag. Below is an example of <h1>…</h1> tag similar to the one above but further defined to center the text.
h1.center {
font-family: Arial;
font-size: 8 pt;
color: #000080;
align=“center” }
To use the class selector, a designer must add a line of code telling the browser to switch to the use of the class selector. In the example here, the line of code “<h1 class=”center”> must be added before the use of the <h1>…</h1> tag. This will tell the browser to use the h1.center definition.

8. ID Selector Styles
Defines a style relating to objects having an unique user-assigned ID.
Designer can create their own tags.
When creating the CSS code for the tags, a “#” must precede the tag.
Here is an example of the CSS code to create a user ID tag called yellow which is defined as text with a yellow background:
#yellow {
Background-color: #FFFF00 }
To apply this style, the user must add the following to the XHTML code:
<div id=“yellow”>…</div>
The ID selector defines style relating to objects having a unique user-assigned ID. This is where the designer can create their own tags to be used. When defining user created tags, a “#” must precede the definition. Below is an example of the CSS code to create a user ID tag called yellow which is defined as text with a yellow background.
#yellow {
Background-color: #FFFF00 }
To apply this style within the HTML code, the user needs to add the following: <div id=”yellow”>…</div>. 8

9. Three ways to associate a Web page with a style sheet:
External style sheet
Internal style sheet
Inline styles
There are three ways to associate a Web page with a style sheet; external style sheets, internal style sheet, and inline styles. 9

10. External Style Sheet
Makes creating multiple Web pages with the same style easy.
Several Web pages can access a single style sheet to improve consistency between the pages.
Add the following code in HEAD element of the HTML file:
<link rel=“stylesheet” type=“text/css” href=“myStyle.css”>
Create a style sheet with a title and extension .css.
Save the external style sheet as “myStyle.css.”
External style sheets make creating multiple Web pages with the same style easy. The designer can create one external style sheet which can be accessed by all the Web pages. This will help to create consistency among the pages of a Web site. To associate a Web page with an external style sheet, the following line of XHTML code needs to be placed in the <head> section of the file:
<link rel=”stylesheet” type=”text/css” href=”myStyle.css”>
In the case, the external style sheet needs to be created with a title and extension .css. In the example above, the name of the external style sheet is “myStyle.css.” 10

11. Internal Style Sheets
Used to create a unique style on a single document.
Styles are defined within the <head> section of the XHTML file.
Can only be accessed by that Web page.
Styles are placed between <style>…</style> tags.
Look the next slide to see how internal style sheets are used.
Internal style sheets are used to create a unique style on a single document. These styles are defined within the <head> section of the XHTML file using the <style> tag and can only be accessed by the Web page where the code is included. In this case, the styles are placed between <style>…</style> tags in the <head>. Look at the next slide to see how internal style sheets are used. 11

12. <style type=“text/css”> h1 { color: #FFFFF0;
<html>
<head>
<style type=“text/css”>
h1 {
color: #FFFFF0;
background-color: #000000 }
h2 {font-family: Arial}
</style>
</head>
<body><h1>This is where the heading of the Web page might go.</h1><br>
<h2>This is where the main part of the text would go.</h2>
</body>
</html> 12

13. Inline Styles
Should be used sparingly – sacrifices many of the advantages of external and internal style sheets.
Given highest priority and overrides all other defined styles.
Example:
<html>
<body>
<h1 style=“color: #8A2BE2”; font-family: Verdana; background-color: #FAFAD2”>An example of an inline style declaration.</h1>
</body>
</html>
Inline styles should be used sparingly because they sacrifice many of the advantages of external and internal style sheets. This type of style sheet has the highest priority and will override all other defined styles when used. The following is an example of inline style:
<html>
<body>
<h1 style=“color: #8A2BE2”; font-family: Verdana; background-color: #FAFAD2”>An example of an inline style declaration.</h1>
</body>
</html> 13

14. Practice: Complete the “Creating Style Sheets” worksheet.
Complete the three challenges at the bottom of the worksheet.