Styles control the look of a Web page. They can be implemented in three different ways:
style attribute applies only to a single element.
STYLE element applies to the entire Web page.
CSS File applies to all Web pages linked to the CSS file.
style Attribute
The style attribute has been discussed in Chapter 5. This section will show you an example that is particularly useful in formatting poetry. As demonstrated in Chapter 4, the <pre> tag is the simplest way to format poetry, but it has a caveat: long lines do not wrap. Thanks to the latest CSS3, this problem can easily be solved by adding a style property, white-space: pre-wrap.
It was many and many a year ago, in a kingdom by the sea,
That a maiden there lived whom you may know
By the name of Annabel Lee;
And this maiden she lived with no other thought
Than to love and be loved by me.
Click on "View" to see the result. Then remove the style attribute for the <pre> tag, style="white-space: pre-wrap", to see the difference.
STYLE Element
Both STYLE element and CSS file use the same syntax:
selector { property:value }
The selector specifies the tag and/or attribute (either class or id) that you wish to define its style. For instance, to define the style for all P elements, the selector is p (the tag without angle brackets). To define the style for the P element with class="classValue", the selector is p.classValue. For the id attribute, the "." (dot) should be replaced by "#", such as #idValue. If the tag is omitted (such as .classValue), the style will apply to all elements with the same class value.
There are many style properties: fonts, colors, background, margin, etc. If you need to define more than one property for a selector, separate them with a semicolon like { property1:value1; property2:value2 }.
By using the STYLE Element, the above example can be written as
It was many and many a year ago, in a kingdom by the sea,
That a maiden there lived whom you may know
By the name of Annabel Lee;
And this maiden she lived with no other thought
Than to love and be loved by me.
CSS File
If consistent look across multiple Web pages is required, you can link them to a single CSS file (with .css extension), rather than including the STYLE Element in each Web page.
where the value of the href attribute specifies the address of the CSS file. In this example, it is "style.css", which should have the same content as the STYLE Element. Insert this line into the HEAD element as you would for the STYLE Element. Then every page with the link should have the same formatting as given in style.css.
Centering a Block of Text
A poem looks better if placed at the page's center than on the left. This cannot be achieved by the style property: text-align: center, which would center each line. What we want is to center the whole poem as a block, preserving the relative indent for each line. This can be done with the following code, albeit not the best.
It was many and many a year ago,
In a kingdom by the sea,
That a maiden there lived whom you may know
By the name of Annabel Lee;
And this maiden she lived with no other thought
Than to love and be loved by me.
By using the DIV element, it is possible to center a block of text, but only if you specify the width of the DIV element. Try to remove the property, "width: 400px", you'll find that the poem is no longer centered. Notice that the margin-top property is irrelevant to block centering. It is included in all of your Web page to avoid the overlap between the button X and your text.
How do you determine the best width? It should depend on the line lengths of the poem. Then, you'll have to look through the entire poem. If you are developing an app for future users, you do not even know what their poems will look like. Hence, DIV is not an ideal solution. The next chapter will show you a better one: using TABLE.
