Format this
This code is a mess! Fix it!
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
CSS
Animal and yo mama jokes
Create a page of animal jokes, and a page of yo mama jokes.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
Bar joke
Style a bar joke.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
CSS exercises
Exercise: Bar joke
Use CSS and HTML to make this:
Use a sans serif font. Get the colors about right. Get the spacing about right.
Submit the URL of your solution.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
Exercise: Pets, love, and evil
Make a table like this:
You can change the pets, and the yes/no ratings. You don't have to match the colors and spacing exactly.
Note:
- The cells all have space around the text.
- The yes/no ratings are centered.
- The entire table has a border.
- Odd and even rows are different.
Hint: mix-in classes might help.
Upload the URL of your solution.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
Vanishing links
Good dogs
Fix the look.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)
Finding problems
The story do far
You know how to make some HTML tags, and how to style them. What happens when things don't look the way you expect?
The developer tools
Browsers have some nice developer tools. Start a browser, look at one of your pages, and press F12.
Select the Elements tab:
On the left, you can see the page's HTML. Choose an element, and you'll see its styles on the right.
Gather styles in style sheets
Three pages, three style sections
In the last lesson, we put warnings on a page about baking cookies:
<style>
.important-note {
color: red;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
</style>
<p>Preheat your oven to 400 degrees.</p>
<p class="important-note">Warning: your oven will be hot.</p>
<p>Grease a cookie sheet.</p>Keywords: