When I make a class which I intend to be used with only one type of object - for example with <div> tags - there are at least 2 ways I can do it :

(i)

or (ii)


I presume that (i) is available to be used with any object, whereas (ii) can only be used with the <div> tag - but is there a general advantage in using one or the other in terms of browser speed?

I've read that one of the above styles has an advantage in terms of browser speed, I think it was an article written by someone involved in developing FireFox but I can't find it anywhere.
I doubt that any speed difference would be noticed by someone using a browser but I'm still curious.

I haven't tried this, but can both styles be used at the same time e.g. (ii) for a <div> container and (i) for say, a <h1> heading, or will the first declaration be over-ridden by the second?

It may be that the browser only needs to look for divs with that class instead of checking all the elements on a page for that class, so depending on the complexity of the page it may make a noticeable difference, but I can't imagine a page complicated enough to have that effect without also being just plain slow to load in the first place.



The 2nd will win in so far as there are any conflicts with the style rules. Otherwise, they are both used.

Instead of using div.whatever, you should specify your particular div this way:

#menu.h1 (or whatever).

I'm not sure what you mean. If this is an h1 tag with an ID of "menu" then it should be written as

h1#menu or just #menu

Or perhaps it's a div with the ID of "menu" and the class "h1", but being that ID's are unique, a class wouldn't normally be necessary.

Following Zipper's example you could have the same styling for all elements with the class "whatever", but you can create styling for div.whatever which will only be applied to divs with that class, instead of all the elements with that class.

Sorry, I mis-wrote it.

I meant to say

#menu h1

hi zipper

another way to declare a style is with

div#astyle { bla }

called like <div id=astyle>
with the # you are only allowed one element on a page using that style and it must be the id not the class tag on the element that calls the style...

so
.atyle { bla } can apply to any element on the page
div.astyle { bla } can aply to any div on the page
#astyle { bla } can apply to only one element on the page
div#astyle { bla } can apply to only one div on the page
div { bla } would apply to ALL divs on the page

and yes - i'd say that being more specific with your styles would make the page load faster - for example - if the browser loads the page then applies the styles - to apply a # declared style it can stop after its found one of them and move to applying the next style - if you declare that its a div its looking for on a . declared style then it dont need to check all class attributes of all the other elements before it can move along to applying the next style....

and yes again - which order you list AND apply them in will matter

But surely page loading, quite apart from the css - will depend so very much on what else is on the page too....no? You can have the slickest, meanest css code, but a few heavy images - music - videos etc. will make the difference at the end of the day.

Thanks for your replies.

I did start off my latest site using a bunch of #bluebox, #greenbox etc for coloured containers (read it in a cheap "how to use CSS" book), until the validator I'm using complained about using more than one of each id name in the same page.

So, I went back to the style sheet and added #bluebox1, #bluebox2, #greenbox 1 etc and declared each box I used with a different id name.

I remember thinking "this CAN'T be right, do I have to declare separately for each div I use?"

Then while typing up an internal link "<a href="#blah"> it occured to me that you can link directly to the id name which is one reason why the id names should to be unique, I suppose.

So, I went back to good 'ol div.blah instead of div#blah1 ... div#blah99

You're right Janys, now that I think of it, the first Editor I used ('97 version) had a function which stripped superflous white space and did other things to a file to compact it and make it faster to download (as well as making it more difficult to plagiarise).

These days I read about how you should be lavish with indenting , spacing & line-feeds in your code to make it more readable because download speeds are much faster.

I still have a dial-up connection but haven't used it for a couple of years since I got broadband (not even sure if I have the old modem).

Wow thanks Pixie, that little post explained the difference between those styles better than the 3 books I've been "trying" to read about it lol. Kudos to you!

Sure is janys - the css is the least of your problems when it comes to load speed - almost everything will make more difference than your css declarations - even how accurate your html is...

yr welcome Jo