This section is about adjusting the appearance of page sections using CSS and its Box Model, as well as debugging HTML/CSS code using the Firebug tool.
Given the following HTML and CSS snippets, what changes would be necessary to produce the image below? (Assume the red line is 3px thick, and the default font is used.)
<h1>lex parsimoniae</h1>
h1 {
text-align: center;
background-color: #cccccc;
}
problem by Morgan Doocy
First, wrap the text inside the <h1> in an inline-level tag. The <em> tag is one possible choice:
<h1><em class="term">lex parsimoniae</em><h1>
Then add a CSS rule which gives this element a dashed red border:
em.term {
border-bottom: dashed 3px red;
}
Given the following HTML file, boxes.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="boxes.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="outer-box">
<div id="inner-box">
</div>
</div>
</body>
</html>
Write the css file boxes.css so that the page looks like this (rendered in Firefox):
The outer border of the box is red, the inner border of the box is black, and the inner background color of the box is yellow.
Both the outer and inner borders have a width of 50 pixels. The yellow portion of the box has a width and height of 200 pixels. The overall box has a width and height of 400 pixels.
problem by Alex Miller
Below are two possible solutions:
body {
margin: 0;
padding: 0;
}
#outer-box {
background-color: red;
width: 300px;
height: 300px;
padding: 50px;
}
#inner-box {
background-color: yellow;
width: 200px;
height: 200px;
border: 50px solid black;
}
body {
margin: 0;
padding: 0;
}
#outer-box {
width: 300px;
height: 300px;
border: 50px solid red;
background-color: #000000;
}
#inner-box {
background-color: yellow;
width: 200px;
height: 200px;
margin: 50px;
}
(There are more ways to solve this problem.)
Consider the following printed material (click to view full size):
problem by Morgan Doocy
Below is one possible solution (click to view full size):
Alternatively, the dialogue could be considered a dl, with the dt.character and dd.line being inline with each other. This presentation is achievable using CSS.
Fix all of the validation errors in the following page, dogs.html:
<html>
<head>
</head>
<h1>Dogs are the best!!!</h1>
<body>
<h2>Why dogs are the best</h2>
<li>First of all, they are cute.
<li>Also, they protect against meanies.
<li>Finally, CATS SUCK!
<h2>Why cats are <em>NOT AS GOOD AS DOGS</h2></em>
<p>They are mean & they scratch.</p>
<h2>Dog pictures</h2>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8c/Poligraf_Poligrafovich.JPG/220px-Poligraf_Poligrafovich.JPG">
</body>
</html>
problem by Alex Miller
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Dog Page</title>
</head>
<body>
<h1>Dogs are the best!!!</h1>
<h2>Why dogs are the best</h2>
<ul>
<li>First of all, they are cute.</li>
<li>Also, they protect against meanies.</li>
<li>Finally, CATS SUCK!</li>
</ul>
<h2>Why cats are <em>NOT AS GOOD AS DOGS</em></h2>
<p>They are mean & they scratch.</p>
<h2>Dog pictures</h2>
<p><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8c/Poligraf_Poligrafovich.JPG/220px-Poligraf_Poligrafovich.JPG" alt="Picture of a dog" /></p>
</body>
</html>
Given the following HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LOTR</title>
</head>
<body>
<h1>Lord of the Rings Fan Page</h1>
<div id="intro">
<h2>Introduction</h2>
<p>Lord of the Rings is the best movie ever made. This is my fan page!</p>
</div>
<div id="content">
<div class="bordered">
<p>There are three LOTR volumes: The Fellowship of the Ring, The Two Towers, and The Return of the King.</p>
</div>
<h2>Characters</h2>
<ul>
<li>Bilbo</li>
<li>Frodo</li>
<li>Gandalf</li>
</ul>
<h2>Plot</h2>
<p>It's way too long to describe. Just go read the books!</p>
</div>
<div id="footer">
<h2 class="bordered">Thanks for reading!</h2>
</div>
</body>
</html>
Find the CSS selector for the following elements.
h2 elementsintroh2 elements inside of introh2 elements, except those inside of introp elements inside of contentp elements directly inside of contentborderedh2 elements with the class borderedproblem by Alex Miller
h2 elements h2
intro #intro
h2 elements inside of intro #intro h2
h2 elements, except those inside of intro #content h2, #footer h2
p elements inside of content #content p
p elements directly inside of content #content > p
bordered .bordered
h2 elements with the class bordered h2.bordered
Create a webpage that looks like the one below. Use serif/sans-serif fonts, extra-large fonts, and hideous colors. Use the following text and image:
problem by Rishi Goutam
Firebug is an add-on for the Firefox browser that lets you dynamically examine or modify the content and styling of web pages, among many other features. After installing it, right-click any element and choose Inspect Element to get started:
Go to the main page of the course web site and use Firebug to perform some or all of the following operations:
Write a page that gives roughly 5 reasons why your section is the best of all sections. Start from the template in the following file:
Then make the following changes to the appearance of the page. You will need to edit the HTML code to implement a few of these steps, but as much as possible, try to implement them by changing only the CSS.
You can also apply any colors you like to make your page look better. When you are finished, your page might look roughly like the screenshot below, which is a solution page with CSS code written by TA Stefanie Hatcher.
problem by Stefanie Hatcher
