Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
Given the following HTML, what CSS would be necessary to produce the expected output below? (Assume the red line is 3px thick, and the default font is used.) Are any HTML changes needed?
HTML |
---|
|
First, wrap the text inside the <h1>
in an inline tag. The <em>
tag is one possible choice:
<h1><em class="term">lex parsimoniae</em><h1>
Then add the following CSS rules:
h1 { text-align: center; background-color: #cccccc; } em.term { border-bottom: dashed 3px red; }
Given boxes.html
, write boxes.css
to make the appearance on the next slide.
<!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>
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.
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 { background-color: black; width: 300px; height: 300px; border: 50px solid red; } #inner-box { background-color: yellow; width: 200px; height: 200px; margin: 50px; }
(There are more ways to solve this problem.)
<!DOCTYPE html> <html> <head><title>LotR FTW</title></head> <body> <h1>Lord of the Rings Fan Page</h1> <div id="intro"> <h2>Introduction</h2> <p>LotR is the best movie ever!</p> </div> <div id="content"> <div class="bordered"> <p>There are three volumes: FotR, T2T, and RotK.</p> </div> <h2>Characters</h2> <ul> <li>Bilbo</li> <li>Frodo</li> <li>Gandalf</li> </ul> <h2>Plot</h2> <p>It's too long to describe. Just read the books!</p> </div> <div id="footer"> <h2 class="bordered">Thank you!</h2> </div> </body> </html>
Write a CSS selector for:
h2
elementsintro
h2
elements inside intro
h2
elements, except those inside intro
p
elements inside content
p
elements directly inside content
bordered
h2
elements with class bordered
h2
elements: h2
intro
: #intro
h2
elements inside intro
: #intro h2
h2
elements, except those inside intro
: #content h2, #footer h2
p
elements inside content
: #content p
p
elements directly inside content
: #content > p
bordered
: .bordered
h2
elements with class bordered
: h2.bordered
Fix all of the validation errors and problems in 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: <img src="http://www.webstepbook.com/images/frenchie.jpg"> </body> </html>
<!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 & they scratch.</p> <h2>Dog pictures:</h2> <p><img src="http://www.webstepbook.com/images/frenchie.jpg" alt="a dog" /></p> </body> </html>
Create a webpage that looks like the one at right.
Use serif/sans-serif fonts, extra-large fonts, and hideous colors.
Use the following text and image:
For this printed page (click to enlarge):
Here is one possible solution (click to enlarge).
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.
Firebug is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. After installing it, right-click an element and choose Inspect Element with Firebug. Chrome has similar "Inspect Element" behavior built-in.
Use Firebug or Chrome to inspect the course web site:
Write a page that gives 5 reasons your section is the best. Start from best.html. As much as possible, try to change only the CSS.