Introduction
Three important HTML elements emerge in context of a CSS based web page design: the divider (div), the span, and the hyperlink (a). Indeed, most of the page formatting can be done using the mentioned elements and appropriate CSS properties. This note shows how it actually works.
div and span Elements
On its own, the elements <div<. . .</div> and <span>. . .</span> are rather useless, because they have no effect on a plain HTML formatted text. The two differ only in the feature called the display style. The display style rule admits values: block, inline, list-item, and none. By default, the divider has a block display and the span has an inline display. Using the list-item display we can design an unordered list and the none value lets the element with this feature disappear from the document. This is useful in context of dynamic HTML programming. The luck of any features is the main advantage of div and span, because we can freely apply to them any class of styles we choose and use them to format our document. The following code provides some elementary style rules for formatting of a simple web article and how to use them. The properties and their values are self-explanatory.
<html>
<head>
<style>
.page{
margin:20px auto auto auto;
width:500px;
font-family:verdana, serif, arial;
color:DarkSlateGray;
background-color:White;
}
.title{
margin:40px 40px 30px 30px;
font-size:18px;
font-weight:bold;
}
.author{
margin:40px 40px 30px 60px;
font-size:12px;
font-style:italic;
}
.par{
margin:10px 40px 10px 30px;
font-size:12px;
line-height:24px;
text-align:justify;
}
</style>
</head>
<body>
<div class="page">
<div class="title">Tile of the article</div>
<div class="author">Author: Your name</div>
<div class="par">
Your text here
</div>
</div>
</body>
</html>
Pseudo-Elements
By now you could notice, that every HTML tag has its counterpart in the CSS language. We write h1, p, ul etc. to modify the appearance of the corresponding HTML tag. Some of these counterparts come wired with further features, called pseudo-elements. For example, the paragraph has pseudo-elements first-line and first-letter, that can be used to modify appearance of the first-line and first-letter in a paragraph. Pseudo-elements are attached to the tag or selector by a column, meaning, the selecting construct has form tag.selector:pseudo-element{property:value, . . .}. To magnify the first letter of a paragraph, pull it under the top of the first line and paint the first line blue we write
p:first-letter{font-size:200%; color:green; float:left;}
p:first-line{color:green;}
If we would like using these rules only in a particular paragraph we can use a class level selector and write
p.story:first-letter{font-size:200%; color:green; float:left;}
p.story:first-line{color:green;}
The most serious pseudo-element equipped tag is the anchor, or hyperlink. A full modification of the anchor defaults requires new rules in each of the following classes. Interestingly, the order of the classes must be maintained for all the changes to take place.
a:link {...} /* unvisited link */
a:visited {...} /* visited link */
a:hover {...} /* mouse over link */
a:active {...} /* selected link */
References
W3Schools Online Web Tutorials. W3Schools , 2006
C. D. Knukles and D. S. Yuen: Web Applications, Concepts & Real World Designs. Wiley, 2005
Cascading style sheets, level 1 recommendations by WWW Consortium. World Wide Web Consortium , 1996
Cascading style sheets, level 2 recommendations by WWW Consortium. World Wide Web Consortium , 1998
Syntax of CSS rules in HTML's style attribute. World Wide Web Consortium , 2002
W3C CSS Validation Service. World Wide Web Consortium , 2004