Introduction to Cascading Style Sheets (CSS)
Download
Report
Transcript Introduction to Cascading Style Sheets (CSS)
L E S S O N
4
Module 2: HTML Basics
Introduction to Cascading
Style Sheets (CSS)
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
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?
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
Three ways to define style:
1.
Within XHTML elements.
2.
Within the HEAD <head> element.
3.
Through one or more style sheets.
L E S S O N
4
Module 2: XHTML Basics
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)
L E S S O N
4
Module 2: XHTML Basics
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.
L E S S O N
4
Module 2: XHTML Basics
CSS Syntax
CSS Syntax has three parts:
Selector
Property
Value
Syntax:
selector {property: value}
L E S S O N
4
Module 2: XHTML Basics
Selector
selector {property: value}
The XHTML element to be styled.
Examples include:
PARAGRAPH <p>
BODY <body>
HEADING <h1>, <h2>
L E S S O N
4
Module 2: XHTML Basics
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
L E S S O N
4
Module 2: XHTML Basics
selector {property: value}
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
L E S S O N
4
Module 2: XHTML Basics
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
}
L E S S O N
4
Module 2: XHTML Basics
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
}
L E S S O N
4
Module 2: XHTML Basics
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;
color: blue;
background-color: #FF0000
}
in Times New Roman which is
blue on a red background.