HTML and CSS Reference
In-Depth Information
chapter
14
Introduction to CSS
(Cascading Style
Sheets) with JavaScript
14.1 What Is CSS?
Cascading Style Sheets (CSS) was a standard introduced by the World Wide Web Con-
sortium (W3C) in 1995 to help designers get more control over their Web pages by
enhancing what HTML can do—it is used to stylize the content of a Web page. Whereas
HTML is concerned with the structure and organization of a document, CSS is con-
cerned with its layout and presentation, or formatting the document. In the old days,
HTML tags were used to set up the structure and style of a page. If you wanted to create
an H1 tag with an Arial blue font, point size 22, you would have to set the same attri-
butes for each H1 tag in the entire document, To apply these changes to an entire Web
site could be a daunting task. With CSS you can set the style once for all H1 tags and put
that style definition in its own .css file. When the page is loaded the CSS style will be
applied to all H1 tags in the page in one sweeping change.
Because the initial style of the content of a page is done with CSS, we'll start there.
The goal is to use CSS with the DOM and JavaScript (Chapter 15) together to dynami-
cally change the style of the page, often called Dynamic HTML (DHTML). For a com-
plete discussion of CSS (both CSS1 and CSS2), see http://www.w3org/Style/CSS. If you
are a designer and already have a good CSS foundation, you can skip this chapter and
go directly to Chapter 15, “The W3C DOM and JavaScript.”
14.2 What Is a Style Sheet?
Webster's Dictionary defines “style” as a manner of doing something very grandly; ele-
gant, fashionable. Style sheets make HTML pages elegant by allowing the designer to
create definitions to describe the layout and appearance of the page. This is done by cre-
ating a set of rules that define how an HTML element will look in the document. For
example, if you want all H1 elements to produce text with a green color, set in an Arial
14-point font centered on the page, normally you would have to assign these attributes
527
 
 
 
 
Search WWH ::




Custom Search