X3: Styling a Page

Chapter X2 described the basics of HTML, the language for specifying the look of Web pages. In creating a simple Web page, you used HTML tags to organize text into paragraphs and sections with headings and format the text to appear in bold or italics. You learned to organize text into lists and tables and finally add hyperlinks and images to complete the standard collection of page elements.

While the pages you developed in Chapter X2 may have been serviceable, they lacked style. Text elements were in black and white, and everything was left justified. In general, Web browsers rely heavily on user preferences for displaying the contents of a page. Each browser has a set of defaults (e.g., language, font, text size, color scheme) that it uses to automatically format the contents of a page. However, you can override some of these defaults and style the display of the page to look more interesting. In this chapter, you will learn to style a page using style attributes and Cascading Style Sheets (CSS).

      Styling Text

Recall from Chapter X2 that an attribute is qualifier that can be assigned to an HTML element as part of its opening tag. For example, an img tag requires a src attribute to specify the image file address, while an a tag requires an href attribute to specify the link address. All the HTML tags we have seen have an optional attribute named style that can be used to customize the display of the element.

A style attribute is added to the opening tag of an element in the following general form:

    style="PROPERTY:VALUE"

where PROPERTY is a property of that element and VALUE is the value for that property. Note that different symbols are used for attributes and properties: an attribute (such as style) is assigned a value using an equals sign; a property is set within that attribute assignment using a colon.

    Adding Color

A common use of a style attribute is to change the text color of an element. By setting the color property within a style attribute, the browser is directed to display the text inside that element in a specific color (instead of the default black). For example, text in the paragraph below would appear in a red.

    <p style="color:red"> Here is some red text. </p>

Modern browsers support 140+ color names, all of which can be set to the color property of an element within a style attribute. Some of the most common colors are shown in FIGURE 1 below:

The HTML document in EXAMPLE 3.1 demonstrates the use of the style attribute to change the color of page elements. The heading will appear in blue since its opening tag has the attribute style="color:blue". The first second paragraph appears in red since its opening tag has the attribute style="color:red".

In addition to changing the color of text within an element, you can change the background color by setting the background-color property within the style attribute. For example, the following paragraph would be displayed as black text (the default color) on a yellow background.

    <p style="background-color:yellow">Highlighted text.</p>

An HTML element can only have one style element. If you want to set more than one property for an element, the properties must appear together in the same style attribute, separated by semi-colons. For example, the following paragraph would be displayed as white text on an olive background.

    <p style="color:white; background-color:olive">Highlighted and colored text.</p>

The HTML document in EXAMPLE 3.2 demonstrates the use of the style attribute to change the color properties of paragraphs. The first paragraph will have black text (the default) on a light blue background, while the second paragraph will have white text on a gray background.

If you wanted to change the text or background color for an entire Web page, that can easily be accomplished by setting the desired property in the style attribute of the opening body tag. Since the body element contains all the elements that appear in the page, setting its property (e.g., text or background color) automatically sets that property for all the enclosed elements as well. For example, the Web page in EXAMPLE 3.3 will have all its text appear in white on an olive background:

When you set the color and/or background-color properties in the style attribute of a body tag, it sets the defaults for that page. However, you can still add style attributes to individual elements to override those defaults. For example, if you placed the attribute style="color:brown" in a heading or paragraph, it would override the default for that element and display its text in brown. Similarly, if you placed the attribute style="color:black;background-color:white" in a heading or paragraph, it would override both defaults and display its text as black on white.

    <body style="background-image:url(http://freecsc.com/Images/paper.jpg)">

    Text Alignment & Indentation

By default, all text in a Web page is displayed left-justified on the page. This means that each heading, paragraph, or line of text begins at the page's left edge. However, it is possible to align text-based elements so that they are centered or right-justified by setting the text-align property in the style attribute. For example, the heading in EXAMPLE 3.4 will be centered in the page, since it has the attribute style="text-align:center". The first paragraph will be left-justified in the page, since this is the default alignment, while the second paragraph will be right-justified since it has the attribute style="text-align:right".

Closely related to the text-align property, the text-indent property specifies how much the first line of a paragraph should be indented. For example, the first paragraph in EXAMPLE 3.4 has its first line indented 10 pixels, due to the attribute style="text-indent:10px". Subsequent lines in the paragraph are not indented — they extend all the way to the left edge of the page.

If you want to indent an entire paragraph, not just the first line, then the margin-left property can be set. For example, the first paragraph in EXAMPLE 3.5 has the attribute style="margin-left:20px". As a result, every line in that paragraph will be displayed with a 20-pixel margin to the left. There is a corresponding margin-right property as well, in case you want indentation from the right. For example, the second paragraph in EXAMPLE 3.5 has both properties set via style="margin-left:20px;margin-right:20px". As a result, it will be displayed with a 20-pixel margin on both the left and right. In cases such as this, where the margin is the same on the left and right, there is a shortcut that can be used. Setting the margin property has the effect of setting both the margin-left and margin-right properties at the same time. For example, the third paragraph in EXAMPLE 3.5 has the attribute style="margin:20px", which has the same effect as in the second paragraph.

    Customizing Fonts

In printing terminology, a font defines a particular typeface (such as Times New Roman, Courier, or Arial) and size (such as 11 pt. or 12 pt.) used to display text. Each Web browser has a default font for displaying text in a page. For example, in Google Chrome, the default font is typically Times New Roman with size 16 pixels. Using the style attribute, a Web developer can assert control and override the default typeface and/or size for fonts in the page.

To set the font typeface for an element, the font-family property must be set in the style attribute. For example, the first paragraph below would be displayed using the Helvetica typeface, while the second would be displayed using the Garamond typeface:

    <p style="font-family:Helvetica">This text appears in Helvetica.</p>

    <p style="font-family:Garamond">This text appears in Garamond.</p>

The name font-family refers to the fact that typefaces are grouped into families that share basic characteristics: serif typefaces utilize small lines or strokes to embellish characters, sans serif typefaces are simpler with no embellishments, and monospace typefaces have uniform-width characters. Examples of font typefaces that are supported by all browsers are listed in FIGURE 2.

In EXAMPLE 3.6 below, the attribute style="font-family:Arial" sets the default font for the page. However, as we have seen before, a default property can be overridden within a specific element. The heading at the top of the page has the attribute style="font-family:Menlo", so it will appear in a different font.

In addition to the typeface, you can also change the size of a font using the font-size property. The value of a font-size property can be absolute, as in a specific number of pixels, or relative, as in a percentage of the default text size. Since the user always has the option of shrinking or expanding font sizes to meet their preference, the more useful approach is to specify a percentage. For example, the second paragraph in EXAMPLE 3.7 displays its text at half the size of the default text. The third paragraph displays its text at twice the default size (using the font typeface Garamond).

    Spans & Divs

In addition to the paragraph element, HTML provides two additional text-based elements that are extremely useful with respect to styling. A span identifies a small grouping of text, typically a word or phrase. Because of their small size, spans are not set off from surrounding text like a paragraph. This makes them useful for embedding styled text within a sentence or paragraph. For example, the first paragraph in EXAMPLE 3.8 contains a span element that contains the word "colorful." Since this span has the attribute style="color:red", the contained word will appear in red while the text around it is the default black. A second span in the paragraph contains the phrase "words or phrases". Since this span has the attribute style="font-size:150%", the contained phrase will appear 50% larger than the surrounding text.

While a span is a grouping of text smaller than a paragraph, a div (short for a page division) is a larger grouping of text. A div can be used to group multiple HTML elements into a single unit, such as two or more paragraphs. By placing multiple paragraphs inside a div element, you can easily format them as one by setting the style properties of the div. For example, the second and third paragraphs in EXAMPLE 3.8 are enclosed in a div element. Since that div has attribute style="text-align:center;color:blue", both of the enclosed paragraphs will appear centered with blue text.

      Styling Other Elements

The text-align property, when set in a style attribute, is effective for aligning headings, paragraphs and divs. Unfortunately, it does not work correctly for images, tables and lists. In the case of an image, adding the style="text-align:center" attribute to an img tag has no effect since an image is not text-based. Adding style="text-align:center" to a table tag does have an effect, but the table itself is not centered, just the text inside the table. Similarly, adding style="text-align:center" to a list element will center the list items, but the numbers (for an ordered list) or bullets (for an unordered list) still appear at the left edge of the page.

To center or right-justify an image, it suffices to place the img tag inside a div element, and then set the desired text-align property in the style attribute of the div. For example, the following element would center an image:

    <div style="text-align:center">
        <img src="http://freecsc.com/Images/happy.png" alt="Happy Face">
    </div>

To align a table, i.e., make the table itself appear in the center of the page, you must set its margin property (introduced earlier in the context of indenting paragraphs). The style attribute style="margin:auto" specifies that the margins should be automatically set to center the table:

    <table style="margin:auto">
        . . .
    </table>

Finally, to align a list requires a combination of these two approaches: you must embed that list in a div element that is centered, then add a style attribute to the table itself to make sure the list contents are left-justified within the centered div. For example:

    <div style="text-align:center">
        <ol style="display:inline-block; text-align:left">
            . . .
        </ol>
    </div>

The HTML document in EXAMPLE 3.9 has three centered elements: an image (with a caption below it), a table, and an ordered list.

There are additional style properties that can be added to tables and lists to alter their appearance. All the text-formatting properties that we discussed earlier in the chapter (e.g., color, background-color, font-family) can be set in an opening table tag to style the text that appears in the table. You can also set those properties in individual tr or td tags to only affect those rows and column entries.

You can add a solid border around a table or individual rows or column entries by setting the border-style property to solid. For example, the following table would have a solid border around the outside. In addition, the first row would have a light gray background, and the second row would have a dark gray background.

    <table style="border-style:solid">
        <tr style="background-color:lightgray"> <td>one</td> <td>two</td> </tr>
        <tr style="background-color:darkgray">  <td>three</td> <td>four</td> </tr>
    </table>

By default, ordered list items are displayed with numbers to the left, while unordered lists are displayed with circular bullets. These defaults can be easily changed by setting the list-style property. For an unordered list, adding style="list-style:square" to the <ul> tag will replace the circles with squares. For an ordered list, style="list-style:lower-alpha" specifies lower-case letters (a, b, c, ...), style="list-style:upper-alpha" specifies upper-case letters (A, B, C, ...), style="list-style:lower-roman" specifies lower-case roman numerals (i, ii, iii, iv, ...), and style="list-style:upper-roman" specifies upper-case roman numerals (I, II, III, IV, ...),

      Cascading Style Sheets (CSS)

This book is not intended to prepare you to be a professional Web site designer. Instead, it focuses on the basics of HTML that will enable you to design and create simple Web pages that can be made dynamic and interactive through programming. If you were interested in developing a professional looking Web site, you probably would not rely on creating HTML documents from scratch using a text editor. There are a number of tools and development environments that make designing and creating Web pages simpler. Many provide templates for Web pages that you can download and modify with your own content. If you were developing a Web site with multiple pages, you would also be concerned about a consistent look and feel to the pages. Having pages on a site that don't share the same color scheme, font family, or heading alignment not only looks disjointed but can also hinder the user's experience.

Fortunately, HTML provides a straight-forward mechanism for applying consistent style across multiple files: cascading style sheets. A cascading style sheet (CSS) is a text file that lists page elements and their desired style properties. For example, the following text specifies that the body of the page will have white text on an olive background, and every h1 element will be centered.

    body { background-color:olive; color:white } 

    h1   { text-align:center } 

If this text were saved in a file named mystyle.css, it could then be linked into any HTML document by placing the following tag in the head of the page:

    <link rel="stylesheet" href="mystyle.css"> 

As a result, every page that linked to this cascading style sheet would set the style properties consistently. That is, all pages linking to mystyle.css would have an olive background, white text, and centered h1 elements. If you ever changed your mind about the appearance of your pages, say you decided you liked a seagreen background better than an olive one, you would simply need to update the style attribute in mystyle.css. Each page that linked to this file would thus be updated automatically and in a consistent manner.

EXAMPLE 3.10 below shows two text boxes. The top one represents the CSS file mystyle.css, which contains style properties for three page elements, body, h1 and p. Since the HTML document in the lower box links to this CSS file, the style definitions will be applied to the page by the browser. Not only does this make it much easier to change styling consistently, but it also makes the body of the page much cleaner as style attributes are no longer needed in the elements themselves.

    Styling Classes of Elements

The CSS properties defined in EXAMPLE 3.6 are universal, in the sense that they apply to all elements of a given type. For example, every h1 heading in a page that is linked to this CSS file will be centered. While that contributes to a consistent style across pages, there are times when you want to be more selective. For example, you might want only the first h1 element in a page to be centered.

You can specify selective styling in a CSS file by defining a distinct class of an element. The class is identified by placing a period followed by the class identifier after the element name. For example, the CSS entry below defines a class of h1 elements named center and sets the text-align property for that class.

    h1.center   { text-align:center } 

Within the body of a page, an element identifies itself as belonging to a class using the class attribute. For example, the first h1 heading below will be centered since it belongs to the h1.center class, but the second h1 will still use the default alignment.

    <h1 class="center">Centered Heading</h1>

    <h1>Left-justified (Default) Heading</h1>

      Putting It All Together

This chapter introduced various techniques for styling a Web page. By inserting a style attribute in HTML elements, those elements could have properties such as alignment, color and size adjusted to produce a more attractive appearance. For example, the page honoring Sir Tim Berners-Lee (which appeared at the end of chapter X2) could be styled as follows:

The HTML document in EXAMPLE 3.11 produces this page.

There are several details to note about this document.

• The text in the page appears in white on a light steel blue background. This is accomplished by adding the attribute style="color:white;background-color:lightsteelblue" to the opening body tag.
• The top-level heading and image are both centered horizontally in the page. This is accomplished by inserting the h1 and img element into a page division (div) that has attribute style="text-align:center".
• The first line in each of the biographical paragraphs is indented 10 pixels. This is accomplished by adding the attribute style="text-indent:10px" in each of the opening p tags.
• The items in the table have solid borders around them. This is accomplished by adding the attribute style="border-style:solid" in each of the opening td tags.
• Finally, the source accreditation at the body of the page appears in a Courier New font face that is smaller than other text in the page. This is accomplished by adding the attribute style="font-family:Courier New;font-size:80%"" to the opening p tag.

      Chapter Summary

• An attribute is a qualifier that can be assigned to an HTML element to alter the properties of that element.
• A style attribute can be added to an element to customize the appearance of that element. The general form of a style attribute assignment is: style="PROPERTY:VALUE"
• Setting the color property in a style attribute will change the color of text in that element. Likewise, setting the background-color property changes the background color of that element.
• An element can have only one style attribute, but multiple properties can be set within that element, separated by semi-colons.
• Adding a style attribute to the <body> tag will set the specified properties of all elements contained within the body.
• Setting the text-align property in the style attribute of a text-based element (e.g., a heading, paragraph, span or div) will change the alignment of that element.
• Setting the text-indent property in the style attribute of a text-based element will indent the first line by a specified amount. Likewise, the margin, margin-left and margin-right properties change the margins.
• Setting the font-family property in the style attribute of a text-based element will change the typeface of text in that element. Likewise, the font-size property changes the font size.
• A span element is a small grouping of text, typically a word or phrase. A div element is a large grouping of elements, such as multiple paragraphs that are to be styled as a unit.
• Other style properties can be used to center images, lists and tables, add borders to tables, and alter the bullets and numbers in lists.
• A cascading style sheet (CSS) is a text file that lists page elements and their desired properties. HTML documents can link to a cascading style sheet using a link element and so yield consistent styling across the pages.

      Projects