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.
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. The Chrome Web Inspector tool behaves in a very similar way. You can launch both by hitting F12 while in your browser.
Use Firebug or Chrome to inspect the course web site:
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 for the first word. The second word is in Comic Sans MS. The larger letters are 2em and green in color.) Are any HTML changes needed? You can download the html file here.
HTML |
---|
|
First, wrap the text inside the <h1>
in an inline tag. The <em>
tag is one possible choice:
<h1>
<em class="term">
Web Programming
</em>
<h1>
You then need to add span tags to the first letter of each word, as well as the whole second word to be able to target them.
<h1>
<em class="term">
<span class="big">W</span>eb
<span id="font"><span class="big">p</span>rogramming</span>
</em>
<h1>
Then add the following CSS rules:
h1 { text-align: center; background-color: #cccccc; } em.term { border-bottom: dashed 3px red; }
.big { font-size: 2em; color: green; } #font { font-family: "Comic Sans MS", fantasty; }
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.)
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 in dogs.html
and also make it match the style guide:
<!DOCTYPE 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: