Download chap11

The Web Warrior Guide to
Web Design Technologies
Chapter 12
Cascading Style Sheets: Part II
Objectives
•
•
•
•
Learn about CSS measurement values
Format text with the CSS font properties
Learn to use the CSS margin, padding,
and border properties
Add color with the CSS color properties
Understanding CSS Measurement
Units
• CSS offers a variety of measurement
units, including absolute units (such as
points), relative units (such as pixels), and
percentages of the base font
• The measurement values you choose
depend on the destination medium for
your content
Absolute Units
• Absolute measurement values let you
specify a fixed value
• Avoid using absolute units for Web pages
because they cannot be scaled to the
individual user’s display type
Relative Units
• Relative units are designed to let you build
scalable Web pages that adapt to different
display types and sizes
• Relative units ensure that your type sizes
will display properly relative to each other
or to the default font size set for the
browser
Using the CSS Font Properties
The CSS font properties allow you to control
the appearance of your text:
•
•
•
font-family
font-size
line height
Specifying Font Families
•
•
The font-family property lets you state a
generic font family name, such as sansserif, or a specific font family name like
Helvetica
You can also string together a list of
substitute font families, separated by
commas, supplying a selection of fonts
that the browser can attempt to use
instead of the default font
Generic Font Families
•
•
•
•
•
Serif
Sans-serif
Monospace
Cursive
Fantasy
Code Sample
• The following rule sets <p> elements to
the default sans-serif font:
p {font-family: sans-serif;}
Specific Font Families
•
•
The font-family property lets you declare
a specific font family, such as Arial or
Helvetica
The user must have the font installed on
his or her computer; otherwise the
browser uses the default font
Code Sample
• The following rule sets <p> elements to
the Arial font:
p {font-family: arial;}
Specifying Font Substitution
• You can specify a list of alternate fonts
using commas as a separator
• The browser will attempt to load each
successive font in the list
• If no fonts match, the browser uses its
default font
Font Substitution Code Sample
• The following code tells the browser to use
Arial; if Arial is not present, it tells the
browser to use Helvetica:
p {font-family: arial, Helvetica;}
Specifying Font Size
• The font-size property gives you control
over the specific sizing of your type
• You can choose from length units, such as
em or px, or a percentage value that is
based on the parent element's font size
Font Size Code Sample
• The following rule sets the <p> element to
18-point Arial:
p
{font-family: arial; font-size:
18pt;}
Specifying Line Height
• The line height property lets you specify
either a length or percentage value for the
white space between lines of text
Line Height Code Sample
• The following rule sets the line height to
150%:
p {line-height: 150%;}
Using the Margin, Padding, and
Border Properties
• These properties let you control the
margin, padding, and border
characteristics of block-level elements
• You will learn how to use these properties
to enhance the display of content in the
browser
The CSS Box Model
• The CSS box model describes the
rectangular boxes that contain content on
a Web page
• Each block-level element you create is
displayed as a box containing content in
the browser window
• Each content box can have margins,
borders, and padding
Specifying Margins
• The margin properties let you control the
margin area of the box model
• Margins are always transparent, showing
the background of their containing element
p {margin: 2em;}
Specifying Padding
• The padding properties let you control the
padding area in the box model
• The padding area is the space between
the element content and the border
p {padding: 2em;}
Specifying Borders
• The border properties let you control the
appearance of borders around elements
• The border area is located between the
margin and padding
• The border property lets you state three
properties for all four borders of any
element
• You can state the border-width, borderstyle, and border-color in any order
Border Code Sample
• The following rule sets the border-style to
solid. The border-weight is 1 pixel. The
border color will be red.
p {border: solid 1px red;}
Working with Color
• These properties let you control the text
color and background colors of any
element on a Web page
• The CSS color property replaces the
obsolete <font> element in HTML
Color Basics
• A computer monitor displays color by
mixing three basic colors of light: red,
green, and blue
• Each of these three basic colors is called a
color channel
• The monitor can express a range of
intensity for each color channel, from 0
(absence of color) to 100% (full intensity of
color)
Specifying Color
• The color property lets you specify the
foreground color of any element on a Web
page
• This property sets the color for both the text
and the border of the element, unless you
have specifically stated a border color with
one of the border properties
Specifying Color
• The value for the color property is a valid
color keyword or numerical representation,
either hexadecimal or an RGB value
p
p
p
p
{color:
{color:
{color:
{color:
blue;}
/* color name */
#0000ff;}
/* hexadecimal value */
rgb(0,0,255);}
/* RGB numbers */
rgb(0%,0%,100%);}
/* RGB pctgs */
Specifying Background Color
• The background-color property lets you set
the background color of any element on a
Web page
• The background color includes any padding
area that you have defined for the element
body {background-color: #cccccc;}
Summary
•
•
•
Choose the correct measurement unit
based on the destination medium
Use the font properties to control the look
of your letter forms
Specify font substitution values to ensure
that your text displays properly across
different platforms
Summary
• The CSS box model lets you control the
margin, padding, and border
characteristics of HTML elements
• The border properties let you add borders
to all individual sides or all four sides of an
element
• Use the color property to set foreground
colors for elements
Summary
•
•
Background colors affect any padding
areas in the element
Remember that color is widely variable
on the Web
– different monitors and operating systems
display colors differently