Why # in CSS?
- Started
- Last post
- 33 Responses
- ********
What did I miss?
When defining a class like '.content' or something, why do some people use '#content' ?
- jon_0
# is used to define an id rather than a class
- ********0
like the man jon_ said
- ********0
I guess I should be reading up on this.. When should you use that over a class then? Is more for tables/div etc... non-typographic elements?
- ********0
it's for when you use "id" over "class" :p
it's all to do with inheritance in the styles, I may be wrong but I think that an "id" over-rides styles in a "class"
- Blofeldt0
You are wrong,
i think.
- Dancer0
Sorry about the hi-jack moth but - MX_Ond
You recommended this book:
http://www.sitepoint.com/books/c…Any other recommendations?
- ********0
not thish time mr Blofeldt ;)
"IDs (#) - due to their uniqueness - have more weight than Classes (.)" from
http://www.mako4css.com/BasClass…when to use IDs and when to use classes:
http://css-discuss.incutio.com/?…
- ********0
Dancer, if you've got that book then you've gotten understanding enough to use online resources like:
http://www.bluerobot.com/
http://www.meyerweb.com/eric/css…
http://glish.com/css/home.asp
http://www.csscreator.com/css-fo…Also feel the power of CSS here:
http://www.csszengarden.com/
- jon_0
on the simplest of levels you should use ids for elements which will appear on a page only once as it is a unique identifier
you can apply a class as many times as you want
another advantage of classes is that you can apply multiple classes at once, so if i define .class1 and .class2 i could put apply them both by using class="class1 class2"
- Blofeldt0
I knew you only identified an ID once per page, but was never really sure why. And i'm still not really any wiser on that. at the moment. Am checking out those links MX_OND, nice one, ta
- ********0
Bloody well done on those links MX_OnD.
I've just recently upgraded myself from a table junkie to a CSS junkie and I have yet to master the art... 3 sites in production right now and I intend to made them valid....
- ********0
ID's are used by JavaScript Blofeldt... much like if you use image roll-overs each image HAS to have a unique name or your JS gets confused... That's what I deduced from that link anyway...As to why though... yeah i am a bit confused actually...
- oliveira0
Okay, i'll try to clear it up for you.
You use an ID (#) to define a block that appears ONCE in a page. Something unique. You use a class to define objects that repeat several times, like several "pinkText" objects would all be derived from .pinkText
Examples for ID: #header, #footer, #right-bar, #left-bar, #veryspecialwork
Examples for Classes: .textBlock, .pansyGreenBox, .poem, .photo
The things defined by classes are likely to repeat several times through a page. IDs on the other hand, are used to define unique items.
Better?
- sparker0
correct, oliveira.
it has a lot to do with data description and semantics, more than "scripting."
it is an abstract concept following the idea of proper data formulation.
- DutchBoy0
.class
#idid is used for unique elements on a page. usually there's only one element on a page with a particular #id.. for instance #logo
if the element with an id has similar qualities as some class elements on a page you can use both #id and .class in the same tag.
for intstance if #logo has the same border as a textblock you can use both #logo and .textblock in that element..
- ********0
So I learnt something today.
But... what's to stop me just using .class?
- DutchBoy0
not much if you aren't working on very extensive sites..
- ********0
moth
nothing is to stop you from just using .class
but consider this....
you make a 3 column layout, for the sake of arguement....
so in your style sheet you define
#leftbit
#middlebit
#rightbitbear with me.....
then you decide that you want to format the main text areas for the whole page... so here you use a class which can be applied across ALL 3 of your IDs...
like
.headerTextFormat
.subHeaderTextFormat
.bodyTextFormatand so on...
by doing it this way you only need change one block of your css to affect all three columns and you have no need to define the text formatting in any of the 3 IDs...
you see??
- Blofeldt0
FUCK ME I GET IT!
- ********0
and if you take into consideration what DutchBoy said, imagine that your site consists of many different pages with iframes etc etc....
now all you need do is define an ID for any page element and use your classes to define the contents of them.