anything placed inside the style tags (
<style>your style rules go here</style> ) are interpreted by your browser by default as CSS rules. CSS rules take the form:
Identifiers are used to refer to elements or parts of the associated HTML document. The style rules that follow the identifier name (the part inside the curly braces) are applied the the element that matches the identifier.
Identifiers come in various forms, the three most common identifiers are element identifiers, class identifiers and id identifiers. Element identifiers refer to elements by the element name (i.e. the words in your HTML file that are in between the “<” and the “>” delimiters). For example:
<div id='luna' class='cat'>
<img href='pie.jpg' />
In the previous example “div”, “body”, “img”, and “p” are all element identifiers. Any style applied to one of these will affect all elements of the same type. For example if I add a style that sets the background color for “div” element to hot pink, then the two div elements in the code sample above will have their background color set to hot pink. Element identifiers are represented in your CSS code by typing supplying the element name with no “.” or “#” in front of it:
Refers to the bady element.
In your average HTML file you will have many elements of the same type, many of which serve similar purposes. So we need to have a way to refer to all div elements that serve the same or similar purpose. One way to refer to a group of elements is to give all the elements in that group the same class name. You do this by setting the “class” attribute on each of these elements to the single desired name.
Here we have several elements of different types. Some are assigned to the “dog” class and others are assigned to the “cat” class. Notice that the elements in a class do not all have to be of the same type. In this example we have a “p” element and a “div” element that are assigned to the “cat” class. Any style applied to the “cat” class will affect both the “p” and the “div” elements that are assinged to that class. We style a class by referencing the class name as the identifier for our CSS rule, we reference a class identifier by supplying the class name prefixed by a “.”:
Notice the dot “.” in front of the class name “cat”. Notice also that in this example is assigned the class name “god” to the body element, i could have just as easily have assigned the body element the names “dragon”, “grandma” or… “body”. HTML files have only one body element, so it is usually not necessary to assign a class to the body element. But if we did (and only if we assigned the class by setting the elements class attribute), we could reference the body by using either the “body” element identifier (without the leading dot “.”) and we could also use the “.body” class identifier (notice the leading dot “.”).
id identifier are similar to class identifier in that you create them by setting the "id’ attribute of a given element. Notice my first code snippet, i had an elment with and id attribute set to “luna”. Unlike with classes, there can only be one element with a given id, each id must be unique. id identifiers are refernced in CSS rules by supplying the id indentifier name with a leading hashtag “#”.