Hey guys! CSS which stands for Cascading Stylesheet is one of the most crucial and important (and beautiful) part of HTML. Your webpages would be dull and dirty unless some CSS styles are sprinkled on them. Today, I would tell you top 3 commands of CSS which you should know about CSS. If you don't even know how to write CSS, still, you can continue with this post as it would teach you the basic structure too! Lets start!

Basic Structure:

CSS has also a basic structure. Go through the following points:

If using CSS inside document, then, CSS would go like this:

<html>
<head>
<title></title>
<style>

</style>
</head>

</html>

CSS is placed inside <head> and </head> with further inside <style> and </style> tags.
CSS contains an element to be styled. For example, you want to style heading2 (h2) tag, then it would be like this:

<style>
h2
{

}
</style>

Well, that was the basic structure of CSS. If you want to learn more about it, head towards W3Schools.

Top 3 Must Learn Commands:

#1: text-transform

This is a time saving command. Suppose your boss says to write an article and you wrote it all in uppercase but your boss says I want first letter capitalized. Now, what would you do? Write it again!? Nah! Simply follow this command:

<style>
.transform
{
text-transform:uppercase;
}
</style>
<div class="transform">this text would be transformed into uppercase</div>

There are some more values that text-transform carries. Those are:

none: simple
capitalize: Make first letter caps. Like: blogger tricks would be converted into Blogger Tricks
lowercase: lower the case
uppercase: upper the case

#2: z-index

z-index is a popular CSS command which I would recommend you to read it out. z-index is a CSS property which helps you to set an element in front or back. For example, if you want to hide a logo, then use this command:

<style>
.logo
{
<!--positioning>
z-index:10;
}
</style>
<img src="link"/>

That would overlap anything in front of it. Similarly, negative commands can also be set. (Like z-index:-10)

#3: Don't Display!

This is my favorite CSS command! This would help you to remove or restrict displaying anything!! Suppose you are using wordpress free template and you don't want to mess up with complex PHP to remove footer links. So, what you would so is set display:none; command! See the syntax:

<style>
#credits
{
color: abc;

display:none;
}
</style>
<div id="credits"></div>

Now, the content trapped inside the divs tags would display nothing!!
Enjoy!!

Author - His name is Mehul Mohan and he runs the blogger's blog MyPremiumTricks.com. He is crazy about discovering new tips and tricks in the blogosphere and newly emerged tech toys.

Follow Him: @Twitter | Facebook