Top 3 CSS Commands And basic Structure You Should Know!

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:

  • CSS is placed inside and with further inside


  • CSS contains an element to be styled. For example, you want to style heading2 (h2) tag, then it would be like this:
  • 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:

this text would be transformed into uppercase

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

  1. none: simple
  2. capitalize: Make first letter caps. Like: blogger tricks would be converted into Blogger Tricks
  3. lowercase: lower the case
  4. 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:

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:

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

AuthorAuthor – His name is Mehul Mohan and he runs the blogger’s blog He is crazy about discovering new tips and tricks in the blogosphere and newly emerged tech toys.
Follow Him: @Twitter | Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>