Anatomy of CSS

 

A CSS rule consists of two parts:    

• Selector - the part before the left curly brace    
• Declaration - the part within the curly braces. It contains Property and values.

 Selector { Property : Value}

 

Eg.   H1 { color: green}

 

An HTML document can have more than one style sheet

associated with it—for example, one internal and one external.

 

To associate a rule with all HTML elements of a specific name, simply use the

tag name. For example, the following rule would apply to all <p>elements in a doc-

ument:

p     { rule details }

To associate a rule with all elements that have a specific classattribute, place a

period before the attribute value:

.value     { rule details }

 

For example, the rule

.emphasize   { rule details }

would apply only to elements where the class="emphasize" attribute is present,

such as either of these:

<p class="emphasize">This text will have the rule

applied.</p>

<td class="emphasize">This table cell will have the rule

applied.</td>

 

 You can combine these two techniques to create a selector that will apply only

to HTML elements with a certain name and a certain value for the class attribute.

Here's how:

ElementName.ClassValue   { rule details }

Here's an example:

p.emphasize   { rule details }

This would apply to the following element:

<p class="emphasize">This text will have the ruleapplied.</p>

It would not apply to either of these elements:

<p>This text will not have the rule applied.</p>

<td class="emphasize">This table cell will not have the rule

applied.</td>

What happens if two style sheet rules conflict? For example, this rule assigns

14-point font to all <p>elements:

p   {font-size: 14pt; }

Here's a rule that assigns 20-point font to all elements where the class attribute

is equal to large:

 

.large   {font-size: 20pt; }

What happens, then, to an HTML element such as this one?

<p class="large">This is the text.</p>

The answer lies in the order of the rules and inheritance—a rule later in the

style sheet takes precedence over rules that come before it. You can override this by

including the !important clause to the rule. Here's an example:

.large   {font-size: 20pt !important;}

 

This ensures that the rule takes precedence over any competing rules even if

they come after in the style sheet. This is not a recommended practice; it's much bet-

ter to lay out the rules in the correct order the first time.

You can assign a single style rule to multiple selectors by separating the selec-

tors with commas. For example, the following selector would assign the rule to <p>

elements that had either emphasizeor strongas the value of the classattribute:

p.emphasize, p.strong   { rule details }

The final selector is for the id attribute of HTML tags. You do this with the #

symbol. For example, the selector

#mainTable   { rule details }

would be applied to the content of any HTML tag that has its id attribute set to

"mainTable", as in this example:

<table width="100%" id="mainTable">

...

</table>

The idattribute differs from the class attribute in that idmust be unique in the

document. In other words, there can be only one tag with a given idvalue. In prac-

tice, browsers do not enforce this rule, but having multiple tags with the same id

value in one page is invalid HTML and not a good idea.

 

Defining CSS Styles

 

CSS formatting uses a simple box-oriented formatting model. Every formatted

element—text or image—will result in one or more rectangular boxes. Each box

has a central content area that is surrounded by optional padding, border, and mar-

gin areas. These boxes are usually not visible, but you need to understand their uses

and relationships in order to work effectively with style sheets. The various boxes are related as follows:

• The innermost box, the content area, is where the data is displayed. This can

be text or an image. For text, the display is controlled by font and text proper-

ties in the style rule. For an image, the size is controlled by the height and

width properties in the style rule. The height and width properties can be used

with text elements also.

• The padding area provides a space between the content and its border. The size

of this area is controlled by the padding properties in the style rule. The back-

ground of the padding area is the same as the background of the content area,

as controlled by the background property.

• The border is an optional box drawn around the element. Its appearance is

controlled by the border properties.

• The margin provides space around the element, outside the border. In effect,

the margin provides the spacing between the element and other elements that

are being displayed. The margin size is controlled by the margin properties.

The margin is always transparent.