‘.class-test’ will style the element that has a class of ‘class-test’. There may be many elements that have this class.
‘#id-test’ will style the element that has an id of ‘id-test’. IDs are unique so there should only ever be one id in that page with the same name.
If you want to style an element without using a class or id then you target the element in question.
e.g.
div {color:red}
That will style all divs to have red text. In this case there are no classes or ids added because you are using an ‘element selector’ and targeting the element directly (e.g. div,p,html,body,h1 and so on…). If you add a dot to it then it becomes a class and is no longer an element selector because there is no element called .div.
e.g. .div would style an element like this.
.div {color:red}
<p class="div">test</p>
That’s just a css comment that I use to divide sections or to add comments where necessary.
Thanks Paul, you’ve been a great help on this, so just to clarify, I can just put all the above into the external css file, exactly as it is, with no dots at the beginning of any lines?
Let’s examine the difference between a dot and no dot
.html{} means there is an element with this attribute on it: class=“html”. This can be any element. I repeat, ANY. html{} means it targets the <html> element. #html{} means there is an element with this attribute on it: id=“html”. This can be any element. I repeat, ANY.
I think you are confusing properties that are inherited with those that are not. If you give an element a height then that won’t affect the height property of other elements (they won’t inherit the height you set - although then may be able to make use of it).
