I've been reading about CSS and I am really confused about how the inheritance works (I think thats the right term for the following). In CSS I can declare a class:

#mytext {

then I see some people do:

p.mytext {

But why do that? Why can't they just do:

<p class="mytext">

Without declaring p.mytext? Does it make sense what I am asking?

and sometimes i see:

p#mytext ... Why is it different? I'll keep searching tutorials but thanks for any advise.

+6  A: 

The pound sign (#) refers to an ID which needs to be unique for the page. The period (.) refers to a class which can be used many times. People would use p#mytext if they wanted a unique styling for one (just one) paragraph tag.

You can read up about it here.

Wanted to add that some web developers seem to gravitate towards declaring everything as classes. If you use a layout generator of any kind more often than not every element will be a class.

thanks for the answer.. what do you mean (just one)? they can only use it once? this is the part I'm not getting. thanks again
billy vandory
Yes, just one. Just like anything an ID is unique. Say you had a webpage with a header and some comments. Your header would be unique because typically most sites only need one header so you'd use an ID. As for the comments, since you'd have multiple comments on your page you would create a class.
+5  A: 

#mytext references <p id="mytext"/> (doesn't need to be a p element, #mytext just refers to that ID)

Whereas .mytext references <p class="mytext"/> (doesn't need to be p element, .mytext just refers to anything with that classname)

By adding other things such as p.mytext you create a stronger bind to your rule, for instance: p.mytext { color:white; } .mytext { color:black; }

may at first seem like the color would be black, however as you have created a stronger bind (by being more specific earlier) the actual color will be white.

+2  A: 

First check this question here.

In short # represents an ID in css, and . represents a class. if you say p#myText in your css it means you have a <p id="myText"></p> in your html, and p.myText is for <p class="myText"></p>.

Furthermore you declare an ID if you have an unique item in your html, and if you have multiple elements with same styles you declare a class for them.

Sinan Y.
+1  A: 

A hash (#) is a unique ID definition.

#foo { color: blue; }

<div id="foo">

A dot (.) is a class definition.

.bar { color: red; }

<div class="bar">

But you can also refer to tags with certain classes and ID's:

div.baz { color: green; }
span#qux { color: yellow; }

<div class="baz">
<span id="qux">

lets say you have the following HTML:

<div id="main">
    <p class="para">content</p>
    <p class="para">content</p>


div#main { }

references divs with the id of "main"

#main { }

references all elements that have the id of "main"

p.para { }

references all p elements with the class of "para"

.para { } 

references ALL elements with the class "para"

NB. An ID must be unique on the page whereas a class can be used multiple times

Darko Z
*references divs with the id of "main"* - IDs are unique, so it only applied to one element.
Gert G
yep one element in a page but you might have more than one page with an element div#main
Darko Z
+1  A: 

+1 for the interesting question.

First, you have it backwards, . (period) is class and # is ID. You probably already know this, but an element can only have one ID and you should only have that ID defined once on your page.

As for the second part of your question, some people like to append the element name to their classes and IDs. It's just more specific that not having it defined.

img.large { width 200px /* Only applies to img with large class */ }
textarea.large { width: 300px /* Only applies to textareas with large class */ }
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ }
.large { font-size: 2em; /* Applies to any element with class of large */ }

Personally, I like to append the element name in my styles so that I don't forget which elements it is affecting.

Derek Hunziker
+2  A: 

CSS 101 - the basics

CSS - all elements
    * { ... }
HTML - basic element
    p { ... }
HTML - element with id
    <p id="someid"></p>
CSS - element with id
    p#someid { ... }
CSS - all id's
    #someid { ... }
HTML - element with class
    <p class="someclass"></p>
CSS - element with class
    p.someclass { ... }
CSS - all elements with class
    .someclass { ... }
CSS -  is equal to
    *.someclass { ... }
HTML - element with both id and class
    <p id="someid" class="someclass"></p>
    p#someid.someclass { ... }
HTML - nested element
    p span { ... }
HTML - nested element with id
    <p><span id="someid"></span></p>
    p span#someid { ... }
HTML - nested element with class
    <p><span class="someclass"></span></p>
    p span.someclass { ... }
HTML - nested element with id in element with class
    <p class="someclass"><span id="someid"></span></p>
    p.someclass span#someid { ... }

now you can mix and match all those things up to make really complicated selectors

if you want multiple selectors with the same properties you can seperate them with a comma

    p.someclass, span#someid { ... }