How To Make CSS Classes

This article relays relevant information about CSS classes, their general use, how to make them, their benefits and some drawbacks in their use.
To indicate a style for a set of elements, you can utilize the class selector. Its difference with the id selector is that it is utilized for the most part on a number of elements. This permits you to put a specific style for a lot of HTML elements by means of alike class. The class selector utilizes the HTML class attribute, and is assigned with a “.” or a period. The example stated at the bottom shows how every HTML element with class=”left” will be aligned at the left.

.left {text-align:left;}


Making CSS Classes

The CSS classes are sandwiched between thecommands of the HTML code. For example, we desire that a class of text shall bear the Verdana font, with a 12 pt size, bold and red in color. It is accomplished in this manner:

<FONT FACE="verdana" COLOR="red" SIZE="+12">

<B>text in here</B></FONT>


To avoid writing the code all over again for every cell, you can utilize writing the code in this class structure:

.onion { font-family: verdana; font-size: 12; font-style: bold; color: red }

The class is recognized beginning with a period and after that an alias, which in this case is the word ‚onion’. Then you can put this class statement within the <STYLE> commands as stipulated above. It should appear like this flank in your <HEAD> commands:

<STYLE type="text/css">


.onion { font-family: verdana; font-size: 12; font-style: bold; color: red }



Benefits Of CSS Classes

If you want to put in some details minus the hard work of building an up-to-the-minute style for that element, then it is easily done with the utilization of multiple classes. As an example, you may wish to align your elements to the center or left. With only “align:center;” and “align:left;”, you may already inscribe two classes. In the case when you desire to align an element to the right, you can affix the class “right” to its class directory.

If you aim to standardize operations within a site then utilizing multiple classes is apt. As an example, if you wish for the center-margin elements to be 20px, you can make a CSS class that would simply code center-margin:20px and put it wherever preferred.

Drawbacks In Its Utilization

It is possible that some old browsers may not be too keen in supporting codes for these multiple CSS classes so it is advisable to enlist the primary class with the majority of detailed information for that specific element.