Learn more about ID and Class Selector

This should be a "must" learn in HTML and CSS. It helps you to beautify a specific element in your  HTML body.

SELECTOR	ID	CLASS
CHARACTERISTICS	unique single usage	style many elements can be use several times
DEFINE WITH	"#"	"."

It works like this, let's say for example in your HTML body

<div id="header-wrapper"> <p class="txtbody"> This is a sample paragraph text using class selector</p> <p> This has no class</p> <p class="txtbody"> This is a another sample paragraph text using class selector</p> </div>

You can style the id named header-wrapper and the class named txtbody by using CSS, define them by


<style type="text/css"> #header-wrapper{background-color:orange;padding:10px} p.txtbody{color:green;} </style>

The result will be,

All the p elements with class txtbody has the color green and the background of the division with the id header-wrapper is orange with padding 10 in all sides as we define it in the CSS. We can only use the id named header-wrapper once and the class txtbody several times as shown above.

Do NOT start an ID name and class name with a number!

There are several techniques using ID and class selector. For example in your HTML body<div id="mystyle"> <h2> This is heading</h2> <p> This is a paragraph</p> <a href="http://nullhead.blogspot.com/">I am a link</a> </div> You can define all the elements inside the division with id mystyle by this CSS
<style> #mystyle{background-color:lightblue;padding:5px} #mystyle h2{ font-size:20px; color:orange} #mystyle p{color:black} #mystyle a{color:green} </style>

The result will be,

You will notice that as long as the elements are inside the division named mystyle, you can style them individually by using their HTML tag like the h2 (heading), p (paragraph), and a (links).

Learn CSS more

There are lot of online tutorial to learn more about CSS and creating website one of my favorites are:

• W3Schools : The world's largest development site
• QuackIt : Teaches beginners how to create websites.

Final Words

Play with CSS and you'll be amazed! The reason why I love web designing it's because of CSS.