We can use CSS to handle styles for multiple pages .
Use comma to select multiple elements, like
<strong>h1, h2</strong> {
font-family: sans-serif;
color: gray;
}
You can have as many rules as you want for an element.
border-bottom vs. text-decoration: underline
if you use border-bottom, then the line will extend to the edge of the page. An underline is only shown under the text itself. The property to set text underline is called text-decoration and has a value of “underline”
for underlined text.
Selector
CSS file -- stylesheet
Link to the external stylesheets
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
<style>
</style>
</head>
Inheritance
Just like you can inherit your blue eyes or brown hair from your parents, elements can inherit styles from their parents
1. not all every style is going to inherit. Just some, like font-family.
Override the 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.
How does the browser know which rule to apply?
With CSS, the most specific rule is always used.
Add comments using /* */
Style elements using class
step 1: add the element to the class attribute
step 2: select the class in CSS
If you want all elements that are in the greentea class to have a style, then you can just write your
rule like this:
Elements can be in more than one class.
Place each class name into the value of the class attribute, with a space in between each. The ordering doesn’t matter.
<p class="greentea raspberry blueberry">
What if multiple selectors select an element?
step 1: Do any selectors select your element?
step 2: What about inheritance?
Step 3: Struck out again? then use the default.
Who is the winner if multiple selectors have the same specificity
So, p.greentea, p.raspberry, and p.blueberry all select the element, and are of equal specificity. What do you do now? You choose the one that is listed last in the CSS file. If you can’t resolve a
conflict because two selectors are equally
specific, you use the ordering of the rules in your stylesheet file; that is, you use the rule listed last in the
CSS file (nearest the bottom). And in this case, that would be the p.blueberry rule
<p class="greentea raspberry blueberry">
p { color: black;} /* Here's a rule that selects any old paragraph element */
.greentea { color: green; } /* This rule selects members of the greentea class. This is more specific */
p.greentea { color: green; } /* And this rule selects only paragraph that are in the greentea class, so that's even more specific */
p.raspberry { color: blue; } /* these two are the same in specificity as the p.greentea rule */
p.blueberry { color: purple; }