This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > June 2004 > '#' or '.' in CSS
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| Jacob 99 2004-06-11, 7:14 pm |
| Hi,
The more Im reading about CSS the less clear this becomes: when and why
would I want to define an element using '#' as opposed to '.' ?
Please forgive me if Im wording the question wrong (could be my lack of
understanding of CSS terminology)
For example, I want a large portion of information to stick to the right
hand of the window, and another to the left. Should I work like this:
..leftSide {
whatever
}
..rightSide {
}
OR like this:
#leftSide {
whatever
}
#rightSide {
whatever
}
....and why? Are these symbols significant in very specific scenarios?
Thanks for any help, Im still reading up on the W3C .
Jacob
| |
| Mark Morse 2004-06-11, 7:14 pm |
| # is used to define an ID. "." is used to define a class. Only one element
on a page can have a particular ID. Any number of elements can share the
same class.
mark
> Hi,
> The more Im reading about CSS the less clear this becomes: when and why
> would I want to define an element using '#' as opposed to '.' ?
> Please forgive me if Im wording the question wrong (could be my lack of
> understanding of CSS terminology)
>
> For example, I want a large portion of information to stick to the right
> hand of the window, and another to the left. Should I work like this:
>
> .leftSide {
> whatever
> }
> .rightSide {
> }
>
> OR like this:
>
> #leftSide {
> whatever
> }
> #rightSide {
> whatever
> }
>
> ...and why? Are these symbols significant in very specific scenarios?
> Thanks for any help, Im still reading up on the W3C .
> Jacob
>
>
| |
| Gary White 2004-06-11, 7:15 pm |
| On Fri, 11 Jun 2004 13:28:42 -0400, "Jacob 99" <jboyo@yorku.ca> wrote:
>The more Im reading about CSS the less clear this becomes: when and why
>would I want to define an element using '#' as opposed to '.' ?
>Please forgive me if Im wording the question wrong (could be my lack of
>understanding of CSS terminology)
The octothorpe (#) is used to assign a unique ID to a page element. Note
that there can be only ONE instance of any particular ID on a page. This
is useful for things where there will be only one, like a page header, a
navigation menu, or a page footer, etc. The dot is used to define a
class. A class is similar, but the same class can be used on multiple
elements on a page.
Gary
| |
| cmbergin 2004-06-11, 7:15 pm |
| '#' indicates an id. It should only be used once on any page. This is what
you would use when you lay your page out. Define <div>s with ids, then use css
to position them, etc.
<div id="header">
//header stuff
</div>
<div id="navigation">
//navigation stuff
</div>
<div id="content">
//content
</div>
CSS:
#header {
position: absolute;
left: .....
...
you get the idea.
'.' indicates a class. A class can be applied to any element and be used any
number of times on a given page.
| |
| Jacob 99 2004-06-11, 7:15 pm |
| Ok, on further reading I think I found what Im looking for -Classes versus
ID
In case anyone cares, I found Classes are recyclable and IDs must each be
unique, where IDs will override a Class if there is a conflict.
If there is more important info, please enlighten me.
Thanks
Jacob
"Jacob 99" <jboyo@yorku.ca> wrote in message
news:cacq0l$adb$1@forums.macromedia.com...
> Hi,
> The more Im reading about CSS the less clear this becomes: when and why
> would I want to define an element using '#' as opposed to '.' ?
> Please forgive me if Im wording the question wrong (could be my lack of
> understanding of CSS terminology)
>
> For example, I want a large portion of information to stick to the right
> hand of the window, and another to the left. Should I work like this:
>
> .leftSide {
> whatever
> }
> .rightSide {
> }
>
> OR like this:
>
> #leftSide {
> whatever
> }
> #rightSide {
> whatever
> }
>
> ...and why? Are these symbols significant in very specific scenarios?
> Thanks for any help, Im still reading up on the W3C .
> Jacob
>
>
| |
| cmbergin 2004-06-11, 7:15 pm |
| Bitten by the web forums yet again.
Seriously, does anyone out there know of a news reader that doesn't suck?
Well, I guess you wouldn't know what I think sucks. Needless to say, I don't
like Outlook Express or Mozilla's newsreader. Any other options?
I know, I know-- how about you actually learn how to use one of them before
dismissing all of them. What can I say; I'm lazy. :)
| |
| Dan Vendel *GOF* 2004-06-11, 7:15 pm |
| Jacob 99 wrote:
> Ok, on further reading I think I found what Im looking for -Classes versus
> ID
> In case anyone cares, I found Classes are recyclable and IDs must each be
> unique, where IDs will override a Class if there is a conflict.
> If there is more important info, please enlighten me.
> Thanks
> Jacob
Also:
AFAIK, a class can be applied to any element/tag.
But any element can't have an ID.
--
Dan Vendel - *GOF*
Contact me directly at http://contact.vendel.info
Formmail tutorial at http://www.vendel.info/tut/formmail.html
Nested table demonstration at http://www.vendel.info/tabletut/
Search Engine Optimization & Rank Control Utility at http://awr.vendel.info
Search Dreamweaver newsgroup at http://www.vendel.info/google.html
| |
| Al Sparber- PVII 2004-06-11, 7:15 pm |
| cmbergin wrote:
> Bitten by the web forums yet again.
>
> Seriously, does anyone out there know of a news reader that doesn't
> suck? Well, I guess you wouldn't know what I think sucks. Needless
> to say, I don't like Outlook Express or Mozilla's newsreader. Any
> other options? I know, I know-- how about you actually learn how to
> use one of them before dismissing all of them. What can I say; I'm
> lazy. :)
The vast differences in performance between a web forum and an nntp
forum mitigate for me any negative issues with newsreaders :-). You
might want to try Mozilla Thunderbird, though.
--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - Templates
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS Feeds: http://www.projectseven.com/xml/
| |
|
|
|
|
| Jacob 99 2004-06-11, 7:15 pm |
| Thanks for all the replies!
Jacob
"Jacob 99" <jboyo@yorku.ca> wrote in message
news:cacq0l$adb$1@forums.macromedia.com...
> Hi,
> The more Im reading about CSS the less clear this becomes: when and why
> would I want to define an element using '#' as opposed to '.' ?
> Please forgive me if Im wording the question wrong (could be my lack of
> understanding of CSS terminology)
>
> For example, I want a large portion of information to stick to the right
> hand of the window, and another to the left. Should I work like this:
>
> .leftSide {
> whatever
> }
> .rightSide {
> }
>
> OR like this:
>
> #leftSide {
> whatever
> }
> #rightSide {
> whatever
> }
>
> ...and why? Are these symbols significant in very specific scenarios?
> Thanks for any help, Im still reading up on the W3C .
> Jacob
>
>
| |
| Michael Fesser 2004-06-11, 7:15 pm |
| .oO(cmbergin)
> Seriously, does anyone out there know of a news reader that doesn't suck?
Forté Agent?
Micha
| |
| Michael Fesser 2004-06-11, 7:15 pm |
| .oO(Dan Vendel *GOF*)
>AFAIK, a class can be applied to any element/tag.
>But any element can't have an ID.
id, class, style and title are core attributes, they can be applied to
nearly any element (except for html, head, meta etc.).
But there's another difference: an ID-selector has a higher specificity
than a class-selector. In this example ...
<p id="foo" class="bar">blah</p>
#foo {color: red}
.bar {color: blue}
both selectors apply to the element, but the text will be red because
the id takes precedence. With
#foo {color: red}
#foo.bar {color: blue}
it would be blue, because now the second selector has a higher
specificity than the first. Could be confusing for a beginner ...
Micha
|
|
|
| | Copyright 2003 - 2009 forum4designers.com Software forum Computer Hardware reviews |
|