7 Secrets CSS The Obligation to Know


CSS would have become a must learn if you want to create a website. Continuing my last article about the basics of CSS, now I will tell the secrets of CSS that you may not know and should know, because it can reduce the size of your CSS file. This is her secret CSS (probably) you do not know:

1. Installing two classes in one HTML tag
Hey, did you know that we can install 2 class for the HTML tags? The answer can be. If we usually just make the code like this:

<p class="content"> 

So if we want that <p> follow two rules of different classes so we just turned it into:

<p class="content isi"> 

So if you have a class content and the content of the two rules in the class will be incorporated into <p>. Remember only 2 and could not be separated by a space.

2. Remove px to a value of 0
 Okay, let's say you have the CSS code like this:

.box {
border-top:10px;
border-left:0px;
padding:0px;
}

px here means a unit pixel and we have to write it down, but it turns out there is an exception to the number 0 (number 0 only) so we can write it like this:

.box {
border-top:10px;
border-left:0;
padding:0;
}

Yes, the number 0 does not need to use px, this means we reduce slightly the size of our CSS file.

3. Always use a shorthand
What is shorthand? Shorthand is an abbreviated rules in CSS to your CSS code. margins, and padding is an example that we can brief. Consider the following example of CSS:

.box {
border-top:10px;
border-left:0;
border-right:20px;
border-bottom:15px;
padding-top:0;
padding-bottom:10px;
padding-left:12px;
padding-right:9px;
}

Can be shortened to:

.box {
border:10px 20px 15px 0;
padding:0 9px 10px 12px;
}

See how much we can save the most important thing is the order from left to right starting from the top position and then moving clockwise.

4. Shorthand on color
Yep, we can color short, if we have the color white # ffffff then we use can be abbreviated to # fff. Similarly, if we have the color # 111111 to # 111. But we can not abbreviate the color # abcdef. Color should have the same hex number.

5. Shorthand at the font
Who says the font can not be shortened? If you have code like this:

.box {
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;
}


Can be shortened to one line: font: bold italic small-caps 1em/1.5em verdana, sans-serif
Keep in mind that in order to condense the font you must set the font-size and font-family are placed at the end. For others not obligatory.

6. Condense an already shortened
We can condense the already abbreviated. It's short but still could be shortened again? No sense. But it could. Consider the following example:

.box {
border-top:10px;
border-left:20px;
border-right:20px;
border-bottom:10px;
padding-top:0;
padding-bottom:0;
padding-left:15px;
padding-right:15px;
}

Okay, if the code above is abbreviated, the results like this:

.box {
border:10px 20px 10px 20px;
padding:0 15px 0 15px;
}

And because the value up and down and left and right are the same. Then it could be shortened again:

.box {
border:10px 20px;
padding:0 15px;
}

Remember this is only true if the value up and down and left and right alike.

7. The intermediate object
You want the middle of an object, such as images or div. It's easy just use auto on margins. Consider the following example:

#content
{
width: 600px;
margin: 0 auto;
}

Auto here means we let the CSS detects left and right width automatically based on the width of the screen. Then the results will automatically medium. Not applicable if we want the middle vertically. How exciting is not it? was only a small part, and many more secrets and tricks you need to know CSS. Good luck!
You 're reading an article about 7 Secrets CSS The Obligation to Know and if you deign to share the article 7 Secrets CSS The Obligation to Know This is a share button above . If you intend to copy the article 7 Secrets CSS The Obligation to Know to be posted on your blog , please put the link 7 Secrets CSS The Obligation to Know as the source is by copying the code below . Contact with me on Twitter |

1 comments :

  1. Kunjungan di malam tahun baru 2013..semoga sukses buat kita semua.Amin

    ReplyDelete

Notifications
close