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

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. Lesson 4 Overview

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? 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.

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. Introduce CSS. Cascading Style Sheets (CSS) are used to create a consistent look within a Web site. Remind students that a Web site is a collection of Web pages. By using CSS, a Web designer can create a consistent look between the pages of the site and easily change the look with a few simple changes of code.

The Need for CSS The Result 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. Discuss the need for CSS. The original intent of HTML was to define the content of a Web page. As browsers grew and as the popularity of the Internet also grew, the separation between content and style became difficult. Style tags became intertwined with the content and made the development of a Web page extremely time consuming. The World Wide Consortium (W3C) developed styles which became a part of HTML 4.0. Styles allowed designers to separate the content from the style by creating a separate CSS file. This file would contain most of the information needed to provide the style of the Web page. The Web page file then references the CSS file to get direction for the style of the Web page.

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. Discuss the advantages of using a CSS file. The CSS file defines the style elements and allows for the consistency between pages of a Web site. For example, on the first page of a Web site, the designer creates the code for the heading of the page to be bold, green, 32 pt. Arial font. Without CSS, the code to create this look is included with the content of the page. As the designer completes the first page, work is begun on the second page. This time the designer creates a similar heading but makes an error and enters the code to display the text at 26 pt. font. The pages now lack consistency. A designer using a CSS file might define h1 as bold, green, 32 pt. Arial font. A link to the CSS file is placed at the beginning of the Web page code and now the use of an h1 element will create text which bold, green, 32 pt. Arial font. The same reference to the CSS file on the second page will result in the same look for the heading on page 2.

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. The use of CSS improves the load time for Web pages. When a Web page is loaded by a browser, the browser looks at the code and follows the directions of the code to create the page that we see. Once the browser has downloaded the first page, the information is stored in memory, or cached. The subsequent pages that use the same information will now load faster as the style created has now been cached. 7

Three ways to define style: Within XHTML elements. Within the HEAD <head> element. Through one or more style sheets. Style sheets can define style elements in three different ways. They can be defined within the XHTML elements, within the HEAD <head> element, or through one or more external CSS files. These three methods can even be used all at the same time. 8

Hierarchy of Style Created by CSS. Rank order of how browsers determine which style to follow. Fourth rule is given greatest priority: Browsers default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an XHTML element) Combining the use of all three methods at one time can be confusing, but understanding how CSS works will help with the understanding. CSS creates a hierarchy of styles. The following list shows the ranking order of how browsers determine which style to follow. The fourth rule is given greatest priority and if it exists, is the style that will be displayed. Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an XHTML element) 9

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. Cascading allows for the designer to define the basic style in an external style sheet and then to override it as needed within the inline style. This would allow for a paragraph style to be created for regular text but words that need to be emphasized could be created within the inline style. 10

CSS Syntax CSS Syntax has three parts: Selector Property Value Syntax: selector {property: value} CSS has three parts to its syntax: a selector, a property, and a value. When creating CSS code, the three parts are put together in this fashion: selector {property: value}. 11

Selector selector {property: value} The XHTML element to be styled. Examples include: PARAGRAPH <p> BODY <body> HEADING <h1>, <h2> The selector is the XHTML element that is to be defined. Examples of a selector include p, body, and h1. Each time these HTML elements are used within the Web page, the CSS file is accessed to define the style of the selector. 12

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 The property is the attribute of that element to change. For example; if you want to define the selector element h1 as having a font size of 12 pt. the property would be font-size. Now each time the XHTML element of h1 is used within the Web page, the CSS file is accessed, the h1 element is found to be defined as 12 pt font. 13

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 The value is the specific quality of that element. This tells the Web page how to display the defined property. In the example above, 12 pt is the value of the property font-size. Examples of properties and their values are: font-size: 12 pt, text-align: center, color: #00FF00, font-family: arial, and text-indent: 5em. 14

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 } A single selector can have multiple styles defined for it. This can be accomplished by including the styles with the same braces and separating the styles by semi-colons. The BODY element could be defined as: body { Text-align: right; Color: #FFFFFF; Background-color: #000000; Font-style: underline } 15

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 } Likewise, the same style can be defined for multiple elements by grouping selectors. The HEADER elements here have been defined in a single style definition: h1,h2,h3,h4,h5,h6 { Text-align: center; Color: red; Font-family: arial } 16

Lesson Review What is the result of the following code? p {text-color: green} Each time the <p>…</p> tags are used, the text will be green h1 {font-family: arial} Each time the <h1> tags are used, the text will be in the Arial style body { The body will have font-family: times new roman; font in Times New Roman color: blue; blue text background-color: #FF0000 on a red background } Review concepts covered if needed with the students. What would the result of the following code? p {text-color: green} each time the <p>…</p> tags are used, the text will be green h1 {font-family: arial} each time the <h1>…</h1> tags are used, the text will be in the Arial style body { the body of the page will have font in font-family: times new roman; Times New Roman which is blue on color: blue; a re background background-color: #FF0000 }