CSS Training Exercises
Kevin Lawver
This is a presentation. If you'd like to view all the slides like a normal web page, you can.
Training Exercises: Part One
- For Part One, use the CSS Zen Garden Markup Sample
- Try getting as close to the mock-up and requirements as you can, using the things we've gone over so far.
- Each example builds from the CSS you've already done, so you only need to create one stylesheet to go through all the examples.
- Don't hesitate to ask for help.
Training Exercises: A "Clean" Slate
- Remove the margin and padding from the body element.
- The font order should be: sans, "lucida grande", tahoma, verdana, sans-serif;
- The font size should approximate 11px.
- The background color should be white.
- The text color should be black.
- Your document should look like this
Training Exercise: Positioning
- #linkLists should be 20% of the browser width.
- The other pieces of the page should take up the remaining 80%.
- Move #linkLists to the left side of the page, even with the top of #intro.
- The h1 inside of #pageHeader should have a 10px of padding, a black border and a background of #ddd.
- The h1 inside of #pageHeader should overlap the h2 inside of #pageHeader by 10px.
- The h2 inside of #pageHeader should have a grey border and 15px of padding.
- It should look like this when you're finished.
Training Exercise: Lists
- In the #lresources list:
- remove the bullets.
- the background color should be #9cf.
- links should have no underline, bold, and #036.
- when the link is hovered, the background color of the list item should turn to #036. The text color should be #9cf.
- all acronyms inside list items should have the following color: #900.
- In the larchives list, make "previous design" appear to the left of "next design", and "view all designs" underneath "next design".
- It should look like this when you're finished.
Training Exercise: Background
- Replace the bullets in #lselect with this image: http://lawver.net/training_examples/blue_bullet.gif
- Replace the text of #pageHeader h1 with this image: http://lawver.net/training_examples/css_zen_garden.gif (the image is 300px wide, and 48px high)
- position this background 10px from the top, and 10px from the left of the existing border.
- Use this image as the background of #pageHeader h2: http://lawver.net/training_examples/zen_h2_back.gif
- The background image should to positioned at the top of the element.
- The background color should be: #489AED
- It should tile horizontally.
Training Exercise Two: The Header
- We're going to make this:
Training Exercise Two: Your Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Header Example</title></head>
<body>
<div id="head">
<h1>AOL</h1>
<form action="/search" method="GET">
<fieldset>
<input type="text" name="query" class="searchbox"/>
<input type="submit" value="search" class="button"/>
</fieldset>
</form>
<ul id="nav">
<li><a href="#">Main</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Personal Finance</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>
<div id="foot">Copyright 2005 America Online</div>
</body></html>
Training Exercise Two: Your Pieces
- Logo: http://lawver.net/training_examples/logo.gif
- Gradient: http://lawver.net/training_examples/gradient.gif
- Dark Blue: #3D84BC
- Light Blue: #B7DEFD
Training Exercise Two: CSS For the Heading
body {
margin:0;
padding:0;
font: 77% tahoma, verdana, arial, sans-serif;
color:#000;
}
#head * {
margin:0;
padding:0;
}
#head {
background: #3D84BC url('gradient.gif') repeat-x top left;
height: 128px;
}
#head h1 {
float:left;
height:106px;
width:170px;
text-indent:-1000px;
overflow:hidden;
background: url('logo.gif') no-repeat 9px 18px;
}Training Exercise Two: CSS For The Form
#head form {
margin: 0 0 0 171px;
padding:35px 0 0 0;
}
#head form fieldset {
width: 420px;
padding:3px;
border:solid 1px #3D84BC;
background:#B7DEFD;
}
#head form input.searchbox {
width:360px;
}Training Exercise Two: CSS For The Nav List
#nav {
clear:left;
height:1.8em;
list-style:none;
background: #b7defd;
border-bottom: solid 1px #3d84bc;
padding:0 0 0 10px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding: .3em 10px .2em .2em;
background:#b7defd;
color:#3d84bc;
text-decoration:none;
}
#nav li a:hover {
color:#009;
}category: Presentations, CSS