PDA

View Full Version : Confused on the basics :s


tony09uk
02-22-2011, 09:59 PM
I thought I was getting somewhere, maybe im not!

Can someone please explain - in idiots terms - what the difference is between the following:

#
.
*

I have asked tried to use the examples on w3schools to understand why you would use . instead of #, but it still dosen't make sense to me, also what is this *. I pulled the following of http://www.w3schools.com/css/css_reference.asp to see if you can help me make sense of it.

.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2

Many thanks for your help.

DWcourse
02-23-2011, 12:20 AM
A style rule beginning with a hash (#) will apply to objects with the same id. So #header applies to an object with the id attribute set to header. IDs should be unique only one html object on a page should have a given id <div id="header"></div>.

A style rule beginning with a period (.) is a class rule and will apply to objects with that have the class attribute set to the same value. So .header applies to object with the id attribute set to header. A class rule can apply to multiple objects on a page. So .header would apply to <div class="header"></div>, to <p class="header"></p> and any other object with the class attribute set to header.

The asterisk (*) can be used as a wildcard (will apply to everything) but there are issues.

domedia
02-23-2011, 12:49 PM
They're called selectors, and the W3C have them all defined here:
http://www.w3.org/TR/CSS2/selector.html

tony09uk
02-25-2011, 11:51 AM
Dwcourse, thanks that has helped, I think I understand it now, I will have a play and try to get them ingrained into my grey matter.

Domedia, thanks for that lank, I hadn't looked at that particular one, however I had looked at others that explain it in a similar way and they just never seem to make any sense to me.

I know it may seem like I never search for an answer before coming on here, but usually this is my last point of call after reading articles and becoming more confused or not being able to find anything at all.

Once again thanks for your help.

domedia
02-25-2011, 01:09 PM
I know it may seem like I never search for an answer before coming on here, but usually this is my last point of call after reading articles and becoming more confused or not being able to find anything at all. There's a ton of sites and pages, in all kinds of quality, on this subject, so I don't think anyone is going to blame you for seeking some help.

If you want to take it even further, look for some CSS3 selectors, and the current support in browsers. If you adhere to the ideas of Progressive Enhancement (making stuff even better for newer browsers), there's a lot of great stuff there.