Linking from “lounge.html” to the external stylesheet
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css"><style></head>
</style>
You don’t need the <style> element anymore—just delete it.The rel attribute specifies the relationship between the HTML file and the thing you’re linking to. We’re linking to a stylesheet, so we use the value “stylesheet”.And the stylesheet is located at this href (in this case, we’re using a relative link, but it could be a full-blown URL).<link> is a void element.It has no closing tag.
inheritance
To override the font-family property inherited from body, add a new rule selecting em with the font-family property value set to serif.
class
To add an element to a class, just add the attribute “class” along with the name of the class.
p.greentea {color: green;}now you have a way of selecting <p> elements that belong to a certain class to style them.
If you want all elements that are in the greentea class to have a style, then you can just write your rule like this:
.greentea {
color: green;
}
how styles are applied
First, do any selectors select your element?If there is, and it has a font-family property and value,
then that’s the value for your element.If there are no selectors that match your element, then you rely on inheritance.
If your element doesn’t inherit the value from any of its ancestors, then you use the default value defined by the browser.
What if multiple selectors select an element?if one rule is more specific than the others, then it wins.
When equal specificity. What do you do now? You choose the one that is listed last in the CSS file.
