Confused about CSS inheritance

Question

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.

Answer 1

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.

Answer 2

#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.

Answer 3

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.

Answer 4

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">

Answer 5

lets say you have the following HTML:

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

then:

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

Answer 6

+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.

Answer 7

CSS 101 - the basics

CSS - all elements
    * { ... }
HTML - basic element
    <p></p>
CSS
    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>
CSS
    p#someid.someclass { ... }
HTML - nested element
    <p><span></span></p>
CSS
    p span { ... }
HTML - nested element with id
    <p><span id="someid"></span></p>
CSS
    p span#someid { ... }
HTML - nested element with class
    <p><span class="someclass"></span></p>
CSS
    p span.someclass { ... }
HTML - nested element with id in element with class
    <p class="someclass"><span id="someid"></span></p>
CSS
    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 { ... }