Web Page Formatting with CSS
Style Sheets Simplify Web Page Development.
Cascading Style Sheets (CSS) allow web site developers to re-use formatting code and separate it from the content, speeding up development and maintenance of web sites.
As browsers and Hyper Text Markup Language (HTML), evolved web page code became littered with HTML formatting information, defining the appearance of individual page elements such as text, graphics and links.
Each element had to have their appearance specified individually and as the display capabilities grew pages became over run with detailed HTML formatting code. While the code is hidden from the reader, they suffer because web page designers were spending increasing amounts of time writing or editing a myriad of individual appearance code snippets, rather than providing new content or updating appearance.
This is where CSS comes in. Inspired by style sheets in word processing programs, CSS allows the declaration of page attributes in detail in one place, and then this declaration is referred to from anywhere on the page. This becomes even more powerful with the use of external style sheets, as a multi page site can share the one declaration. This gives a consistency of use and appearance over the whole site, and revisions are easy as a change in one declaration alters all the appearances of that definition on the site.
The repeated use of standard declarations is not a limiting factor that results in a boring sameness throughout a site. While there is consistency among page elements that perform similar functions, the power of CSS allows easy development and use of variations of the appearance of standard HTML elements.
The common HTML paragraph tag, <p> defines the characteristics of a small paragraph or block of text and applies the standard attributes declared in the <body> statement.
To create sections of custom text within the document the basic HTML technique is to enclose the target text within a <font> statement that also contains the new attributes, for example:
<FONT face = Arial size="3" color = "black"> This text is different </FONT>.
The <font>...</font> tags limit the scope of the alternate style to the text enclosed within the HTML tags. This may be fine for a one off change of appearance for some of the text; however, to repeat the text style at other points throughout a multi-page site requires the entire font statement used at each location. The awkward bit comes when for example, the changing the color from black to blue, and every appearance of that text style requires individual editing
This is where CSS comes to the rescue. It is possible to declare an additional class of <p> tag in the style sheet that defines the alternate text characteristics. This is given a class name that identifies it, such as “alternate” and this is then used throughout all the sites pages as shown below
<p class = “alternate”>
This indicates a paragraph where the alternate text appearance is required, and the class name can be used to suggest the purpose of the change in appearance. The really good bit is that for a color change from black to blue, only the declaration in the style sheet is changed and this alters all the places where the alternate text is used.
There is far wider range of attributes than shown in this example. This offers web page developers a great deal of control over the page’s appearance, without creating a jungle of repeated formatting instructions.
For more detail on using style sheets try this article.
