This lab will teach you to write general style rules to change the default display of your HTML pages. You can specify most aspects of the site's presentation using these rules, including color, font, size, and even layout. Throughout this lab, you are encouraged to look at one of the online references listing the available style properties. See here, or here.
Although style rules may be specified in external files, for this lab we will be including them within the page itself, using a <style> tag in the page's header. Here's an example. (Note that the body of the file is not shown. Everything between the <style> and the </style> must be a style rule; there can be no ordinary HTML tags in this region.) This particular rule causes the first line of each paragraph to be indented by half an inch.
<html>
<head>
<title>CSC 102 Laboratory: HTML Tables</title>
<!-- Style rules below for this page -->
<style>
p {
text-indent: 0.5in;
}
</style>
</head>
An Exercise
See if you can create the following page, using style rules to make its appearance match:
The answer is here. (Use this to check your work when you are done.)
Final challenge: once you have gotten the style rules working inside the <style> tag, try splitting things up: move the style rules to a separate .css file, and put a <link> tag in the document head that refers to it. This is how you will set things up for the homework assignment.