Internet Systems
44
Chapter 6. Dynamic HTML: Cascading Style Sheets
(CSS)
CSS let you separate structure from content.
Inline Styles
The style attribute specifies a style for an element.
Each CSS property is followed by a ‘:’ then the value of the
attribute.
Multiple property specifications are separated by ‘;’s.
<p style = “font-size: 16 pt; font-family: Arial”>
XXX
</p>
<p style = “font-size: 10 pt; font-family: Courier”>
YYY
</p>
XXX
YYY
Internet Systems
45
Creating Style Sheets: The STYLE Element
Styles placed in a style sheet (appearing in the header section)
apply to the entire document.
The body of a style sheet declares the CSS rules for the style sheet.
A rule begins with a specification of the element(s) or class to
which it applies.
A style class declaration (preceded by a ‘.’) is applied only to
elements of that class.
Each rule body is enclosed in {…} and has the format
property : value ; … ; property : value
<style type = “text/css”>
em { text-decoration: none;
font-family: Courier }
h1 { font-family: Arial, sans-serif }
p
{ font-size: 18pt }
.under { text-decoration: underline }
</style>
Some MIME types (for specifying the format of content):
text/css (regular text)
text/html
image/gif
text/javascript
Internet Systems
46
Several properties:
color: the color of text in that element
background-color
font-family: the font for the display
Here the second value (sans-serif) is a generic font family:
If the Arial font isn’t found, something in this family is used.
font-size: the size to render the font
Besides npt, you can use relative values:
xx-small, x-small, smaller, small, medium, large,
larger, x-large, xx-large
Internet Systems
47
Applying a Style Class
We can apply a style class in an element using the CLASS
attribute.
The text in the element then has the properties of both the
element and the style class.
<h1 class = “under”> XXX </h1>
St