The Web Warrior Guide to Web Design Technologies

Chapter 12

Cascading Style Sheets: Part II

The Web Warrior Guide to Web Design Technologies

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 sans-serif, 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, border-style, 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 {color: blue;} /* color name */

p {color: #0000ff;} /* hexadecimal value */

p {color: rgb(0,0,255);} /* RGB numbers */

p {color: 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