Web Browser

Monday, July 16, 2007

CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) are a well-established part of web design, and they find
frequent use in classic web applications as well as in Ajax. A stylesheet offers a
centralized way of defining categories of visual styles, which can then be applied
to individual elements on a page very concisely. In addition to the obvious styling
elements such as color, borders, background images, transparency, and size,
stylesheets can define the way that elements are laid out relative to one another
and simple user interactivity, allowing quite powerful visual effects to be achieved
through stylesheets alone.
In a classic web application, stylesheets provide a useful way of defining a style
in a single place that can be reused across many web pages. With Ajax, we don’t
think in terms of a rapid succession of pages anymore, but stylesheets still provide
a helpful repository of predefined looks that can be applied to elements dynami-
cally with a minimum of code. We’ll work through a few basic CSS examples in this
section, but first, let’s look at how CSS rules are defined.
CSS styles a document by defining rules, usually in a separate file that is
referred to by the web page being styled. Style rules can also be defined inside a
web page, but this is generally considered bad practice.
A style rule consists of two parts: the selector and the style declaration. The selec-
tor specifies which elements are going to be styled, and the style declaration
declares which style properties are going to be applied. Let’s say that we want to
make all our level-1 headings in a document (that is, the

tags) appear red.
We can declare a CSS rule to do this:
h1 { color: red }
The selector here is very simple, applying to all

tags in the document. The
style declaration is also very simple, modifying a single style property. In practice, both the selector and the style declaration can be considerably more complex.
Let’s look at the variations in each, starting with the selector.
In addition to defining a type of HTML tag to apply a style to, we can limit the
rule to those within a specific context. There are several ways of specifying the
context: by HTML tag type, by a declared class type, or by an element’s unique ID.
Let’s look at tag-type selectors first. For example, to apply the above rule
only to

tags that are contained within a
tag, we would modify our
rule like this:
div h1 { color: red; }
These are also referred to as element-based selectors, because they decide
whether or not a DOM element is styled based on its element type. We can also
define classes for styling that have nothing to do with the HTML tag type. For
example, if we define a style class called callout, which is to appear in a colored
box, we could write
.callout { border: solid blue 1px; background-color: cyan }
To assign a style class to an element, we simply declare a class attribute in the
HTML tag, such as
I'll appear as a normal bit of text

And I'll appear as a callout!

Elements can be assigned more than one class. Suppose that we define an addi-
tional style class loud as
.loud { color: orange }
and apply both the styles in a document like so:
I'll be bright orange

I'll appear as a callout


And I'll appear as an unappealing mixture of both!

The third
element will appear with orange text in a cyan box with a blue
border. It is also possible to combine CSS styles to create a pleasing and harmoni-
ous design!
We can combine classes with element-based rules, to define a class that oper-
ates only on particular tag types. For example:
span.highlight { background-color: yellow }
will be applied only to tags with a declared class attribute of highlight.
Other tags, or other types of tag with class='highlight', will be unaffected.
We can also use these in conjunction with the parent-child selectors to create
very specific rules:
div.prose span.highlight { background-color: yellow }
This rule will be applied only to tags of class highlight that are nested
within
tags of class prose.
We can specify rules that apply only to an element with a given unique ID, as
specified by the id attribute in the HTML. No more than one element in an
HTML document should have a given ID assigned to it, so these selectors are typ-
ically used to select a single element on a page. To draw attention to a close but-
ton on a page, for example, we might define a style:
#close { color: red }
CSS also allows us to define styles based on pseudo-selectors. A web browser
defines a limited number of pseudo-selectors. We’ll present a few of the more use-
ful ones here. For example:
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
will draw the first letter of any element in a large bold red font. We can tighten up
this rule a little, like this:
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
The red border effect will now apply only to

elements with a declared class of
illuminated. Other useful pseudo-selectors include first-line, and hover, which
modifies the appearance of hyperlinks when the mouse pointer passes over them.
For example, to make a link appear in yellow when under the mouse pointer, we
could write the following rule:
a:hover{ color:yellow; }
That covers the bases for CSS selectors. We’ve already introduced several style
declarations informally in these examples. Let’s have a closer look at them now.
Every element in an HTML page can be styled in a number of ways. The most
generic elements, such as the

tag, can have dozens of stylings applied to
them. Let’s look briefly at a few of these.
The text of an element can be styled in terms of the color, the font size, the
heaviness of the font, and the typeface to use. Multiple options can be specified
for fonts, to allow graceful degradation in situations where a desired font is not
installed on a client machine. To style a paragraph in gray, terminal-style text, we
could define a styling:
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
Or, more concisely, we could amalgamate the font elements:
.robotic{
font: bold 14pt courier new, courier, monospace;
color: gray;
}
In either case, the multiple styling properties are written in a key-value pair nota-
tion, separated by semicolons.
CSS can define the layout and size (often referred to as the box-model) of an ele-
ment, by specifying margins and padding elements, either for all four sides or for
each side individually:
.padded{ padding: 4px; }
.eccentricPadded {
padding-bottom: 8px;
padding-top: 2px;
padding-left: 2px;
padding-right: 16px;
margin: 1px;
}
The dimensions of an element can be specified by the width and height proper-
ties. The position of an element can be specified as either absolute or relative.
Absolutely positioned elements can be positioned on the page by setting the top
and left properties, whereas relatively positioned elements will flow with the rest
of the page.
Background colors can be set to elements using the background-color prop-
erty. In addition, a background image can be set, using the background-image
property:
.titlebar{ background-image: url(images/topbar.png); }
Elements can be hidden from view by setting either visibility:hidden or
display:none. In the former case, the item will still occupy space on the page, if
relatively positioned, whereas in the latter case, it won’t.
This covers the basic styling properties required to construct user interfaces
for Ajax applications using CSS. In the following section, we’ll look at an example
of putting CSS into practice.

Post a Comment