CSS

Cascading Style Sheets
1
Style Sheets
• Describe the evolution of style sheets from print
media to the web
• List advantages of using cascading style sheets
• Create style sheets that configure common page
and text properties
• Use inline styles
• Use embedded style sheets
• Use external style sheets
• Use pseudo-classes
2
Overview of
Cascading Style Sheets (CSS)

See what is possible with CSS:
• Visit http://www.csszengarden.com

Style Sheets
• used for years in Desktop Publishing
• apply typographical styles and spacing to printed
media

CSS
• provides the functionality of style sheets (and
much more) for web developers
• a flexible, cross-platform, standards-based
language developed by the W3C.
3
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
No need for <font> tags
Easier site maintenance
4
Types of
Cascading Style Sheets

Inline Styles
• Inline styles are coded in the body of the web page as an
attribute of an XHTML tag. The style only applies to the
specific element that contains it as an attribute

Embedded Styles
• Embedded styles are defined in the header of a web page.
These style instructions apply to the entire web page
document.

External Styles
• External Styles are coded in a separate text file. This text file
is linked to the web page by using a <link> tag in the header
section.

Imported Styles
• Imported Styles are similar to External Styles in that they are
5
coded in a separate text file. We’ll concentrate on the other
types of styles in this text.
CSS
Syntax


Style sheets are composed of "Rules"
that describe the styling to be applied.
Each Rule contains a Selector and a
Declaration
6
CSS
Syntax Sample
body { color: blue;
background-color: yellow; }
This could also be written using
hexadecimal color values as shown
below.
body { color: #0000FF;
background-color: #FFFF00; }
7
Common Formatting
CSS Properties

See Table 9.1 Common CSS Properties,
including:
•
•
•
•
•
•
•
•
•
•
background-color
color
font-family
font-size
font-weight
font-style
text-decoration
line-height
text-align
background-image
8
Using
Inline Styles
Inline Styles are coded as attributes on XHTML
tags.
 The following code will set the text color of a
<h1> tag to a shade of red:
<h1 style="color:#CC0000">This is displayed as a red
heading</h1>
 The following code sets the text in the heading
to red and italic.
 <h1 style="color:#CC0000;font-style:italic">This is
displayed as a red heading in italic style</h1>

9
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
#FF0000 red
#0000FF blue
#FFFFFF white
#00FF00 green
#CCCCCC grey
10
Configuring Color with Inline CSS
(1)

Inline CSS
• Configured in the body of the Web page
• Use the style attribute of an XHTML tag
• Apply only to the specific element

The Style Attribute
• Value: one or more style declaration property and
value pairs
Example: configure red color text in an <h1> element:
<h1 style="color:#ff0000">Heading text is red</h1>
11
Configuring Color with Inline
CSS (2)
Example 2: configure the red text in the
heading
configure a gray backgroundin the
heading
Separate style rule declarations with ;
<h1 style="color:#FF0000;background-color:#cccccc">This is
displayed as a red heading with gray background</h1>
12
Questions
1.
List three reasons to use CSS on a web
page.
2.
When designing a page to use other than
the default colors for text and
background, explain why it is a good
reason to configure both properties: text
color and background color.
3.
Write the code to configure an inline style
attached to a <div> tag. Configure as
follows: background color set to a light
green color, text set to a dark green
color, font set to Arial or sans-serif, size
set to larger, font weight set to bold.
13
CSS Embedded
Styles






Configured in the header section of a Web
page.
Use the XHTML <style> element
Apply to the entire Web page document
Style declarations are contained between
the opening and closing <style> tags
The type attribute indicates the MIME type
of text/css
Example: Configure a Web page with white
text on a black background
<style type ="text/css">
body { background-color:
#000000;
color: #FFFFFF;
}
</style>
14
<style type="text/css">
body { background-color: #000000;
color: #FFFFFF;
font-family:Arial,sans-serif;
}
</style>






Embedded
Styles
Apply to an entire web page.
Placed within a <style> tag located in the
header section of a web page.
The opening <style> tag begins the
embedded style rules.
The closing </style> tag ends the area
containing embedded style rules.
When using the <style> tag, there is no
need for the style attribute.
The <style> tag does use a type
15
attribute that should have the value of
"text/css".
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>
CSS and text
17
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;}
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>
CSS Selectors
CSS style rules can be configured
for an:
• HTML element selector
(i.e. as we saw in
previous slide to the element itself)
• class selector
• id selector
Using CSS with “class”

class Selector
• Apply a CSS
rule to a certain
"class" of elements
on a Web page
• Does not associate the
style to a particular
XHTML element



<style type="text/css">
.new { color: #FF0000;
font-style: italic;
}
</style>
Configure with .classname
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>
23
Using CSS with “id”

id Selector
• Apply a CSS
rule to ONE element
on a Web page.



Configure with #idname
<style type="text/css">
#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</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>
24
CSS and styling “areas”
25
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.
26
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>

27
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.
28
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>
29
External Style Sheets

Storing in separate file – decoupling
design from content!!!
30
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
31
External Style Sheets
• Multiple web pages can associate with
the same external style sheet file.
site.css
body {backgroundcolor:#E6E6FA;
color:#000000;
font-family:Arial,
sans-serif;
font-size:90%; }
h2 { color: #003366; }
.nav { font-size: 16px;
font-weight: bold; }
index.htm
clients.htm
about.htm
Etc…
32
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" />
33
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" />
Centering Page Content
#container { margin-left: auto;
with CSS
margin-right: auto;
width:80%; }
W3C CSS Validation

http://jigsaw.w3.org/css-validator/
CSS Guidelines –
Getting Started

Review the design of the page
• Configure global font and color properties for the body
selector
• Identify typical elements (such as <h1>, <h3>, and so on)
and declare style rules for these if needed.
• Identify page areas such as logo, navigation, footer, and so
on – configure an appropriate class or id for each.

Create one prototype page that contains most of the
elements you plan to use and test.
• Revise your CSS as needed.
• Once your design is set – move styles to an external .css file

Planning and testing are important activities when
designing a Web site
CSS Troubleshooting Tips





Verify you are using the : and ; symbols in the right
spots—they are easy to confuse.
Check that you are not using = signs instead of : between
each property and its value.
Verify that the { and } symbols are properly placed
Check the syntax of your selectors, their properties, and
property values for correct usage.
If part of your CSS works, and part doesn’t:
◦ Review your CSS
◦ Determine the first rule that is not applied.
Often the error is in the rule above the rule that is not applied.

Validate your CSS at http://jigsaw.w3.org/css-validator
The
Cascade


This “cascade” applies the styles in order from
outermost (External Styles) to innermost (actual
XHTML coded on the page).
This way site-wide styles can be configured but
overridden when needed by more granular (or page
specific) styles.
CSS and anchor <a> tag


Style attributes differently
Use to make buttons
40
<style type=”text/css>
a:link {color:#FF0000 }
a:hover {text-decoration:none;
color:#000066 }
</style>

CSS
Pseudo-classes
Pseudo-classes and the anchor tag
• Link – default state
for a link (anchor tag)
• Visited – state of a
link that has been
visited
• Hover – state of a
link that the mouse is currently over
• Active – state of a link that is being
clicked
41
<style type="text/css">
.button { border: 2px inset #cccccc;
width: 100px;
padding: 3px 15px;
color: #ffffff;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
}
a.button:link { color : #FFFFFF; }
a.button:visited { color : #cccccc; }
a.button:hover { color : #66cc33;
border:2px outset #cccccc;
}
<div align="center">
<h2>CSS Buttons!</h2>
</style>
<a href="index.htm" class="button">Home</a>
<a href="products.htm" class="button">Products</a>
<a href="sevices.htm" class="button">Services</a>
<a href="contact.htm" class="button">Contact</a>
<a href="about.htm" class="button">About</a>
<div>
CSS “buttons”
42
CSS – more to do

Effecting borders
43
The CSS border Property


Configures a border on the top, right,
bottom, and left sides of an element
Consists of
• border-width
• border-style
• border-color
h2 { border: 2px solid #ff0000 }
CSS Borders:
Block / Inline Elements

Block element
◦ default width of element content extends to browser
margin (or specified width)

Inline element
◦ Border closely outlines the element content
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }
Browser Display Can Vary
Configuring Specific
Sides of a Border

Use CSS to configure a line on one or
more sides of an element
•
•
•
•
border-bottom
border-left
border-right
border-top
h2 { border-bottom: 2px solid #ff0000 }
The CSS padding Property


Configures empty space between the
content of the XHTML element and the
border
Set to 0px by default
h2 { border: 2px solid #ff0000;
padding: 5px; }
No padding configured:
Configuring Padding on
Specific Sides of an Element

Use CSS to configure padding on one
or more sides of an element
•
•
•
•
padding-bottom
padding-left
padding-right
padding-top
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;}
CSS padding Property Shorthand:
two values

Two numeric values or percentages
• first value configures top and bottom
padding
• the second value configures left and right
padding
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding: 20px 10px;
}
CSS padding Property Shorthand:
four values

Four numeric values or percentages
◦ Configure top, right, bottom, and left padding
h2 { border: 2px solid #ff0000;
width: 250px;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}
Hands-On
Practice
Try this on your own
h1 { background-color:#191970;
color:#E6E6FA;
padding: 15px;
font-family: Georgia, "Times New Roman", serif; }
h2 { background-color:#AEAED4;
color:#191970;
font-family: Georgia, "Times New Roman", serif;
border-bottom: 2px dashed #191970; }
CSS – more to do

Background images
53
CSS background-image
Property


Configures a background-image
By default, background images tile
(repeat)
body { background-image: url(background1.gif); }
CSS background-repeat Property
Using background-repeat
trilliumbullet.gif:
h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}
CSS
Strategies(1)



Always include end tags (even
though browsers usually display
the page, anyway) for all XHTML
container tags.
Design and code the page to look
"OK" or "Acceptable" -- then use
style sheets for extra-special
effects and formatting.
Use style sheet components that
will degrade gracefully. Check the
compatibility charts and test, test,
test, test, test....
57
CSS
Strategies(2)



Use <div> and <span> tags to create
logical page sections. Be aware that
Netscape 4.x handles the <div> tag
better than the <span> tag.
Use style sheets in Intranet
environments -- you know exactly what
browsers your visitors will be using.
Consider using a browser detection
script (discussed in Chapter 12) to test
for a specific browser and link to the
style sheet coded specifically for that
browser.
58