LOGO
Classes & ID's
If you only use one div or p or img then its simple to select it in order to style with CSS. However, what do you do if you have more than one div or p or img? How do you distinguish and select different elements? We need to identify each element with "names". The names we give elements are called classes and id's. Classes are names given to a group of elements that share common properties. Id's identify a single element with unique values. The same class name can be used for multiple elements, but an id name can only be used once. Maybe think of it this way...dogs are like the type of element, poodle are like classes(they all share certain characteristics), and Fido is like an id(Fido has characteristics unique to him). Notice the two div's both have the class "box" so they both have the same height, width, and text color. But each have their own id and so they have unique backgrounds.
Notice the syntax for classes and id's. In HTML to add a class and id you use an = sign, followed by the name enclosed in quotation marks. In CSS the period . is used to denote a class name and # is used to denote and id name. Since id's are more specific, they will override classes. So for example, if an element has both a class and id and if the text color is set for its class and id, it will take the color set in the id.