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



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




The result will be,
result using above codes
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 You can define all the elements inside the division with id mystyle by this CSS


The result will be,
result using id
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. 


Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables