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

2. Module 2: HTML Basics LESSON 5 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.

3. Module 2: HTML Basics LESSON 5 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?

4. Module 2: HTML Basics LESSON 5 Exploring Style Sheets  Access the Zen Garden Web site to view the use of style sheets.  http://www.csszengarden.com/ http://www.csszengarden.com/  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.

5. Module 2: HTML Basics LESSON 5 Categories of Selectors  First part of CSS Syntax is the selector: selector {property: value}  Three categories of selectors:  HTML tag selector  Class selector  ID selector  Each provides for a different way to create CSS syntax.

6. Module 2: HTML Basics LESSON 5 The HTML tag selector  The HTML tag is assigned various properties.  Before defining the HTML tag, using the … tag produced font with black, large size, left aligned, Times New Roman font.  Redefining the … tag below will produce the result to the right: h1 { font-family: Arial; font-size: 8 pt; color: #000080 }

7. Module 2: HTML Basics LESSON 5 Class Selector  Defines styles to use without affecting the existing HTML tags.  Using the previous example, the … 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 HTML page to switch to the class selector:  ……

8. Module 2: HTML Basics LESSON 5 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 HTML code:  …

9. Module 2: HTML Basics LESSON 5 Three ways to associate a Web page with a style sheet: 1. External style sheet 2. Internal style sheet 3. Inline styles

10. Module 2: HTML Basics LESSON 5 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:  Create a style sheet with a title and extension.css.  Save the external style sheet as “myStyle.css.”

11. Module 2: HTML Basics LESSON 5 Internal Style Sheets  Used to create a unique style on a single document.  Styles are defined within the section of the HTML file.  Can only be accessed by that Web page.  Styles are placed between … tags.  Look the next slide to see how internal style sheets are used.

12. Module 2: HTML Basics LESSON 5 h1 { color: #FFFFF0; background-color: #000000 } h2 {font-family: Arial} This is where the heading of the Web page might go. This is where the main part of the text would go.

13. Module 2: HTML Basics LESSON 5 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: An example of an inline style declaration.

14. Module 2: HTML Basics LESSON 5 Practice:  Complete the “Creating Style Sheets” worksheet.  Complete the three challenges at the bottom of the worksheet.