15.2 What Is a Style Sheet?


Webster's Dictionary defines "style" as a manner of doing something very grandly; elegant, fashionable. Style sheets make HTML pages elegant by allowing the designer to create definitions to describe the layout and appearance of the page. This is done by creating a set of rules that define how an HTML element will look in the document. For example, if you want all H1 elements to produce text with a green color , set in an Arial 14-point font face centered in the page, normally you would have to assign these attributes to each H1 element as it occurs within the document, which could prove quite time consuming. With style sheets you can create the style once and have that definition apply to all H1 elements in the document. If you don't have a lot of time to learn how to create style sheets, an excellent alternative is Macromedia's Dreamweaver MX. For more on authoring tools, see http://www.w3.org/Style/CSS/#editors.

15.2.1 What Does CSS Mean?

CSS is short for Cascading Style Sheets and is a standard defined by the World Wide Web Consortium (W3C), first made official in December of 1996. They are called cascading because the effects of a style can be inherited or cascaded down to other tags. This gets back to the parent/child relationship we talked about in Chapter 12, "Handling Events," and the DOM. If a style has been defined for a parent tag, any tags defined within that style may inherit that style. Suppose a style has been defined for a <p> tag. The text within these tags has been set to blue and the font is set to Arial. If within the <p> tag, another set of tags is embedded, such as <b> or <em> , then those tags will inherit the blue color and the Arial font. The style has cascaded down from the parent to the child. But this is a simplistic definition of cascading. The rules can be very complex and involve multiple style sheets coming from external sources as well as internal sources. And even though a browser may support style sheets, it may resolve the conflicting CSS information differently or it may not support the cascading part of it at all.

15.2.2 What Is a CSS-Enhanced Browser?

A CSS-enhanced browser supports CSS and will recognize the style tag <style> as a container for a style sheet, and based on the definition of the style, will produce the document accordingly . Most modern browsers, such as IE4+, Netscape 4+, Opera 3.5+, and Apple's Safari Web browser and Mozilla support CSS, and the majority of Web users are running a CSS-enhanced browser. However, just because a browser is CSS enhanced, doesn't mean that it is flawless or without limitiations. And just because a browser is not CSS enhanced, doesn't mean that it can't see the content of a page. [1]

[1] For an updated overview of available browsers, see the W3C overview page: http://www.w3.org/Style/CSS/#browsers.

Traditionally, browsers have silently ignored unknown tags, so if an old browser happens to encounter a <style> tag, its content will be treated simply as part of the document. It is also possible to hide the <style> tag within HTML comments if the browser is too old to recognize CSS, or it might just be a good time to upgrade to a newer model. (See "CSS Comments" on page 498 for more on this.)

15.2.3 How Does a Style Sheet Work?

A style sheet consists of the style rules that tell your browser how to present a document. The rules consist of two parts : a selector ”the HTML element you are trying to stylize, and the declaration block ”the properties and values that describe the style for the selector.

FORMAT

graphics/15inf02.gif

This rule sets the color of the H2 element to blue:

 
 H2 { color: blue } 

A rule, then, consists of two main parts: the selector (e.g., H2 ) and the declaration block (e.g., color: blue ). The following example demonstrates this simple rule.

Example 15.1
 <html><head><title>First Style Sheet</title> 1  <style type="text/css">  2  h1 { color: red }   h2 { color: blue  }   </style>  </head>     <body bgcolor=silver> 3  <h1>  Welcome to my Stylin' Page</h1> 4  <h2>  What do you think?</h2>     </body>     </html> 

EXPLANATION

  1. The style sheet starts with the HTML <style> tag and specifies that the style sheet consists of text and CSS. The purpose of this style sheet is to customize HTML tags, thus giving them a new style.

  2. A selector is one of any HTML elements, such as h1, h2, body, li, p, or ul. In this example, the h1 and h2 elements are selectors. The declaration has two parts: property ( color ) and value ( red ). Every time an <h1> tag is used in the document, it will be red, and every time an <h2> tag is used, it will be blue. (There are approximately 50 properties beyond the color property that are defined in the CSS specification!)

  3. The <h1> tag will be displayed in red, based on the rule in the style sheet.

  4. The <h2> tag will be displayed in blue, based on the rule in the style sheet.

Figure 15.1. Style sheet with Internet Explorer (top) and with Nescape (bottom). If this book was in color, you would be able to see that the h1 is in red, and the h2 is in blue.

graphics/15fig01.jpg

CSS Comments

CSS comments, like C language comments, are enclosed in /* */. They are the textual comments that are ignored by the CSS parser when your style is being interpreted, and are used to clarify what you are trying to do. They cannot be nested.

 
 H1 { color: blue }    /*  heading level 1 is blue  */ 
Grouping

Grouping is used to reduce the size of style sheets. For example, you can group selectors in comma-separated lists, if you want the same rule to apply to all of the elements:

 
 H1, H2, H3 { font-family: arial; color: blue } 

Now all three heading levels will contain blue text in an Arial font face.

You can also group a set of declarations to create the style for a selector(s). The following rule combines a number of declarations describing the font properties for an H1 element:

 
 H1 {      font-weight: bold;      font-size: 12pt;      line-height: 14pt;      font-family: verdana; } 

And you can group the values for a particular property as follows :

 
 h2 {font: bold 24pt arial} 
Example 15.2
 <html>     <head><title>Grouping Properties</title>     <style type="text/css"> 1  h1,h2,h3 { color: blue }  /*  grouping selectors  */ 2  h1 {  /*  grouping declarations  */  font-weight: bold;   font-size: 30pt;   font-family: verdana;   }  3  h2 {  /*  grouping a property's values  */  font: bold 24pt arial   }  </style>     </head>     <body bgcolor=silver> 4  <h1>  Welcome to my Stylin' Page</h1> 5  <h2>  What do you think?</h2> 6  <h3>  Groovy!</h3>     </body>     </html> 

EXPLANATION

  1. Three selectors, h1, h2 , and h3 , are grouped together. The declaration block enclosed in curly braces sets the color property to blue . Whenever any one of the h1, h2 , or h3 elements is used in the document, its text will be blue.

  2. The declaration block for the h1 selector consists of a group of properties and values to further define the font style for this heading.

  3. The font property, in this example, groups the font values as a list, rather than creating individual property/value pairs as done on line 2.

  4. Now the h1 tag is tested to see if the style was applied, and it is!

  5. The style for the h2 tag is tested and it has been applied.

  6. The only style set for the h3 tag is a blue font, and that's all we get, as shown in Figure 15.2.

    Figure 15.2. Grouping selectors and declarations for h1, h2 , and h3 HTML elements.

    graphics/15fig02.jpg

Units of Measurement

You can express the size of a given property in different units of measurement; for example, a font size can be expressed in pixels or ems or points (the default is pixels). Colors can also be expressed in combinations of red, green, and blue, either by the name of the color, or its hexadecimal value.

Measurement is used in three categories: absolute units, relative units, and proportional units. For example, a point size measurement (e.g., 14pt ) would be the actual size (absolute) of a particular font; a value (e.g., 5em) could be relative to the size of the current font; and a color (e.g., 50%80%100% ) could represent red, green, and blue as a percentage value of the original color. Table 15.1 introduces the types of measurements that are often used in style sheets.

Table 15.1. CSS units of measurement.

Unit of Measurement

Description

%

Relative value as a percentage of parent element

cm

Centimeter

deg

Degree; angular measure used in aural styles

em

Relative length value proportional to current font size; width of the letter M for that font

ex

Vertical height of letter x relative to current font; height of a lowercase x for that font

float

Can be specified if a property value has no applicable unit of measurement, same as integer

hz

Hertz; for audio content

in

Inch, 2.54 cm

integer

Can be specified if a property value has no applicable unit of measurement, same as float

mm

Millimeter

ms

Millisecond, 1/1000 sec

pc

Pica, 12 points

pt

Point size, 1/72 inch

px

Pixel (based on the resolution of the monitor)

rgb(#,#,#)

Red, green, blue; e.g., rgb(203,55,266)

rgb(R%,G%,B%)

Red, green, and blue percentage values of a color; e.g., rgb(80%,20%,100%)

#rrggbb or #RRGGBB

color values (red, green, blue)

sec

Second, 1000 ms

Examples:

  • font-size: 10pt

  • top: 20px

  • margin: 1em

  • margin-right: 20%

  • color: blue

15.2.4 Common Style Sheet Properties (Attributes)

In the previous examples, font-family and color are properties (also called attributes), and by assigning values to them, the style of the document is defined. Listed in Table 15.2 are some of the properties commonly used in style sheets. Many of these properties are used in the style sheets defined throughout this chapter and later as properties of the style object used with JavaScript. The Web Design Group provides a complete listing of this information at http://www.htmlhelp.com/reference/css/properties.html.

Table 15.2. Style sheet properties.

Property

Value/Example

Tags Affected

Fonts

Font

12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial, normal small-caps

All

font-family

serif, sans-serif, cursive , fantasy, monospace; or any specific font typeface name may be used

All

font-size

12pt, larger, 150%, 1.5em

All

font-size-adjust

xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 12pt, 25%

All

font-stretch

normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra -expanded

All

font-style

normal, italic, oblique

All

font-variant

normal, small-caps

All

font-weight

normal, bold, bolder, lighter,100, 200...900

All

Colors and Background

background-attachment

scroll, fixed

All

background-color

red, blue, #F00, transparent

All

background-image

URL (bay.gif), none

All

background-position

right top, top center, center, bottom, 100% 100%, 0% 0%, 50% 50%

Block-level and replaced elements

background-repeat

repeat, repeat-x (horizontally), repeat-y (vertically), no-repeat

All

color

red, green, #F00, rgb(255,0,0)

All

Text Alignment

letter-spacing

normal, 0.1em

All

line-height

normal, 1.2, 1.2em, 120%

All

text-decoration

underline, overline, line-through, blink

All

text-transform

capitalize, uppercase, lowercase, none

All

text-align

left, right, center, justify

All

text-indent

3em, 15%

Block-level elements

vertical-align

baseline, sub, super, top, text-top, middle, bottom, text-bottom, 50%

Inline elements

word-spacing

normal, 2em

All

Margins and Borders

border-bottom

<border-bottom-width> or < border-style > or <color>

All

border-bottom-width

thin, medium, thick, 2em

All

border-color

red, green, #0C0

All

border-left

<border-left-width> or <border-style> or <color>

All

border-left-width

thin, medium, thick, 3em

All

border-right

<border-right-width> or <border-style> or <color>

All

border-right-width

thin, medium, thick, 1cm

All

border-style

[none], dotted , dashed, solid, double, groove, ridge[inset,outset]{1,4}

All

border-top

<border-top-width> or <border-style> or <color>

All

border-top-width

thin, medium, thick, 3em

All

border-width

thin, medium, thick, .5cm

All

clear

none, left, right, both (allows or disallows floating elements on its sides)

All

float

left, right, or none (wraps text around an element, such as an image)

All

height

12em, auto

Block-level and replaced element

margin

5em, 3em, 2em,1em (top, right, bottom, left)

All

margin-bottom

100px, 50%

All

margin-left

.5in, 40%

All

margin-right

20em,45%

All

margin-top

1cm, 20%

All

padding

2em, 4em, 6em (right, bottom, left)

All

padding-bottom

2em, 20%

All

padding-left

.25in, 20%

All

padding-right

.5cm, 35%

All

padding-top

20px, 10%

All

width

12em, 30%, auto (initial width value)

Block-level and replaced element [a]

[a] A replaced element has set or calculated dimensions, such as img, select, textarea .

Working with Colors

What is style without color? Table 15.3 lists the properties for managing color. You can use these properties to create color for the document's background and fonts, margins, borders, and more. The colors can be expressed with real names (e.g., red, blue, yellow, magenta ) or their corresponding hexadecimal values (e.g., #FF0000, #0000Ff, #ffff00, #ff00FF ) (see Tables B.1 and B.2 in Appendix B for a full list).

Sometimes colors don't look as crisp and bright as you would expect; pink might look like red, or some of the colors in a field of flowers might be dull. In Chapter 10, "The Browser Objects: Navigator, Windows, and Frames," we discussed the screen object. It has a property called colorDepth that will tell you how many colors in bits a computer can handle. For example, a color-bit depth of 4 will display 16 colors and a color-bit depth of 32 will provide 16.7 million colors. How many colors can your computer display?

There are a number of color charts available on the Web that provide Web-safe color palettes. See www.lynda.com, www.paletteman.com, or www.visibone.com.

Table 15.3. Color properties.

Property

Value/Example

Elements Affected

background-color

red, blue, #F00

All

Color

red, green, #F00, rgb(255,0,0)

All

Example 15.3
 <html><head><title>Colors</title>     <style type="text/css"> 1      body {  background-color: blue  } 2      h1 {  color: #FFFF33;  } 3      p {  color: white;  }     </style>     </head> 4   <body>         <font size="+2"> 5  <h1>  Welcome to my Stylin' Page</h1> 6  <p>  This paragraph is all white text on a blue background.<br>         Do you like it?         </p>     </body>     </html> 

EXPLANATION

  1. A style is defined for the background of the document. It will be blue.

  2. The text for all <h1> tags will be yellow ( #FFFF33 is yellow).

  3. Paragraphs will have white text.

  4. The body of the page will be blue.

  5. The heading level <h1> is displayed in its yellow style.

  6. Any text enclosed in <p> </p> will be white against a blue body. See Figure 15.3 for output.

    Figure 15.3. Colored text and background.

    graphics/15fig03.jpg

Working with Fonts

The presentation of a document would be quite boring if you only had one font face and size available. CSS lets you specify a style for the fonts in a document in a variety of ways ”by family, size, color, and others (see Table 15.4). There are a huge number of fonts to pick from, although it's a good idea to specify fonts that users are likely to have installed. Like the HTML <font> tag, CSS lets you specify several font families (see Table 15.5), and will go from left to right, selecting the one available on your computer.

Table 15.4. Font properties.

Property

Value/Example

Elements Affected

font

12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial, normal small-caps

All

font-family

serif, sans-serif, cursive, fantasy, monospace; or any specific font family typeface name may be used

All

font-size

12pt, larger, 150%, 1.5em

All

font-style

normal, italic, oblique

All

font-variant

normal, small-caps

All

font-weight

normal, bold, bolder, lighter, 100, 200...900

All

Table 15.5. Font families.

Family Names

Specific Family Typeface Names

Serif

graphics/serif.gif

Sans-serif

graphics/sans.gif

Monospace

graphics/monospace.gif

Cursive

graphics/cursive.gif

Fantasy

graphics/fantasy.gif

Example 15.4
 <head><title>Fonts</title>     <style type="text/css">         body { background-color: darkblue; } 1       h1 { color: yellow;  font-size:x-large;   font-family: lucida, verdana, helvetica;  } 2       h2 { color:lightgreen;  font-size:large;   font-family:courier;  } 3       h3 { color:lightblue;  font-size:medium;   font-family:helvetica; }  4       p { color:white;  font-size: 22pt;   font-style: italic;   font-family: arial;   font-variant:small-caps; }  </style>     </head>     <body>         <font size="+2">         <h1>My name is Papa Bear</h1> 5       <h2>My name is Mama Bear</h2>         <h3>and I'm the Baby Bear</h3>         <p>Once upon a time, yaddy yaddy yadda...</p>     </body>     </html> 

EXPLANATION

  1. The h1 element will have yellow text, an extra-large font size from the Lucida family of fonts. If that font is not available in this browser, Verdana will be used, and if not Verdana, then Helvetica.

  2. The h2 element will have a light-green, large, Courier font.

  3. The h3 element will have a light-blue, medium, Helvetica font.

  4. Paragraphs will have white text, with an italic, Arial font size of 22 points, all in small caps.

  5. The <h2> tag is displayed in its big style. See Figure 15.4.

    Figure 15.4. Changing fonts.

    graphics/15fig04.jpg

Working with Text

If you want to make a business card, how do you put extra space between each of the letters of your company name? If you're writing a science term paper, how do you deal with exponents, equations, or subscripts? And how do you make it double- spaced ? If you're writing a cool poem and want your text in the shape of an hourglass or a circle to give it visual appeal , or you just want to emphasize certain words to make your point for a presentation, then what to do? The CSS controls listed in Table 15.6 may be your answer.

Table 15.6. Text alignment properties.

Property

Value/Example

Elements Affected

letter-spacing

normal, 0.1em

All

line-height

normal, 1.2, 1.2em, 120%

All

text-align

left, right, center, justify

All

text-decoration

underline, overline, line-through, blink

All

text-indent

3em, 15%

Block-level elements

text-transform

capitalize, uppercase, lowercase, none

All

vertical-align

baseline, sub, super, top, text-top, middle, bottom, text-bottom, 50%

Inline elements

word-spacing

normal, 2em

All

Example 15.5
 <html><head><title>First Style Sheet</title>     <style type="text/css"> 1       #title{ 2  word-spacing: 10px;   letter-spacing: 4px;   text-decoration: underline;   text-align: center;  font-size: 22pt ;             font-family:arial;             font-weight: bold;         } 3       p {  line-height: 2;   text-indent: 6%;  font-family:arial;             font-size:18; }         }     </style>     </head>     <body bgcolor="coral"> 4  <p id=title>The Color Palette  5  <p>  The world is a colorful place. Web browsers display         millions of those colors every day to make the pages seem         real and interesting. Browser colors are displayed in         combinations of red, green, and blue, called RGB. This is a         system of indexing colors by assigning values of 0 to 255 in         each of the three colors, ranging from no saturation (0) to         full saturation (255). Black has a saturation of 0 and         white has a saturation of 255. In HTML documents these         colors are represented as six hexadecimal values, preceded         by a # sign. White is #FFFFFF and black is #000000. 6  <p>  Although there are millions of different combinations of color,         it is best when working with Web pages to use what are         called Web-safe colors.     </body>     </html> 

EXPLANATION

1 #title is called an ID selector, a way in the style sheet that we can allow any selector to use a style. In this example, the title of the page is going to be distinct from the text in the rest of the page. For example, if the <p> tag is used, it can identify itself with this ID selector in order to produce the text style described in the declaration block (see line #4). If the ID is not used, the rest of the paragraphs will display text as defined by the rule in line #3. More discussion on ID selectors is presented in "The ID Selector" on page 523.

2 Text controls are defined in the rule. The text will be centered, underlined , with a 22pt, bold Arial font. The spacing between each letter and each word is defined in pixels.

3 When the <p> tag is used, a line height of 2 will produce double-spaced lines. The first line of each paragraph will be indented by 2% from the left margin.

4 This paragraph is identifying itself with the title ID. This means that for this paragraph, the style will follow the rule defined after line 1.

5, 6 Both of these paragraphs take on the style provided by the rule in line 3.

Figure 15.5. A report with a centered title, double-spaced lines, and indented paragraphs.

graphics/15fig05.jpg

Working with Backgrounds and Images

The same way that wallpaper in a guest room can create a sense of warmth or calm, background images can add decoration and design to an otherwise blah page. CSS gives you a number of ways to control the appearance of background images. Refer to Table 15.7.

Table 15.7. Image and background properties.

Property

Value/Example

Elements Affected

background-attachment

scroll, fixed

All

background-image

URL (bay.gif), none

All

background-position

right top, top center, center, bottom, 100% 100%, 0% 0%, 50% 50%

Block-level and replaced elements

background-repeat

repeat, repeat-x (horizontally), repeat-y (vertically), no-repeat

All

Example 15.6
 <html>     <head><title>Backgrounds</title>     <style type="text/css"> 1  body {background-color:"pink" ;  2  background-image: url(/books/4/357/1/html/2/greenballoon.gif);  3  repeat-x };  4      h1 {font-size: 42pt;text-indent: 25%;            color:red; margin-top: 14%;            font-family:fantasy;}     </style>     </head> 5  <body>  6       <h1>Happy Birthday!!</h1>         <h1>Happy Birthday!!</h1>     </body>     </html> 

EXPLANATION

  1. The rule for the body element is to give it a pink background color.

  2. The background image will come from a file called greenballoon.gif , in the current directory. The URL specifies the location of the image.

  3. The image will repeat itself horizontally across the screen.

  4. The rule for the h1 element is a red 42-point fantasy font, indented 25% from the left of the block, where the margin is 14% from the top.

  5. The body of the document reflects the style that was set for it in line #1.

  6. The <h1> tag reflects the rule set for it in line 4.

Figure 15.6. Background color and a repeating image.

graphics/15fig06.jpg

Working with Margins and Borders

When you look at your document, it is composed of a number of containers. The <body> tag is a container and it may contain a heading, a paragraph, a table, or other elements. Each of these elements also can be thought of as a container. Each container has an outer margin, and the margin can have some padding (space between it and the next container). The padding is like the CELLPADDING attribute of a table cell . On the inside of the padding is a border that separates the container from its contents. The border is normally invisible. You can change the margin, create colorful borders, or increase or decrease the padding, to give the page more style. See Figure 15.7 for a graphic representation, and Table 15.8 for a list of margin and border properties. Different browsers might handle the borders differently. Margins and borders will behave better if enclosed within <div> tags.

Figure 15.7. How an element is contained.

graphics/15fig07.gif

Table 15.8. Margin and border properties.

Property

Value/Example

Elements Affected

border-bottom

<border-bottom-width> or <border-style> or <color>

All

border-bottom-width

thin, medium, thick, 2em

All

border-color

red, green, #0C0

All

border-left

<border-left-width> or <border-style> or <color>

All

border-left-width

thin, medium, thick, 3em

All

border-right

<border-right-width> or <border-style> or <color>

All

border-right-width

thin, medium, thick, 1cm

All

border-style

[none], dotted, dashed, solid, double, groove, ridge [ inset,outset ]{1,4}

All

border-top

<border-top-width> or <border-style> or <color>

All

border-top-width

thin, medium, thick, 3em

All

border-width

thin, medium, thick, .5cm

All

margin

5em, 3em, 2em, 1em (top, right, bottom, left)

All

margin-bottom

100px, 50%

All

margin-left

.5in, 40%

All

margin-right

20em, 45%

All

margin-top

1cm, 20%

All

padding

2em, 4em, 6em (right, bottom, left)

All

padding-bottom

2em, 20%

All

padding-left

.25in, 20%

All

padding-right

.5cm, 35%

All

padding-top

20px, 10%

All

Example 15.7
 <html>     <head><title>Margins and Borders</title>     <style type="text/css"> 1       body {  margin-top: 1cm; margin-left: 2cm ;  2  margin-bottom: 1cm; margin-right: 2cm;  3  border-width: thick;   border-style:solid;   border-color: red blue green yellow; padding:15px;  }         h1{ /*  grouping properties  */             font-weight: bold;             font-size: 30pt;             font-family: verdana;         }         h2 { /* grouping a property's values */ 4  border-style:dotted; border-color:purple;  font: bold 24pt arial         }     </style>     </head>     <body bgcolor=silver>     <h1>Crossing the Border!</h1>     <h2>Welcome!</h2>     <h3>Nice country.</h3>     </body>     </html> 

EXPLANATION

  1. The margins and borders are defined for the body of this document.

  2. The margin bottom is 1 centimeter up from the bottom of the document and 2 centimeters in from the left. There will be more whitespace around the headings, paragraphs, and other elements within the body because of the increased margin sizes.

  3. A thick, rainbow-colored border is placed on the inside of the margin.

  4. The border style for h2 elements is purple dots. See Figure 15.8.

    Figure 15.8. Playing with margins and borders. This is how the colorful border appears in NN7. (The border looks different in IE6. It surrounds the entire window.)

    graphics/15fig08.jpg



JavaScript by Example
JavaScript by Example (2nd Edition)
ISBN: 0137054890
EAN: 2147483647
Year: 2003
Pages: 150
Authors: Ellie Quigley

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net