|
 To carry out a good template, it is not enough to make a beautiful design, it is also necessary to know how you can properly adapt its model in HTML and especially with CSS styles. We will make an overflight of various tags declarations and possiblities offered by the CSS.
Universal classes
As their names indicate it, they are the most used. The definition of such a class is done quite simply by preceding the name of the class by a point. It is possible that you specify it for no tag, in which case the class could be used in any tags.
.name-of-class { style property: value; style property: value;… }
Class defined with a tag of this fact will apply only to the elements div.
div.name-of-class { style property: value; style property: value;… }
Example with the class “validate” :
.validate { font-type: verdana; color: green; font-weight: bold; }
The call of this class can be made starting from any element HTML :
<h1 class="validate">Recording carried out successfully !</h1>
<span class="validate">Data updated </span>
Contextual selectors
The definition of the contextual selectors functions has the same principle as the universal classes. But they apply only to preset HTML elements, it is thus not possible to create its own classes.
selector { style property: value; style property: value;… }
Selectors of ID
The ID selector makes it possible to refer to a single element of a page located by its identifier. The ID are in particular used to locate HTML elements thanks to the Javascript.
It can exist one ID bearing the same name in the page.
#selector-id { style property: value; style property: value;… }
Multiple selectors
The multiple selectors make it possible to apply an identical style or part of the style for several tags.
.name-of-classA, .name-of-classB, .name-of-classC { font-size: 12px; border-style: solid;
border-color: black; padding: 5px;
}
.name-of-classA { color: red; }
.name-of-classB { color: black; }
.name-of-classC { color: green; border-color: grey;
}
In this example the 3 classes will have the same size of character, the same spacing and the same color of edge except for the classeC which will have a gray edge and a green text. Class A and B will have different colors of text.
Selector of overlapping elements
It is possible to apply a style to a tag in a given context, i.e. according to the elements which surround it, thanks to the contextual selectors. It thus becomes easy to multiply appearances without forcing to have a multitude of classes of defined in the HTML.
a { color: black; }
.urgent a { color: red; text-decoration: underline;
}
By default, all tags A are defined with a black color. If a tag A is placed in the class “urgent” the color of the link will be red.
 |
