Chapter 3

Cascading Style Sheet (CSS)

 What are Cascading Style
Sheets?
• Created by Hakon Wium Lie of (Massachusetts
Institute of Technology) MIT in 1994.
• Has become the W3C standard for controlling
visual presentation of web pages.
• CSS is an excellent addition to plain HTML.
• With plain HTML you define the colors and sizes
of text and tables throughout your pages.
• With CSS you define the colors and sizes in
"styles". Therefore: if you change a certain style
it will change the look of your entire site.
 CSS Advantages
• Greater typography and page layout control
• Style is separate from structure
• Styles can be stored in a separate document and
linked to from the web page
• Potentially smaller documents

• Easier site maintenance

3
 CSS Syntax
• Style sheets are composed of "Rules" that describe
the styling to be applied.

• Each Rule contains a Selector and a Declaration

4
 General Rule
• selector {property:value}
Or
• selector{property1:value1;
property2:value2;
propertyN, valueN}

Example:
H1{text-align:center;
text color:blue}
 CSS Syntax Sample
Configure a Web page to display blue text and
yellow background.
body { color: blue;
background-color: yellow; }
This could also be written using hexadecimal color
values as shown below.
body { color: #0000FF;
background-color: #FFFF00; }

6
Common Formatting CSS Properties
• Common CSS Properties, including:
– background-color
– color
– font-family
– font-size
– font-style
– font-weight
– line-height
– margin
– text-align
– text-decoration
– width

7
 Using Color on Web Pages
• Computer monitors display color as intensities
of red, green, and blue light
• RGB Color
• The values of red, green, and blue vary from 0
to 255.
• Hexadecimal numbers (base 16) represent
these color values.

8
 Hexadecimal
Color Values
• # is used to indicate a hexadecimal value
• Hex value pairs range from 00 to FF
• Three hex value pairs describe an RGB
color

#000000 black #FFFFFF white

#FF0000 red #00FF00 green
#0000FF blue #CCCCCC grey

9
 Configuring Text with CSS
• CSS properties for configuring text:
– font-weight
• Configures the boldness of text
– font-style
• Configures text to an italic style
– font-size
• Configures the size of the text
– font-family
• Configures the font typeface of the text
 The font-size Property

• Accessibility Recommendation:
– Use em or percentage font sizes – these can be easily enlarged in all browsers by users
The font-family Property

• Not everyone has the same fonts installed in their

computer
• Configure a list of fonts and include a generic family
name

p {font-family: Arial,Verdana, sans-serif;}

 List properties
<h3> Some Common Single-Engine
list-style-type Aircraft </h3>
<ul>
- Unordered lists <li style = "list-style-type: disc">
- Bullet can be a disc (default), a Cessna Skyhawk </li>
square, or a circle <li style = "list-style-type: square">
Beechcraft Bonanza </li>
- Set it on either the <ul> or <li> tag <li style = "list-style-type: circle">
- On <ul>, it applies to list items Piper Cherokee </li>
</ul>
<h3> Some Common Single-Engine
Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
 List properties
On ordered lists - list-style-type can be used
to change the sequence values

Property value Sequence type First four

decimal Arabic numerals 1, 2, 3, 4

upper-alpha Uc letters A, B, C, D
lower-alpha Lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i, ii, iii, iv
 Types of Cascading Style
Sheets

• Inline Styles
• Embedded Styles
• External Styles

15
 Where do you put styles?

• In-line - add to HTML tag

<H1 style="color: maroon">
• Embedded style sheets
<style> </style>
• External style sheets
<link href="style.css">
 In-line style sheets
<h1 style="color: maroon">
• Inline CSS
– Configured in the body of the Web page
– Use the style attribute of an XHTML tag
– Apply only to the specific element
• Use of inline style sheets doesn't look much different
from traditional HTML tags, but more powerful
• Least powerful way of using CSS
Configuring Color with Inline CSS
• The Style Attribute
– Value: one or more style declaration property and value
pairs

Example 1 : configure red color text in an <h1> element:

<h1 style="color:#ff0000">Heading text is red</h1>

18
Configuring Color with Inline CSS
Example 2: configure the red text in the heading
configure a gray background in the heading

<h1 style="color:#FF0000;background-color:#cccccc">This is
displayed as a red heading with gray background</h1>

19
 CSS Embedded Styles
• Configured in the header section of a Web page.
• Use the XHTML <style> element
• Apply to the entire Web page document
• Use when single document has unique style
• Style declarations are contained between the
opening and closing <style> tags
• Example: Configure a Web page with white text
on a black background

<style type ="text/css">

body { background-color: #000000;
color: #FFFFFF;
}
</style>
20
 CSS Embedded Styles
• The body selector sets the
global style rules for the entire
page.

• These global rules are

overridden for <h1> and <h2>
elements by the h1 and h2 style
rules.

<style type="text/css">
body { background-color: #E6E6FA;
color: #191970;}
h1 { background-color: #191970;
color: #E6E6FA;}
h2 { background-color: #AEAED4;
color: #191970;}
</style>
 Embedded Styles
Example

<style type="text/css">
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif; }
h2 { background-color: #AEAED4;
color: #191970;
font-family: Georgia, "Times New Roman", serif; }
p {font-size: .90em; }
ul {font-weight: bold; }
</style>
 Checkpoint 3.1
1. List three reasons to use CSS on a Web page.

2. When designing a page that uses colors other than the

default colors for text and background, explain why it is
a good reason to configure style rules for both text color
and background color.

3. Describe one advantage to using embedded styles

instead of inline styles.
 Checkpoint 3.1
4. Fill in the blank.
 External style sheets
<link rel="stylesheet" type="text/css"
href="style.css">

• Save rules in external file

• Most powerful use of CSS since one file can define
a whole site
• Advantages
– ease of maintenance
– use less disk space
– increase accessibility
 External Style Sheets
• CSS style rules are contained in a text file
separate from the XHTML documents.
• The External Style Sheet text file:
– extension ".css"
– contains only style rules
– does not contain any XHTML tags

26
 External Style Sheets
– Multiple web pages can associate with
the same external style sheet file.
site.css
index.htm
index.htm
body
body {background-color:#E6E6FA;
{background-color:#E6E6FA;
color:#000000;
color:#000000;
font-family:Arial,
font-family:Arial, sans-serif;
sans-serif;
clients.htm
clients.htm
font-size:90%;
font-size:90%; }}
h2
h2 {{ color:
color: #003366;
#003366; }}
.nav
.nav {{ font-size:
font-size: 16px;
16px; about.htm
about.htm
font-weight:
font-weight: bold;
bold; }}

Etc…

27
 The <link /> Element
• A self-contained tag
• Placed in the header section
• Purpose: associates the external
style sheet file with the web page.
• Example:
<link rel="stylesheet" href="color.css" type="text/css" />

28
 Using an External Style Sheet

External Style Sheet color.css

body { background-color: #0000FF;

color: #FFFFFF;
}

To link to the external style sheet called color.css, the

XHTML code placed in the header section is:
<link rel="stylesheet" href="color.css" type="text/css" />
 Checkpoint 3.2

1. Describe a reason to use external styles.

2. Explain where external styles are placed and how web
pages indicate they are using external styles.

30
 SELECTORS
Simple Selector Forms

- The selector is a tag name or a list of tag names, separated by

commas
- Examples:

h1, h3, p

- Contextual selectors

ol ol li
 Using CSS with “class”
• class Selector
– Apply a CSS <style type="text/css">
rule to a certain .new { color: #FF0000;
"class" of elements
font-style: italic;
on a Web page
}
– Does not associate the
style to a particular </style>
XHTML element
The general syntax for a Class selector is:
.ClassSelector {Property:Value;}
The sample creates a class called “new” with red
italic text.
• To use the class, code the following XHTML:
<p class=“new”>This is text is red and in italics</p>

32
 Using CSS with “id”
• id Selector <style type="text/css">
– Apply a CSS #new { color: #FF0000;
rule to ONE element font-size:2em;
on a Web page. font-style: italic;
– The general syntax for an ID selector is:
#IDSelector {Property:Value;}
}
</style>

• The sample creates an id called “new” with red,

large, italic text.
• To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>

33
Using CSS with “Pseudo Classes”
- Designed to cover special <html xmlns =
situations "http://www.w3.org/1999/xhtml">
– Changing link color <head> <title> Checkboxes </title>
<style type = "text/css">
– Using a hover or mouse- input:hover {color: red;}
over feature input:focus {color: green;}
</style>
- Names begin with colons </head>
<body>
<form action = "">
Example <p>
- hover classes apply when the Your name:
mouse cursor is over the <input type = "text" />
element </p>
</form>
- focus classes apply when an </body>
element has focus </html>
 Applying a Pseudo-Class

Pseudo-class for
changing link colors

35
 XHTML
<div> element
• A block-level element

• Purpose: configure a specially formatted

division or area of a Web page
– There is a line break before and after the division.
– Can contain other block-level and inline elements

• Useful to define an area that will contain

other block-level tags (such as paragraphs
or spans) within it.

36
 XHTML
<div> Element Example
• Configure a page footer area
• Embedded CSS:
<style type="text/css">
.footer { font-size: small;
text-align: center; }
</style>
• XHTML:
<div class=“footer">Copyright &copy; 2009</div>

37
 XHTML
<span> element
• An inline-level element
• Purpose:
– configure a specially formatted area
displayed in-line with other elements,
such as within a paragraph.
• There is no line break before and after
the span.

38
 XHTML
<span> Element Example
• Embedded CSS:
<style type="text/css">
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
</style>

• XHTML:
<p>Your needs are important to us at <span
class=“companyname">Acme Web Design</span>.
We will work with you to build your Web site.</p>

39
 W3C CSS Validation
• http://jigsaw.w3.org/css-validator/