1. Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4

2. Module 2: XHTML Basics LESSON 4 Lesson Overview In this lesson, you will:  Understand the value of using Cascading Style Sheets (CSS).  Modify the style of a Web page with the use of CSS.  Apply CSS hierarchy.

3. Module 2: XHTML Basics LESSON 4 Guiding Questions for Lesson 4  Look at your current “Attributes and Tags” Web page. Distinguish between the “content” and the “style” of this Web page?  How did you make changes to the style of your “Attributes and Tags” Web page in previous lessons?

4. Module 2: XHTML Basics LESSON 4 What are Cascading Style Sheets?  Create a consistent look within a Web site.  Web designers use them to easily change the look of entire Web site with a few simple changes in the CSS code.

5. Module 2: XHTML Basics LESSON 4 The Need for CSS  XHTML defines the content of a Web page.  With popularity of the Internet, style became important.  XHTML alone makes it difficult to separate style from the content. The Result  World Wide Consortium (W3C) created styles as a part of HTML 4.0.  CSS separates content from style.  A separate CSS file can contain most of the style details for the Web site.

6. Module 2: XHTML Basics LESSON 4 Advantages of Using CSS  Creates consistency.  Example without a CSS file:  A designer creates a Web page containing code for the heading to be bold, green, 32 pt. Arial font.  On the second page of the site, a heading is entered but this time the designer enters 26 pt. font for the heading.  Example with a CSS file:  Designer creates a CSS file to define h1 as bold, green, 32 pt. Arial font.  The CSS file is referenced on both the first and second page.  Every time h1 is used, a heading is as bold, green, 32 pt. Arial font.  A change in the CSS file automatically changes both pages.

7. Module 2: XHTML Basics LESSON 4 Advantages of Using CSS  Improves the load time for Web pages.  CSS code serves as the directions for the browser to display both content and style.  Once the style has been downloaded into memory (cached), subsequent pages using the same style will load faster.

8. Module 2: XHTML Basics LESSON 4 Three ways to define style: 1. Within XHTML elements. 2. Within the HEAD element. 3. Through one or more style sheets.

9. Module 2: XHTML Basics LESSON 4 Hierarchy of Style  Created by CSS.  Rank order of how browsers determine which style to follow.  Fourth rule is given greatest priority: 1.Browsers default 2.External style sheet 3.Internal style sheet (inside the tag 4.Inline style (inside an XHTML element)

10. Module 2: XHTML Basics LESSON 4 Cascading  Allows for a style to be defined in an external style sheet and then to be overridden as needed within the inline style.  Example: paragraph style could be defined for regular text but when words need to be emphasized, the emphasis could be created inline.

11. Module 2: XHTML Basics LESSON 4 CSS Syntax  CSS Syntax has three parts:  Selector  Property  Value  Syntax:selector {property: value}

12. Module 2: XHTML Basics LESSON 4 Selector selector {property: value}  The XHTML element to be styled.  Examples include:  PARAGRAPH  BODY  HEADING,

13. Module 2: XHTML Basics LESSON 4 Property selector {property: value}  The attribute of the element to set.  Example: the style for the “selector” h1, can be set as 12 pt font size by providing a value for the “property” font-size.  Examples of properties:  font-size  text-align  color  font-family  text-indent

14. Module 2: XHTML Basics LESSON 4 Value selector {property: value}  The specific value of property.  Examples of properties and their values:  font-size: 12 pt  text-align: center  Color: #00FF00  font-family: arial  text-indent: 5em

15. Module 2: XHTML Basics LESSON 4 One Selector, Multiple Styles  A single selector can have multiple styles defined for it.  Syntax includes braces and semi-colons.  A BODY element could be defined as: body { text-align: right; color: #FFFFFF; background-color: #000000; font-style: underline }

16. Module 2: XHTML Basics LESSON 4 Multiple Selectors, Same Style  Multiple selectors can have a defined style.  Commas separate the selectors.  HEADER element styles can be defined as: h1,h2,h3,h4,h5,h6 { text-align: center; color: red; font-family: arial }

17. Module 2: XHTML Basics LESSON 4 Lesson Review  What is the result of the following code?  p {text-color: green}Each time the … tags are used, the text will be green.  h1 {font-family: arial}Each time the tags are used, the text will be in the Arial style.  body {The body will have font font-family: times new roman;in Times New Roman which is color: blue; blue on a red background. background-color: #FF0000 }