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.