17
Introduction to Introduction to Cascading Style Cascading Style Sheets (CSS) Sheets (CSS) Module 2: HTML Basics LESSON 4 LESSON 4
Introduction to Cascading Introduction to Cascading Style Sheets (CSS)Style Sheets (CSS)
Module 2: HTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
Lesson OverviewIn 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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?
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
Three ways to define style:
1. Within XHTML elements.
2. Within the HEAD <head> element.
3. Through one or more style sheets.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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 <head> tag
4. Inline style (inside an XHTML element)
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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.
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
CSS Syntax CSS Syntax has three parts:
Selector
Property
Value Syntax: selector {property: value}
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
Selector selector {property: value} The XHTML element to be styled. Examples include:
PARAGRAPH <p>
BODY <body>
HEADING <h1>, <h2>
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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
}
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 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
}
Module 2: XHTML Basics
LESSON 4LESSON 4LESSON 4LESSON 4
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
font-family: times new roman; in Times New Roman which is color: blue; blue on a red background.
background-color: #FF0000
}
