A lot of New Web Developers usually rewrite all the CSS when they need to redesign or update the current web template, and that is really not efficient at all.? So, how can we minimize the amount of time that have to be spent on the CSS?? The answer is simple.? Make your css reusable. But how?
Now, we start from the basic CSS elements.
.bold{
font-weight: bold;
}
.underline
{
text-decoration: underline;
}
and so on…
So whenever you want to make your text bold or underline you can do
<span class=’bold’>bold this</span> OR <span class=’underline’>underline this</span>
So far, it is still the basic, and nothing is really exciting right?
Ok, let’s make it a little bit complicate by introducing the multiple class names.
Now, suppose you want to make your text bold and underline.
Usually you would do
.bold_and_underline
{
text-decoration: underline;
font-weight: bold;
}
then finally apply it to the html tag like this <span class=’bold_and_underline’>bold, underline</span>.
If you are going to mix and match different css properties to the html element, you will end up with write a lot of css properties, and a lot of them just keep repeating.
By using multiple class name, now you can make your life a little bit easier.
You can do this:
<span class=’bold underline’>bold and underline</span>
If you want to apply more properties to the HTML Tag, you can always mix and match of your basic css properties by using the multiple class names.
And I would recommend you to make your class names more meaningful, so you can remember it when you apply it to your html tags.
However, this is not the end yet, and we can even go further with the classes.
A lot of web template will have a lot of <div> containers with css properties, such as, float: left, margin: 0, padding: 0;
Now, let’s set this up in css.
.container
{
margin: 0;
padding: 0;
float: left;
}
and assume we have two div tags, such as
<div class=’container big_box’></div>
<div class=’container small_box’></div>
And now, let’s see the properties of the big box and small box,
.big_box
{
width: 300px;
height: 400px;
}
.small_box
{
width: 100px;
height: 100px;
}
Now, you can see that it save you from writing the margin, padding, float properties repeatedly.
Without the multiple “class names”, you will have to do this:
.big_box
{
width: 300px;
height: 400px;
margin: 0;
padding: 0;
float: left;
}
.small_box
{
width: 100px;
height: 100px;
margin: 0;
padding: 0;
float: left;
}
Finally, the multiple “class names” is compatible with IE6,7, firefox, opera, another other major browsers, so you can feel safe to use it for your projects.
Good luck.
). How about we want to save some space? However we can’t just delete the “username” and “password” label in front or else you will lose your users the other day when you wake up.
