FREE CSS TUTORIAL / PDF

 

 

Sample of the pdf document :  

 

Cascading Style Sheets - Part I

 

CSS Elements:

The style specification is applied to elements. There are various ways of categorizing elements:

Replaced Elements

The contents of these elements are replaced by something else when it is rendered by the browser - like img or radiobuttons in a form.

Nonreplaced Elements

The contents of these elements are rendered by the browser like p.

Block-level Elements

Block-level elements generate an element box that fills its parent element's content area and cannot have other elements at its sides. It generates breaks before and after the element box like p and div.

Inline-level Elements

Inline-elements generate a box within a line of text. They do not generate a break and can appear within the content of another element like span.

 

Structure of Style Sheet:

A style sheet is made up of comments and rules. Comments can be included using: /* ... */. Rules on the other hand have the following structure:

Selector {property1: value1; ... propertyn: valuen;}

A selector could be elements that we have already seen or we could define a separate class that we can apply to several elements. We could even have multiple selectors for a rule. Like:

Selector1, Selector2, .. {prop1: val1; ... propn: valn;}

One way of defining common style rules is to group them into a class and identify which elements they apply to. For example, if I wanted to make the header or the paragraph red if it were important but not otherwise I would do:

h1.important, p.important {color: red;}

To use this style for a particular header, the markup would look like:

<h1 class = "important"> ... </h1>

To apply the same class to all elements the asterisk symbol is used as a wildcard in the rule definition.

*.important {color: red;}

There are also id selectors. An id selector is a unique identifier and must occur only once in the xhtml document, whereas the class style maybe used several times.

In the XHTML document:

<h1 id = "veryImportant"> ... </h1>

In the Style Sheet:

#veryImportant {background: black; color: red;}

Document Structure

There is a structure to each xhtml document. Each xhtml element can be represented by the nodes in a tree. Every element is either a child or a parent element or both. We say there is parent-child relation if the difference in the levels is one. However, if the difference in the levels is one or more the relationship is called ancestor-descendant.

Cascading style sheets allows the user to define descendant selectors and even combine them:

h1 em, p strong {color: purple;}

Notice the absence of commas between ancestors and descendants. To select children use the following syntax:

h1 > strong {color: red;}

Adjacent siblings can also be selected. The following rule states: select a paragraph that immediately follows a header and remove the top margin.

h1 + p {margin-top: 0;}

 

Why Cascading?

Why the term cascading style sheets? One can include (import) several style sheets within an xhtml document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion.......

  Click here for  Download PDF / FREE