In css examples, I’ve seen rules defined starting with a . and some starting with # – sometimes these are mixed in the same file. What is the difference between these rules:
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Are they referenced differently on the html page? Is it how the properties are inherited?
.refers to a class.<span class="one" />could be selected with.one.#refers to an ID.<span id="one" />could be selected with#one.You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one.
#navigation-barwould be using an ID because you will only have one navigation bar in your layout, but.navigation-linkwould be using a class name because you will have multiple navigation links. (It’d be better practice to use#navigation-bar a:linkto get the navigation links, but you get my point.)