Download chapter4-lw

Chapter 4
How to use CSS to format
the elements of a web page
1
Learning Outcomes
Applied
 Given an HTML document, create a CSS style sheet for formatting
the web page using any of the types of selectors or rules that are
presented in this chapter.
 Given an HTML document with one or more CSS style sheets
applied to it, use the developer tools for your browser to inspect the
styles.
 Given a selector in the CSS for an HTML document, describe what
the selector applies to.
Knowledge
 Describe three ways to include CSS in a web page.
 Explain why it’s usually best to use an external style sheet for
formatting a page.
 Describe the changes you need to make to the HTML and CSS files
if you want to use CSS to format the HTML5 semantic elements in
versions of Internet Explorer before version 9.
2
Learning Outcomes cont.
Knowledge cont.
 Describe the purpose of the normalize.css style sheet.
 Distinguish between absolute and relative units of measurement.
 Describe three ways to specify color in CSS, and describe how
CSS3 expands upon that.
 Describe these types of selectors: universal, type, id, class,
descendant, child, sibling, pseudo-class, and pseudo-element.
 Describe one accessibility guideline for using pseudo-class
selectors.
 Explain how user style sheets, !important rules, and specificity are
used in the cascade order for applying rule sets.
 Describe these properties for styling fonts: font-family, font-style,
font-weight, font-size, and line-height.
 Describe these properties for formatting text: text-indent, text-align,
text-decoration, and text-shadow.
3
CSS Overview, Inline-Embedded-External, the Cascade,
CSS Syntax, Color in CSS, Linking External Stylesheets,
Types of Selectors, CSS Validation, Using HTML5 shiv and
normalize.css Browser Compatibility
4
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.
5
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
6
Types of Cascading Style Sheets
 Inline
Styles
 Embedded Styles
 External Styles
 Imported Styles
7
Description of the Types of
Cascading Style Sheets

Inline Styles
◦ Configured in the body of the web page
◦ Use the style attribute of an HTML tag
◦ Apply only to the specific element

Embedded Styles
◦ Configured in the head section of a web page.
◦ Use the HTML <style> element
◦ Apply to the entire web page document

External Styles
◦ Configured in a separate text file with .css file extension
◦ The HTML <link> element in the head section of a web page
associates it with the .css file

Imported Styles
◦ Similar to External Styles
◦ We’ll concentrate on the other three types of styles.
8
The “Cascade”
Browser
Defaults
External
Styles
Embedded
Styles
Inline
Styles
HTML
Attributes
9
CSS Syntax

Style sheets are composed of "Rules" that describe the
styling to be applied.

Each rule contains a Selector and a Declaration

Declarations are made up of property-value pairs
10
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; }
11
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.

12
Hexadecimal
Color Values
#
indicates a
hexadecimal value
 Hex
value pairs range
from 00 to FF
 Three
hex value pairs
describe an RGB color
13
Web Color Palette

A collection of 216 colors

Display the most similar on the Mac and PC platforms

Hex values:
00, 33, 66, 99, CC, FF

Color Chart : http://webdevbasics.net/color
14
Making Color Choices

How to choose a color scheme?
 Monochromatic
○ http://meyerweb.com/eric/tools/color-blend
○ http://www.0to255.com
 Choose from a photograph or other image
○ http://www.colr.org
 Begin with a favorite color
○ Use one of the sites below to choose other colors
 http://www.colorschemedesigner.com
 http://www.colorsontheweb.com/colorwizard.asp
CSS Syntax for Color Values
Syntax to configure a paragraph with red text
CSS Syntax
Color Type
p { color: red }
Color name
p { color: #FF0000 }
Hexadecimal color value
p { color: #F00 }
Shorthand hexadecimal (one character for each
hexadecimal pair – only used with web safe colors)
p { color: rgb(255,0,0) }
Decimal color value (RGB triplet)
p { color: rgba(255,0,0,0.5) }
p { color: hsl(0, 100%, 50%) }
CSS3: Decimal color value (RGB triplet) followed by the
alpha opacity (a value from 0 to 1). The CSS3 Color
Module is in draft status and is not yet uniformly
supported by browsers.
HSL color values. The CSS3 Color Module is in draft
status and is not yet uniformly supported by browsers.
See http://www.w3.org/TR/css3-color/#hsl-color
16
Inline CSS with the Style Attribute

Inline CSS
 Configured in the body of the Web page
 Use the style attribute of an HTML tag
 Apply only to the specific element

The Style Attribute
 Value: one or more style declaration property and value pairs

Examples
<h1 style="color:#ff0000">Heading text is red</h1>
<h1 style="color:#FF0000;background-color:#cccccc">This is
displayed as a red heading with gray background</h1>
17
Configure Embedded CSS
with the Style Element






Configured in the head section of a web page.
Use the HTML <style> element
Apply to the entire web page document
Style declarations are contained between the opening and
closing <style> tags
The optional type attribute indicates the MIME type of
text/css
Example:
<style
body { background-color: #000000;
color: #FFFFFF;
}
</style>
18
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>
External Style Sheets - 1

CSS style rules are contained in a text file
separate from the HTML documents.

The External Style Sheet text file:
 extension ".css"
 contains only style rules
 does not contain any HTML tags
20
External Style Sheets - 2
Multiple web pages can associate with the same
external style sheet file.
site.css
body { background-color: #E6E6FA;
color: #000000;
}
h2 { color: #003366; }
index.html
clients.html
about.html
Etc…
21
The <link> Element
A self-contained tag
 Placed in the head section
 Purpose: associates the external style
sheet file with the web page.
 Example:

<link rel="stylesheet" href="color.css" type="text/css">
22
Using an
External Style Sheet
External Style Sheet color.css
body { background-color: #0000FF;
color: #FFFFFF;
}
To associate with the external style sheet called color.css,
place the following code in the head section:
<link rel="stylesheet" href="color.css" type="text/css">
Using Multiple External Style Sheets
More than one link element can be included
inside the head element
 The styles are applied in the same sequence
as the link elements

 Styles for the first link element are applied first
then styles from the next link applied and so on
 If the same elements are styled in more than one
of the linked style sheets it is possible for the last
linked style to override the first linked style

Example:
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="product.css" type="text/css">
24
Using Multiple External Style Sheets
Example
LINKS in HEAD
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="product.css" type="text/css">
main.css
H1{text-align:center; color:blue;}
product.css
H1{color:red; font-style:italics;}
RESULT:
H1 elements will be centered and red
25
CSS Selectors
Common Types of Selectors:
 HTML element name selector
 class selector
 id selector
 descendant selector
Using CSS with “class”

class Selector
 Apply a CSS
rule to
ONE OR MORE
elements on a web page
 Does not associate the
style to a particular
HTML 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 HTML:
<p class=“new”>This is text is red and in italics</p>
27
Using a CSS id Selector

id Selector
 Apply a CSS
rule to ONLY ONE element
on a web page.
<style type="text/css">
#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>

Configure with #idname

The sample creates an id called “new” with red,
large, italic text.

To use the id, code the following HTML:
<p id=“new”>This is text is red, large, and in italics</p>
28
Using a CSS Descendant Selector

Descendant Selector
 Apply a CSS
rule within the context of
the container (parent) element.
 Sometimes called a
contextual selector.


<style>
footer p {color: #00ff00; }
</style>
Configure by listing the
container selector followed by the selector you are styling.
The sample specifies a green text color for only the
paragraph elements located within the footer element.
29
W3C CSS Validation

http://jigsaw.w3.org/css-validator
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
Overcoming Potential
Problems with Browsers

Older browsers like IE 7 & 8 do not
recognize HTML5 elements
 Solution: JavaScript shiv

Inconsistency in Browser default styles
can create problems particularly with
page layout
 Solution: link normalize.css
32
Accomodating for HTML5 in
older browsers
HTML5 introduced a few semantic elements that are not
supported in older browsers (IE 7 & 8).
 Some of these new elements are no different than generic
block elements so they don’t pose any compatibility problems.
All you need to ensure compatibility is to add a CSS rule to
your website that causes the relevant elements to behave like
block elements.
 But Internet Explorer versions 8 and under pose a challenge.
Any element not in the official roster of elements cannot be
styled with CSS. That means we cannot make then behave
like block elements or give them any formatting – in effect
these newer elements don't exist!

33
JavaScript shiv for HTML5 in
older browsers


A JavaScript shiv (or shim) forces older browsers, like
Internet Explorer 7 and 8, to recognize the HTML5
semantic elements and let you apply CSS to these
elements.
The effect of the shiv is to add the HTML5 semantic
elements to the DOM in the browser and also to add a
CSS rule set that tells the browser to treat the HTML5
elements as block elements instead of inline elements.
34
Code to include the JavaScript
shiv for HTML5
<head>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
</head>
35
Normalize.css
Normalize.css makes browsers render all elements more
consistently and in line with modern standards. It precisely
targets only the styles that need normalizing.
 It makes minor adjustments to browser defaults so all
browsers render HTML elements the same way.
 For instance, the normalize.css style sheet sets the margins
for the body of the document to zero so there’s no space
between the body and the edge of the browser window.
 It is a small CSS file that provides better cross-browser
consistency in the default styling of HTML elements. It’s a
modern, HTML5-ready, alternative to the traditional CSS reset.

36
Using normalize.css
1. Visit URL where style sheet file is available –
https://github.com/necolas/normalize.css/
2. Download normalize.css and store in your website
root folder
3. Link normalize.css as the FIRST style sheet link in
the head
<head>
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
37
Styling Text, Units of Measure Used in CSS, CSS3 Shadows,
Pseudo-Classes and Pseudo-Elements, Floating Images,
Chrome Developer Tools
38
Configure Typeface with CSS

font-family property
 Configures the font typeface of the text
 Include a generic family name
p { font-family: Verdana, Arial, sans-serif; }
Configure Text Size, Weight, and
Style with CSS
 font-size
○ p { font-size: 90%; }
Configures the size of the text
 font-weight
Configures the boldness of text
○ li {font-weight: bold; }
 font-style property
Configures the style of the text
○ footer { font-style: italic; }
 font-variant
Converts text to small caps
○ h1 {font-variant: small-caps; }
 line-height property Modifies the height of a line of text
○ p { line-height: 120%; }
CSS Units of Measure

CSS rules that use units of measure:
 margin, padding, font-size, width, height, border, text-indent,
line-height, letter-spacing, word-spacing
symbol
name
type
description
px
pixel
Absolute
(relative to the
viewing device)
A pixel represents a single dot on a monitor.
The number of dots per inch depends on the
resolution of the monitor.
pt
point
Absolute
A point is 1/72 of an inch
em
ems
Relative
1 em is equal to the font-size of the current
font
%
precent
Relative
A percent specifies a value relative to the
current value

For Accessibility and RWD – Use em or percents:
◦ For font-size these can be easily enlarged in all browsers by users
◦ For other properties these can be easily enlarged and reduced for various device
screen sizes
41
The
font-size
Property

For Accessibility and RWD:
◦ Use em or percentage font sizes – these can be easily enlarged in all browsers by
users
Align and Indent Text with CSS
 text-transform property
○ Configures the capitalization of text
○ h1 { text-transform: uppercase; }
 text-align property
○ Configures the alignment of text
○ h1 { text-align: center; }
 text-indent property
○ Configures the indentation of the first line of text in an
element
○ p { text-indent: 5em; }
 text-decoration
○ Configures decoration of underline, overline, line through
or none
○ a { text-decoration:none; }
CSS3 text-shadow Property

Configure the horizontal offset,
vertical offset, blur radius,
and valid color value
Example:
header { text-shadow: 3px 3px 3px #666; }

44
Styling links with
CSS Pseudo-classes

Pseudo-classes and the anchor element
◦ :link – default state
for a hyperlink
◦ :visited –a hyperlink that
has been visited
a:link {color:#000066;}
a:visited {color:#003366;}
a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
a:active {color:#FF0000;}
◦ :focus – triggered when
the hyperlink has focus
◦ :hover – triggered when
the mouse moves over the hyperlink
◦ :active – triggered when the hyperlink is being clicked
CSS
Pseudo-classes
a:link { color: #ff0000; }
a:hover { text-decoration: none;
color: #000066; }
46
Other common CSS3
pseudo-classes & pseudo-elements

Pseudo-classes
 :first-child, :last-child, :only-child

Pseudo-elements
 ::first-letter, ::first-line

These are often used
 to style Paragraph's first letters as Drop
Caps
 to style table rows in alternating colors
 inside jQuery's styles
47
Pseudo-class and Pseudo-element Example
<main>
<p>Welcome to San Joaquin Valley Town Hall.</p>
<p>We have some fascinating speakers for you this
season!</p>
<ul>
<li><a href="toobin.html">Jeffrey Toobin</a></li>
<li><a href="sorkin.html">Andrew Ross
Sorkin</a></li>
<li><a href="chua.html">Amy Chua</a></li></ul>
</main>
a:link { color: green; }
a:hover, a:focus { color: fuchsia }
main p:first-child { font-weight: bold; }
main p:first-child::first-letter { font-size: 150% }
48
Pseudo-class and Pseudo-element Example
49
Float an Image so Text Flows
Around It
The HTML
<img src="images/logo.gif" alt="Town Hall Logo">
<h1>San Joaquin Valley Town Hall</h1>
<h2>Bringing cutting-edge speakers to the valley</h2>
The CSS
img { float: left;
margin-right: 1em; }
50
The h2 text is
displayed in
normal flow.
clear Property
Useful to “clear” or
terminate a float
 Values are left,
right, and both

clear: left;
was applied to the
h2. Now the h2 text
displays AFTER the
floated image.
Chrome's Developer Tools
CSS Inspector (F12)
52
How to Use Chrome's
Developer Tools



To show/hide the panel for the tools, press the
F12 key.
To inspect the styles that have been applied to an
element, click on the element in the Elements
pane at the left side of the developer tools panel.
Or, click on the inspect icon at the left of the
toolbar for this panel, and then click on an element
in the web page.
The styles that have been applied to the selected
element are displayed in the Styles pane at the
right side of the developer tools panel.
53