Download Introduction to Cascading Style Sheets (CSS)

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

Cascading Style Sheets wikipedia , lookup

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