Basic Structure:CSS has also a basic structure. Go through the following points:
- If using CSS inside document, then, CSS would go like this:
<!--All CSS Goes Here-->
<!--All Coding of site goes here-->
- 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:
- 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-transformThis 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>There are some more values that text-transform carries. Those are:
<div class="transform">this text would be transformed into uppercase</div>
- 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-indexz-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>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:
display:none;Now, the content trapped inside the divs tags would display nothing!!
<div id="credits"><!--Complex PHP--></div>