What is the difference between an ID and a class in CSS? — OZONE Asylum, home of the Mad Scientists

FAQ

What is the difference between an ID and a class in CSS?

This page's ID: 5534

You are editing "What is the difference between an ID and a class in CSS?"

Who can edit an FAQ?	Anyone registered may edit an FAQ.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Well we are glad you asked. from mobrul: [quote]The difference is in how you use them within your html. Let us say you have a div that you would like to have positioned in a certain place. Well, since you wish to define the style of that 1 div, you would use the id. html = <div id='somethingSpecial'>;sdfjsdlf;sj</div> css = #somethingSpecial{position:absolute; top:10px; left:25px;} Of course you could go on to define all sorts of things about that div: background color or image, margins, paddings, borders, etc. ... even define the fonts inside that div with font-family, font-size, color, line-height, etc. Now, on to classes. classes are used when you wish to define a style that will apply to many elements on your page. an example would be...let's say you had a page you wanted 2 columns. One column that would hold content, on the right side of the page, and a series of divs that would hold auxiliary stuff (nav, links, sidenotes, whatever) on the left side of the page. All the divs in that second column (the one on the left) could be given a class and then you define that in the style sheet one time so all divs with that class have the same style. html = <div id='nav' class = 'auxillary'>;aldfjdsljfsd</div> <div id='links' class = 'auxillary'>;aldfjdsljfsd</div> <div id='sidenote' class = 'auxillary'>;aldfjdsljfsd</div> <div id='whatever' class = 'auxillary'>;aldfjdsljfsd</div> css = .auxillary{float:left; clear:left; width:40%} ...and so on. Like using the id's, you may define all sorts of styles to a class of elements -- positioning, padding, margins, borders, background colors and images, fonts, etc. So, in short, use id to define styles that will apply to only one very specific element (whether that element is a div, span, anchor, table, paragraph...whatever) and use class to define styles that will apply to a collection of elements. Another thing is, you can define style for a particular type of element. css = p{font-family:verdana; font-size:10px; color:#4a4a4a;} (Notice there is no punctuation in front of the 'p') That style will apply to all paragraphs in your html, unless you later specifically override this with a class or an id style. You can do that with any type of element (div, span, anchor, table, headings, etc.)[/quote] ------------------------- Relevant threads: [url=http://www.ozoneasylum.com/Forum8/HTML/000376.html]some questions on css[/url] [url=http://www.ozoneasylum.com/Forum8/HTML/000499.html]class VS id what is the difference[/url] ------------------------- Relevant FAQs: [internallink=5551]Can I use more than one/multiple class for an element?[/internallink] __________________ [internallink=4626]Emperor[/internallink] [small][i](Added by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Sat 25-Jan-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Sat 08-Feb-2003)[/i][/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu