need a little help refreshing my mind with CSS

[S.O. Price]

Hi, A couple of years ago I started a web page and I had some code where I was using some css to style a DIV. For the css I had the following:

 

#maincontainer { blah, blah, blah} and of course I referred to this in the DIV by:

 

<div class="maincontainer">

 

I am now looking at CSS3 and I see references to items such as....

 

 

body { blah, blah, blah}

 

.leftStyle { blah, blah, blah}

 

and pseudo classes. I am not seeing anything in .CSS3 where one makes use of the # sign to define some .css. I put the #maincontainer in an .html file I created and it works, it's just that I don't if the # sign is no longer used or under what specific circumstances it should/should not be used... Any ideas to help refresh my memory as to the proper useage of #?!

 

Thanks!

[__Darknite]

Any ideas to help refresh my memory as to the proper useage of #?!

 

The "#" references an element by Id (and you can only have 1 element with that Id)

 

Example:

 

HTML

 

<span id="Foo">Hi</span>

 

CSS

 

#Foo
{
    color:red;
}

 

Hope that helps

[S.O. Price]

The "#" references an element by Id (and you can only have 1 element with that Id)

 

Example:

 

HTML

 

<span id="Foo">Hi</span>

 

CSS

 

#Foo
{
color:red;
}

 

Hope that helps

 

Thank you! Would you say this usage has fallen out of favor in CSS3? I haven't seen any examples of this in CSS3 in all the literature I've looked at.

[__Darknite]

I think the CSS Id tags are still needed. You may have very special cases an example would be a website Title/logo title. There would be no point in making theses classes as they only appear once.

[S.O. Price]

I think the CSS Id tags are still needed. You may have very special cases an example would be a website Title/logo title. There would be no point in making theses classes as they only appear once.

Let me clarify a bit. I do know that the ID tags are needed. Actually all the CSS3 examples I've seen have the following: class=styleFoo in the HTML tag area which refers to the CSS3 class. To write out the matching css3 class, I have seen .styleFoo {blah, blah, blah}, but I have not seen #styleFoo {blah, blah, blah}. So I'm really questioning as to whether the # sign is used... Thanks.

[__Darknite]

Yes, the # sign is still used.

 

And yes you can use them together thus:

 

HTML

 

<div id="Header" class="big">
bla bla bla
</div

 

CSS

 

#Header
{
    margin:4px;
    color:#ddd;
}

.big
{
   fonts-size:1.8em;
}

Edited July 9, 2012 by __Darknite

[Mommajj8]

Absolutely ID's (#) are still used.  I use them to identify the parts in my webpage, much like the example above.  #header, #maincontent, #footer. Classes (.) are also necessary for things that you plan on using throughout your design.

 

The way you should decide what to use when is keeping in mind that the ID (#) can be used once per page, whereas a class (.) can be used multiple times.

[OhioTom76]

Both ID's and Classes are very much in use these days, and will continue to be used going forward. ID's are necessary when you need to target specific areas of the page. This can either be when dealing with CSS, but it's also important when writing Javascript/JQuery stuff too. Let's say I came up with an overall look for all the links throughout my page (no underline, a drop shadow effect on them, perhaps they go from normal to bold when hovered, etc...). However, let's suppose I want all the links to be blue, with the exception of the links in my header, which I want to be red. If the header has it's own unique ID, then I can simply target the links in the header, and write one extra line of CSS declaring them red. If I were using classes, I would have to duplicate all that CSS markup for the blue links into another class for the red links, which is redundant. 

 

Theoretically speaking you *could* create a class and only use it once on a page, and treat it like an ID, but it's best practice to just simply use ID's when needed. It makes it easier for anyone else working on the site down the road to understand what CSS elements are unique and which ones are used multiple times.

[simplysidy]

What I have felt with CSS3 and HTML5 + jQuery is that the IDs sooner or later are going to be left out only for the jQuery and some HTML5 (when I read - linking within a document and using the # for the link). That said, CSS still supports the # used for Identifiers and as such, the # continues to function.