While going ahead with javascript and all its goodness, we come across terms, which certainly make us curious like id and class. Apart from this we must know the things which we are going to use over and again as a web designer. When we already know about html,javascript and CSS makes up the whole web page, this is time to know some basics about CSS.
In CSS, we generally define some rules for our html content. Say, we have some structural data with a title and some content. Now this kind of data can be more than one in one page. So we will write some design rules, which our page content can refer to design itself. This kind of rules are called Class in CSS and generally defined with a . (dot) in the beginning.

.topic_title{}
.topic_body{}

The important thing to remember here is these elements will come more than once in a page. Now, there are elements in a page, which occur only once. These kind of elements are referenced as id and defined with a #.

#page_title{}
#page_navigation_menu{}

These are the basic types in CSS and we have already seen how these are referred in javascript too. To add the class styles and id styles in html document we write something as below.

We can even join two different styles together as

Now you can imagine how easy or complicated one can make a site design without even touching the content itself.
Well, there are some default elements in HTML as body, h1,p etc. These elements are directly designed with there name in CSS as

body{}
h1{}
p{}

How cool! Now for some global level elements or in general we have an option to define global style for all elements in a HTML page with a * as

*{}

That will assign, the designs described, to all the elements in the html page. This is, kind of, defining the base design of the page and its elements and then individual elements will override their design settings from there own id or class.

Point to keep in mind is, the design which is nearer to the element will override other design rules. That means, if there is a global style and an id or class style is defined for the element, the id or class style will override the design settings of the global style and the element will be visible as its defined in its id or class style.

Hope that helps someone.
If you want, take a reference of the design of our last all in one page here and can download load the source files here and see the basic CSS for the page.