Share Your Travels

Exercise 4.2 — EMBEDDED STYLE SHEETS

1 Add the following embedded style to theelement from the previous exercise.

2 Test. Why didn’t it seem to work?
It didn’t work because of cascade specificity rules. The internal style created in last exercise overrides the embedded style we just created. To fix it, we will have to remove the internal styles.
3 Remove the internal styles created in last exercise. Test.
The

element should now have blue text against a yellow background.
4 Add the following style rule and test.
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
This is a grouped selector which selects all three headings.
5 Add the following style rule after the one created in previous step and test.
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
h1 {
font-family: Georgia, Cambria, “Times New Roman”, serif;
}
Notice that the new style rule for h1 overrides the earlier one due to the cascade principle of location (i.e., when rules have the same specificity, then the latest are given more weight).
6 Change the previous style rule to the following. Before you test it, ask yourself whether this will affect the font-family of the headings.
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
body {
font-family: Georgia, Cambria, “Times New Roman”, serif;
}

Figure 4.1 – Exercise 4.2 Complete

Exercise 4.3 —EXTERNAL STYLE SHEETS

1 Create a new text document with the following content:
header, footer {
color: white;
background-color: #213643;
}
nav {
background-color: #728B96;
}
h1, h2, h3 {
font-family: “Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif;
}
body {
font-family: Georgia, Cambria, “Times New Roman”, serif;
}
Notice that this document contains no HTML. Also notice that the first style rule uses a grouped selector, meaning that both the header and footer elements will receive the same style.
2 Save your file as lab04-exercise03.css.
3 Open lab04-exercise03.html (which has the same content as the last exercise).

4 Add the following to theelement.5 Save and test lab04-exercise03.html in browser.6 View the lab04-exercise03.css file (yes the css file) in the browser.At some point everyone will mistakenly load a css file into the browser rather than the HTML file. What will happen will vary depending upon the browser and one’s computer setup. For the author of this lab, if I open up the CSS file in Chrome or FireFox, the CSS text file is displayed; in Internet Explorer, it starts my default CSS editor, which just happens to be Adobe Dreamweaver.CSS SELECTORSWhen defining CSS rules you will need to first need to use a selector to tell the browser which elements will be affected by the styles. CSS selectors allow you to select individual or multiple HTML elements, elements that belong together in some way, or elements that are positioned in specific ways in the document hierarchy. The previous exercises used HTML selectors. The next exercises make use of other selectors.Exercise 4.4 — ELEMENT, CLASS, AND ID SELECTORS

1 Open lab04-exercise04.html.
2 Add the following to the markup.