Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 77

● 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 are defined in the header of a Web page. These style instruc-
tions apply to the entire Web page document.
● External styles are coded in a separate text file. This text file is associated with
the Web page by using a <link /> element in the header section.
● Imported styles are similar to external styles in that they can connect styles coded
in a separate text file with a Web page document. An external style sheet can be
imported into embedded styles or into another external style sheet by using the
@import directive. This chapter concentrates on the other three uses of CSS.
Introduction to CSS Syntax
Style sheets are composed of rules that describe the styling to be applied. Each rule con-
tains a selector and a declaration . The selector can be an XHTML element, a class
name (that you create yourself), or an id name (that you create yourself). This example
concentrates on applying styles to XHTML elements. The declaration is the property
you are setting (such as color or typeface) and the value you are assigning to it.
For example, the CSS rule shown in Figure 3.1 would set the color of the text used on a
Web page to blue. The selector is the XHTML body tag and the declaration sets the
color property to the value of blue.
Figure 3.1
Using CSS to set
the text color to blue
If you wanted the background color of the Web page to be yellow, the CSS rule could
be expanded as follows:
body { color: blue; background-color: yellow; }
This could also be written using hexadecimal color values as follows:
body { color: #0000FF; background-color: #FFFF00; }
Notice that both the background-color and text color properties were configured in
the previous example. To avoid surprising results caused by default browser colors, the
W3C recommends that the background-color property is set when the text color is
configured.
Have you ever wondered why some text-based links are not underlined? This can be
accomplished with a style applied to the anchor tag. The following style rule selects the
anchor tag (denoted by a ) and sets the text-decoration property (the underline) to
none :
a { text-decoration: none }
You might be asking yourself how you would know what properties and values are
allowed to be used. This chapter introduces you to some of the CSS properties commonly