Classes Whatever our choice, sheet style external or built-in, it is said that it must necessarily redefine all or some of the elements (tags) of the Html, on the contrary, let them also to stay as they are and we create the variations that we may need by making use of the classes. This to use classes is definitely the most comfortable and practical. If you can create how many and how we like and dislike, by doing so you take advantage of all the potential of CSS (sheet styles).
It is possible to define, with extreme simplicity of its style classes associated to the same element of the html, will be then these classes to be accessed from the inside of the various elements (tags) of html. Think of the fact that the same <p> element may invoke when a class, when another class depending on the needs. How to say that you will get from the same item in completely different results depending of which class is associated to it.
Example: we Define a class, it is sufficient to edit a name preceded by a .the point, which name?
Is not important, it is rarely used, better if related with the effect that it should produce in a way that will be remembered with greater ease when you will use it.
Note: class names must start with an alphabetic character and not a number and must not contain blank spaces.
We see practically how to do it. Let’s imagine that we want something that fits our signature, for example the one that I placed at the end of the page. We will create a class to which we assign the name the signature that will make use of a font that is small and tilted, and then style the italic, and the red color is clearly visible.
Recall from our editor on the file .css if it was an external style sheet, otherwise navigate within the area of the style, if you work outside any curly braces. We can now describe our new class, signature , assigning it various attributes:
.signature{
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-size: 9pt;
text-align: center;
font-style: italic;
}
Note that between the .(point) initial and the written signature is not there are empty spaces. Let’s see what are the individual entries in this new class signature:
font-family: Verdana, Arial, sans-serif;
Means to use the font Verdana (the first one declared), if this is not installed on the visitor’s PC, it will try Arial (the second declared), if you are missing even one, you will have one of the family san-serif , and so on, you can specify up to three fonts alternative, in the case in which none of the three was installed will be displayed using the default standard.
color: #ff0000;
Color red, you can express the colors in hexadecimal format, as in this case, by preceding it by the sign or pound # (hash mark), or by writing its color name in the English language. Also red would have produced the same result.
font-size: 9pt;
Font size: 9 points, we could express the value in pixels or in centimeters, or in other ways, as we will see below. Pixel perhaps it is better in points because it will fit perfectly to the video resolution, whatever it is. Notice that there are limits to the size difference of the font declared in html, where the max value was 7. If you express the size in points (pt) do not get off never below the value 9, because the MAC does not display fonts smaller than 9pt.
text-align: center;
Alignment of the text, in this case centered, you could choose between left, right, or justified; that is, using the related terms in the English language: left, right, justify.
font-style: italic;
Style Italic, we could also choose normal or normal oblique.
Well, the class is ready and all that remains is to recall it whenever we need, let’s see how.
Very simple, each element (tag) of HTML supports the attribute class, and then having to write a text and wanting to make use of the attributes you just entered in the class signature, it is enough to assign the class “signature” to the element (tag) you have chosen, in our case, a paragraph:
<p class=”signature”> … </p>
Everything that will be written inside this paragraph will comply with the parameters, even the styles, of the class signature. I recommend not to forget the closing of the element </p> or the signature settings will be extended to the rest of the document. By doing so the other <p> elements there will be no changes because they are not assigned to the class signature, as has been done for this <p> element in particular.
You will certainly understand that at this point any element of the html to be no more than an empty container within which to put everything that we feel like it. We will be able to continue to use the other <p> with different classes and thus have paragraphs that are formatted completely differently between them. You can simply change the name of the class, making him recall one of the many created for the various occurrences. This way of working captures the true versatility and power of the sheets of the style.
In practice, the example:
<p class=”signature”>this text respects the attributes of the class signature </p>
Produces this result:
this text respects the attributes of the class signature
And, in fact, uses the Verdana font, red color, size 9pt, it is centered and has the style italic.
You can also combine the various classes nidificandole one inside the other, thanks to the various containers, such as <span> </span> for example, the thing, however, is not always feasible and for this reason it is recommended to acquire before a certain familiarity in order to avoid messes indecipherable.
At this point you have realized that it is not so difficult, we can create all the classes that we need with the parameters and attributes most suitable to our needs and baptize them with the names that we want. If within your site, made of one or a hundred html pages, there was also only one small part of text that does not convince you, you can simply create a new class and assign it to that part of the code.
There are also classes that we will define more stringent because the associated a priori to a particular element or a list of well-defined html elements, in this case the class name will have no effect if not when it is invoked by the same predefined items. Let’s see a few examples, wanting to associate a particular class only to the element <p> paragraph. The syntax to call the class remains the same: <p class=”name”>, but in the style sheet it is possible to establish from the outset what tag the class may be associated with it.
p.right {text-align: right;}
p.bold {font-weight: bold;}
In this case, can be used in the classes right and bold, but they will produce their effect only with the element <p>
<p class=”right“> This paragraph is right-aligned.</p>
<div class=”right“> This div instead if he shrugs of the class
that align right.</div>
Wanting to bind the same class to multiple html elements you can declare in the sheet of style, separated by a comma:
p.- right, div.right {text-align: right;}
p.bold {font-weight: bold;}
In this case, can be used: the class right with the element <p> and/or <div>while the bold will only work with the element <p>
<p class=”right“> This paragraph is right-aligned.</p>
<div class=”right“> Now this div is right-aligned.</div>
NOTE: you can call from the html more than one class for the same element, it is sufficient to put inside of the class names of the classes separated by a blank space, this is because as well as all of the attributes of the html class, it works only once within the same element.
<p class=”right bold“>
And you can do the same from the inside of the sheet of style by declaring for different classes have the same attributes, by so doing, the already existing class it will bring back (inherits) all the properties of the same class declared previously.
p.right {text-align: right;}
.bold, p.right {font-weight: bold;}
In this case, with the class right check only for the element <p> an alignment to the right. Then I define a new class named bold, to use with any element of html and separating it by a comma recall also the class right that I had assigned to the tag <p>. In this case, when I’m going to use right in addition to right align the text will be in bold.
<p class=”right“> This is right-aligned + bold.</p>
<div class=”bold“> This div has only the bold text.</div>
If it seems a little complicated don’t worry, doing the tests and seeing the results in video you will better understand the mechanism, alo time learn to use the simple classes, the rest will come alone.