Introduction to CSS
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The previous article in this series concluded our introduction to HTML with a number of coding and design guidelines to help improve the maintainability and reusability of HTML code. This article kicks off our exploration of Cascading Style Sheets (CSS), offering a brief discussion of the design goals and assumptions of CSS, along with the role of the W3C in formalizing a set of standards for CSS. Then we will explore the elements of CSS, illustrating how CSS works and how it fits into the overall Web application structure. Finally, we will conclude with a number of guidelines for good CSS coding style
About CSS
CSS is a technology that provides document authors with a language for applying style characteristics, such as text colors and size, font family, spacing, and positioning, to the elements of a Web document. Using CSS, style properties and property values are associated with HTML elements to instruct the browser how to display them. For example, Figure 1 illustrates a Web page as displayed in Internet Explorer. This simple page consists of eight textual elements, defined using the HTML <p> tag. A quick examination of the code (see Listing 1) shows that it contains no special formatting attributes, yet the browser displays the text elements using various fonts, colors, and positions.
){kind=link}
Figure 1 The CSS-styles HTML as displayed in Internet Explorer.
Listing 1: HTML Source Code
<!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Stylesheet Example</title> <link rel="stylesheet" href="ch6styles1.css"> </head> <body> <p id="p1">CSS</p> <p id="p2">Fonts</p> <p id="p3">Styles</p> <p id="p4">Spacing</p> <p id="p5">The W3C</p> <p id="p6">Properties</p> <p id="p7">Positioning</p> <p id="p8">Content</p> </body> </html>
The style characteristics applied to the text elements in the document have been defined in an external style sheet, linked to the HTML document in the document's <head> section and bound by the Web browser to the individual elements. The browser then displays each element using the rules specified in the style that is bound to that element. Shown in Listing 2, the style sheet specifies characteristics of font, color, and position for each of the HTML elements. In this case, these styles are associated with—or bound to—the HTML elements via the elements' ID properties.
Listing 2: A Cascading Style Sheet
<style>
#p1 {
font-family : Impact;
font-size : 120px;
color : DarkRed;
position : absolute;
top : 20%;
right : 10px;
text-align : right;
}
#p2 {
font-family : Verdana;
font-size : 80px;
font-style : italic;
color : #008080;
position : relative;
left : 10%;
top : 10%;
text-align : left;
}
#p3 {
color : ForestGreen;
font-family : Verdana;
font-size : 40px;
position : Absolute;
top : 40%;
left : 45%;
z-index : 1;
}
#p4 {
font-family : Courier New;
font-weight : Bold;
font-size : 40px;
color : Orange;
position : Absolute;
right : 50%;
top : 55%;
text-align : right;
z-index : 2;
}
#p5 {
font-family : Verdana;
font-weight : bold;
font-size : 100px;
color : #DDDDDD;
position : absolute;
left : 40px;
top : 40%;
text-align : left;
z-index : 0;
}
#p6 {
font-family : Verdana;
font-weight : bold;
font-size : 25px;
color : MediumBlue;
position : absolute;
top : 290px;
left : 25px;
text-align : left;
}
#p7 {
font-family : Times New Roman;
font-size : 40px;
font-weight : bold;
font-style : italic;
color : #000000;
position : absolute;
top : 280px;
right : 40px;
text-align : right;
}
#p8 {
font-family : Verdana;
font-size : 20px;
font-style : italic;
color : indigo;
position : relative;
left : 425px;
top : -10px;
}
</style>