1 CommentBY PRAVEEN ON JANUARY 9TH 2011 IN CSS, TUTORIALS ID ID & Class, Attaching CSS With HTML

TAGS: CLASS, CSS,

In is chapter, I would like to tell you about the IDs &amp; Classes, and also I like to differentiate them, which is very important in CSS. Before learning CSS, you should be clear with these stuffs. What is ID and CLASS? DIV is a HTML tags that describe one particular area or division or a container on a web page. This tags starts with <div> and ends with </div> We will be calling upon the DIVs in CSS. To call a particular DIV we use a name for them, eg, banner, logo, or whatever you name a DIV in HTML files. To name a DIV we use attribute ID ID and CLASS are the attributes of DIV. ID is used like the below eg. <div id= CONTENT >This is your content</div> and class is used like the below eg. <div>This is your content on left</div> Difference between ID and CLASS? In account of HTML document DIV ID of a name, can be used only once in a HTML do cuments, whereas a class can be repeated many times. eg. If your left bar and your right bar is going to have same content, then you shou ld not define them as ID in HTML it should be defined as a Class. So that you ca n just put the same DIV on left bar and right bar. If you have defined it as ID, then you can t use it twice, if you use it, your page will get an error in HTML v alidation test. Difference in account of CSS Document #content { } ID is represented as the following eg.

but class is represented as the following eg. .content { } a CLASS starts with a .(dot) and a ID starts with a #(Hash). The open and close set brackets are compulsory for every id or class. And an lin e of attribute in CSS should be terminated with ;(semi-colon) i.e #content { width:100px; } In above eg. Content is ID as it is started with a #(hash) and width is the attr ibute and 100 is the value in pixels and an attribute should be ended with ;(sem i-colon) just like the one in example. Attaching CSS With HTML Document Just by defining DIV ID in HTML document or by defining in CSS file is not going to bring any changes to your page, because they both are really two different f iles. So, we need to integrate them or attach them together. It can be done by a simple piece of coding that s going to be placed between the head tags of html do cuments. Say, our style sheet name is style.css, and it s located inside a folder called cs

s. Then our coding for integration is going to be: Now you can notice that the division content is of width 100px; or of width that you specified in CSS document. There we go, CSS is integrated with HTML file. Now you can start formatting or i nstruct the HTML elements on how to appear. So easy isn t it?