Feuilles de Styles en Cascade

CSS

A CSS rule-set consists of a selector and a declaration block.

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be center-aligned, with a red text color:


<code>

p {
color: red;
text-align: center;
}
</code>

===== CSS selectors =====

==== The element Selector ====

The element selector selects elements based on the element name.
<code>
p {
color: red;
text-align: center;
}
</code>

==== The id Selector ====

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":

<code>
#para1 {
text-align: center;
color: red;
}</code>

==== The class Selector ====

The class selector selects elements with a specific class attribute. Note: A class name cannot start with a number!

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

<code>
.center {
text-align: center;
color: red;
}
</code>

You can also specify that only specific HTML elements should be affected by a class.


In the example below, only <p> elements with class="center" will be center-aligned:

<code>

p.center {
text-align: center;
color: red;
}
</code>

HTML elements can also refer to more than one class.


In the example below, the <p> element will be styled according to class="center" and to class="large":

Example

<p class="center large">This paragraph refers to two classes.</p>

=== Grouping Selectors ===

If you have elements with the same style definitions, like this:

<code>
h1, h2, p {
text-align: center;
color: red;
}
</code>

=== CSS Combinators ===
A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

• * descendant selector (space)
• * child selector (>)
• * adjacent sibling selector (+)
• * general sibling selector (~)

=== CSS Comments ===

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

==== Background ====

* background-repeat: repeat-x;
* background-repeat: repeat-y;
* background-repeat: no-repeat;
* background-position: right top;
* background-attachment: fixed;

=== Background - Shorthand property ===

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

<code>

body {

background: #ffffff url("img_tree.png") no-repeat right top;

}

</code>

When using the shorthand property the order of the property values is:

- background-color
- background-image
- background-repeat
- background-attachment
- background-position

==== Border ====

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

<code>

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

</code>