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.

  1. Expected Output
  2. Boxes
  3. Semantics
  4. Dogs.html
  5. Selectors
  6. Long Cat
  7. Firebug (long)
  8. Best Section Page (long)

1. Expected Output:

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.)

HTML

<h1>lex parsimoniae</h1>

CSS

h1 {
	text-align: center;
	background-color: #cccccc;
}

Expected Output

expected output

problem by Morgan Doocy

Solution:

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;
}

Back to top

2. Boxes:

Given the following HTML file, boxes.html:

<!DOCTYPE html>
<html>
  <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):

boxes.html screen shot

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

Solution 1:

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;
}

Solution 2:

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.)

Back to top

3. Semantics:

Consider the following printed material (click to view full size):

photo of two pages of Arcadia by Tom Stoppard

  1. Draw a box around each block-level element you see.
  2. Highlight (or underline) each inline element you see.
  3. Next to each element write any IDs or classes you would attach to that element.

problem by Morgan Doocy

Solution

Below is one possible solution (click to view full size):

photo of two pages of Arcadia by Tom Stoppard

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.

Back to top

4. Dogs.html:

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

Solution

<!DOCTYPE html>
<html>
	<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 &amp; 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>

Back to top

5. Selectors:

Given the following HTML file:

<!DOCTYPE html>
<html>
	<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.

  1. All h2 elements
  2. Element with the ID of intro
  3. h2 elements inside of intro
  4. All h2 elements, except those inside of intro
  5. All p elements inside of content
  6. All p elements directly inside of content
  7. All elements with the class bordered
  8. All h2 elements with the class bordered

problem by Alex Miller

Solution:

  1. All h2 elements
    h2
  2. Element with the ID of intro
    #intro
  3. h2 elements inside of intro
    #intro h2
  4. All h2 elements, except those inside of intro
    #content h2, #footer h2
  5. All p elements inside of content
    #content p
  6. All p elements directly inside of content
    #content > p
  7. All elements with the class bordered
    .bordered
  8. All h2 elements with the class bordered
    h2.bordered

Back to top

6. Long Cat:

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:

long cat page

problem by Rishi Goutam

Back to top

7. Firebug: (long)

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:

Firebug Firebug
Firebug

Go to the main page of the course web site and use Firebug to perform some or all of the following operations:

  1. Figure out what is the color being used for links.
  2. How many pixels of margin are used on the right side of the general content on the page?
  3. What is the URL of the "CSE" image in the top-left corner of the page? Figure this out, then change it to point to an image of your choice, such as this one.
  4. Make all of the headings in the top link bar area blink.
  5. Change the bullets in the main "Announcements" list so that they have 3em of vertical spacing between them.
  6. Double the left indentation of the bullets in the "Announcements" list.
  7. Make the overall page's text size smaller by 2pt.
  8. Make the "Syllabus" link green (without affecting the appearance of any other links).
  9. Delete the two W3C validator images from the bottom-right of the page.
  10. Insert a new bullet at the top of the "Announcements" list with any text of your choosing.
  11. Change the part of the page that contains the instructor's contact information so that it has the following styles:

Back to top

8. Best Section Page: (long)

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.

  1. Fill in the incomplete page content such as the page heading, your section number, and your 5 reasons why your section is best.
  2. Pick 3 of your favorite images to put on the top of the page, showing why your section is the best.
  3. Modify the CSS so that the three images appear in a line centered horizontally within the page. Each image should occupy 1/4 of the page width (the images should change size if the page is resized).
  4. The overall area of the page that contains the top heading and images should have a 5px-thick dotted border.
  5. Make the list of 5 reasons be centered horizontally within the page (the list itself should be centered, not the text within it). Make it so that the list occupies half of the horizontal width of the overall page.
  6. Make the list of reasons appear to have a "shadow" by giving it a thick, dark border on its right and bottom sides.
  7. Make the list "taller" by placing 1em of vertical spacing between each pair of neighboring list items.
  8. Pick one of the five reasons in your list that is particularly persuasive. Make it stand out by giving it a thick dashed border that is 1/2 em away from the text on all sides.
  9. Make the paragraph above the list have an overall background of one color, but make the actual text inside the paragraph have a different background color and be underlined.

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.

best section

problem by Stefanie Hatcher

Back to top

Valid HTML Valid CSS