Online Book Reader

Home Category

AJAX In Action [26]

By Root 4008 0
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, Licensed to jonathan zheng

Defining look and feel using CSS

37

both the selector and the style declaration can be considerably more complex. Let’s look at the variations in each, starting with the selector.

2.3.1 CSS selectors

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 additional 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 harmonious design!

We can combine classes with element-based rules, to define a class that operates only on particular tag types. For example: Licensed to jonathan zheng

38

CHAPTER 2

First steps with Ajax

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 typically used to select a single element on a page. To draw attention to a close button 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 useful 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

®Online Book Reader