Stands for Cascading Style Sheets. Language destined to the presentation of documents, Css is an essential ressource of the web ecosystem. Embodying the doctrine of separation of content and presentation of a document, Css allows you to factorize style informations, and by the same way to reduce considerably the weight of a web page.
What is Css ?
The Css selectors
The selectors are one of the great strengths of the Css language. By combining these, it is possible to assign a style to any element.
Pattern
Signification
*
All element
E
All element E
E F
All element F which is descendant of the element E
E > F
All element F which is child of the element E (descendant at first degree of the element E)
E:first-child
All element E which is the first child of its parent element
E:link
All element E which is an anchor and hasn't been visited yet
E:visited
All element E which is an anchor and has already been visited
E:active
All element E which receive an activation (ex : click on a button)
E:hover
All element E which is hovered
E:focus
All element E which receive a focus (ex : focus on a text input)
E:lang(c)
All element E which uses the lang c
E + F
All element F which is immediately preceded by E (E and F are on the same level)
E[attr]
All element E which possess the attribute « attr »
E[attr = 'val']
All element E where the attribute « attr » is equal to « val »
E[attr ^= 'val']
All element E where the attribute « attr » starts with « val »
E[attr $= 'val']
All element E where the attribute « attr » ends with « val »
E[attr *= 'val']
All element E where the attribute « attr » contains « val »
E[attr ~= 'val']
All element E where the attribute « attr » is a space separated words list, and one of this words is equal to « val »
E[attr |= 'val']
All element E where the attribute « attr » is a dash separated words list, and one of this words is equal to « val »
E.val
All element E where the attribute « class » is equal to « val ». Identical to E[class = 'val']
E#val
All element E where the attribute « id » is equal to « val ». Identical to E[id = 'val']
The next few examples were realized to be used with a XHTML document, which remains to this day the main application of style sheets.
The centering of an element
Historically developped with the paper industry, information relays center nowadays the presentation of their digital data, in order to give to the reader the illusion to be in front of a paper sheet. This effect, which can be seen on this site, can be realized with few lines of code. According that the element <body> is containing the element <div id='container'>, the element <div id='container'> is centered on the browser.
body {
text-align:center; /* Center the content */
}
div#container {
width:748px; /* Set width for auto margin */
margin:0 auto; /* Set margin to be automatically calculated */
}
The regular expressions
The regular expression are available in Css. It is possible, by the way of three operators (^=, ~= and *=), to select attributes which matche with the wished predicate.
The style above can, for exemple, used to order visually hypertext links
/* For each link beginning with 'http://www.denistruffaut.com' */
a[href ^= 'http://www.denistruffaut.com'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/denis.png') 0px 0px no-repeat;
}
/* For each link ending with '.pdf' */
a[href $= '.pdf'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/adobe_pdf.png') 0px 0px no-repeat;
}
/* For each link containing 'php' */
a[href *= 'php'] {
padding:0px 0px 0px 20px;
background:url('http://www.denistruffaut.com/images/default/mimetypes/php.png') 0px 0px no-repeat;
}
The sprites
One of the most recurring difficulty during the creation of style sheets is the explosion of the number of used images. Due to maintenance convenience, images are often fragmented. Nevertheless, on an efficient point of view, it is a severe mistake. Indeed, each image downloaded by the browser lead the execution of an Http request, which is generally too important in term of temporal cost, compared to the image weight.
One solution to this matter is the use of sprites. Well know in the gaming universe, sprites are actually a collection of images which are close in terms of dimension and colors. This technic allows you to greatly divide the download time of an image, and improves significantly the user experience. Once the image created, you just have to play with horizontal and vertical offsets in order to obtain the wished part.
img#french_flag {
width:30px;
height:15px;
display:block;
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') 0px 0px no-repeat; /* Top left */
}
img#french_flag:hover {
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') 0px -15px no-repeat; /* Top right */
}
img#english_flag {
width:30px;
height:15px;
display:block;
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') -30px 0px no-repeat; /* Bottom left */
}
img#english_flag:hover {
background:url('http://www.denistruffaut.com/images/default/langs/langs.png') -30px -15px no-repeat; /* Bottom right */
}