Chapter 11
Exercises 11-1 to 11-3
Introduction to Cascading Style Sheets
Embedded Files
Home > Chapter Review and Exercises > Chapter 11 Exercises
From the Rock Band Nada Surf | Cooking with Daniel
From the Rock Band Nada Surf | Cooking with Daniel
A Short Article using CSS
A Short Article using CSS
Nada Surf is an actual rock band, whose members record cooking videos.
Read pages 239-260 before starting Exercise 11
Read pages 239-260 before starting Exercise 11
Exercise 11-1 Walkthrough
Exercise 11-1 Walkthrough
Page 242
Page 242
Navigate to the directory in your Class folder entitled Ch11. Here are all the necessary files you will need to edit.
NOTE: You will start by editing the cooking.html document in the next exercise.
Open the cooking.html document in your web browser to see how it looks like at the start.
Exercise 11-2 Walkthrough - Making your first style sheet
Exercise 11-2 Walkthrough - Making your first style sheet
Page 244
Page 244
Open cooking.html in a text editor. Add the following to the style section. As noted before, the bold faced text is the text that needs to be added to cooking.html.
<style>
h1 {
color: green;
}
p {
font-size: large;
font-family: sans-serif;
}
</style>
2. Save cooking.html, and open it in a browser to see the changes that have been made. Take note that the h1 text is green, and the paragraphs are now large with no serifs. Don't forget to include the opening and closing curly brackets.
3. We want to change the h1 element text from green to grey. Change its CSS as shown here.
h1 {
color: gray;
}
4. Save cooking.html, and open it in a browser to see the changes that have been made.
5. Change the color of the h1 element text from grey to blue. Change its CSS as shown here.
h1 {
color: blue;
}
6. Save cooking.html, and open it in a browser to see the changes that have been made.
7. Finally, change the color of the h1 element text from blue to orange. Change its CSS as shown here.
h1 {
color: orange;
}
8. Save cooking.html, and open it in a browser to see the changes that have been made.
9. And a new CSS rule to make the h2 elements orange as well. Make these changes in the style section.
h2 {
color: orange;
}
10. Add a 100-pixel left margin to paragraph (p) elements. Do this by adding the declaration margin-left: 100px; to the p selector.
p {
font-size: large;
font-family: sans-serif;
margin-left: 100px;
}
11. Add a 100-pixel left margin to the h2 headings as well.
h2 {
color: orange;
margin-left: 100px;
}
12. Add an orange, 1-pixel border to the bottom of the h1 element.
h1 {
color: orange;
border-bottom: 1px solid orange;
}
13. Finally, Move the image to the right margin, and allow text to flow around it with the float property. The shorthand margin property shown in this rule adds zero pixels of space on the top and bottom of the image and 12 pixels of space on the left and right of the image. It is equaivalent to the declaration margin: 0 12px; 0 12px;.
NOTE: Don't worry about the property "float" shown below. That's covered in Chapter 15.
img {
float: right;
margin: 0 12px;
}
14. The style section should now look like this:
<style>
h1 {
color: orange;
border-bottom: 1px solid orange;
}
h2 {
color: orange;
margin-left: 100px;
}
p {
font-size: large;
font-family: sans-serif;
margin-left: 100px;
}
img {
float: right;
margin: 0 12px;
}
</style>
15. Save cooking.html, and open it in a browser. This is what the website should look like after completing Exercise 11-2:
Read page 245 before starting Exercise 11-3
Read page 245 before starting Exercise 11-3
Exercise 11-3 What you need to know for this exercise
Exercise 11-3 What you need to know for this exercise
There are three ways that style information can be applied to an HTML document.
1. External style sheets. An external style sheet is a separate text-only document that contains a number of style rules. It always ends with the .CSS file extension. The .css document is then linked to the HTML document via the link element.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
2. Embedded (or Internal) style sheets. The style rules are placed in the style element in the head section.<head>
<title>Required document title here</title>
<style>
/* style rules go here */
</style>
</head>
3. Inline styles. These are style rules that are included in an element using the style attribute.
<h1 style="color: red">Introduction</h1>
Exercise 11-3 Walkthrough - Applying an inline style
Exercise 11-3 Walkthrough - Applying an inline style
Page 246
Page 246
1. Write an inline style that makes the second h2 gray. This will override the color orange setting from the style section. We’ll do that right in the opening h2 tag by using the style attribute.
Before:
<h2>The Main Course</h2>
After:
<h2 style="color: gray">The Main Course</h2>
2. Save cooking.html and open it in a browser.
3. This is what the website should look like after completing Exercise 11-3:
Report abuse