Chapter 4 - What are CSS IDs?

CSS IDs are similar to CSS classes but starts with a hash (#) tag instead of dot (.). The basic functionality is same as class. You can either use a Class or an ID to format your website.

I use IDs that will be needed only once. However, you can use as may times as you want. There is not such any restriction for using multiple times.

For example, if I have to design a fixed header of my page, then I will use ID instead of Class because every page has only one header.

 #header
 {
   width:100%;
   height:60px;
   background-color:#ff2354;
   position:fixed;
   left:0;
   right:0;
   top:0;
 }

This is a very simple example of creating header with css ID.

If you have any query regarding CSS header, you can drop a comment below.

Read More →

Chapter 7 - What is Division in CSS?

The word "Division" derived from the word "Parts". This means that you can make as many parts as you want to show different elements on your website with the help of style sheet.

You can use almost every bit of your website page's space.

In my previous chapters, you have learnt about the syntax or properties of css.

Now it is time to learn about how to use in HTML coding. It starts with DIV tag in HTML and you can reserve space of a website page with as many DIV tag as you want with the help of style sheet.

To create above layout; use the coding as shown below:-

Example of CSS CODING

 /* Here I am using for CSS IDs to create Main Screen, Left, Center and Right Division*/

 #main
 {
    width:425px;
    height:261px;
    background-color:blue;
    border:20px solid brown;
 }
 #left
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid red;
    border-radius:20px 20px 0px 0px;  
    float:left;
    border-bottom:50px solid red;
 }
 #right
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid green;
    border-radius:20px 20px 0px 0px;  
    float:right;
    border-bottom:50px solid green;
 }
 #center
 {
    height:116px;
    width:130px;
    background-color:#FFFFFF;
    border:2px solid pink;
    border-radius:20px 20px 0px 0px;
    margin-left:10px;  
    float:left;
    border-bottom:50px solid pink;
 }

Now have a look on the HTML coding to make divisions.

Example of CSS CODING

 /* Here I am using DIV Tag of HTML to make Divisions on the page*/

 <div id="main">
   <div id="left"></div>
   <div id="center"></div>
   <div id="right"></div>
 </div>

Now I hope everything is clear to you with respect to Division in CSS.

For more examples on CSS based layout and the use of all CSS attributes and properties; see blog posts.

And share your feed back.

Read More →