For this exercise, build a page that looks like the one in this screenshot. Save that file as albumsales1.html. Click on the image to see it full size. You only need to build the first two tables. Take the text from the image, or make up the band names and album titles. Note the striping of alternate […]
In this exercise, we’re going to build a simple horizontal menu to illustrate a potentially frustrating aspect about using floated elements. The HTML Imagine that you have a header, an H1, and a UL with a class of “menu-top” at the top of your site. The HTML would look something like this: Some Basic CSS […]
The Task Download the files you need for this exercise. Double-click the zip archive if it doesn’t decompress automatically. You will be left with a folder called GibsonHTMLExercise. Inside that folder is an index.html file, a folder of images, and a folder of additional pages (called, naturally enough, pages). Open the file screenshot.png. Your task is to make a web […]
The Theory The CSS float property is used to create layouts where content would flow around elements (typically pictures). In years past, in fact, entire site layouts would be done with floats. Fortunately, we now have dedicated layout modes like display:grid and display:flex, so the use of floats as a full layout tool has greatly […]
Using Floats For Two-Column Layouts This exercise will help you understand how to make a two-column website layout using the CSS float property. If you need a quick refresher on the float property, read this. This exercise will hopefully also reinforce your understanding of HTML paths and the CSS Box Model. First of all, please download […]
One Way to Make a List-Based Horizontal Menu Make an unordered list with links in each list item. Give the UL (contextually) a list-style-type of none Zero the UL’s margin-left and padding-left Give the LIs a width (typically in percentage) Float the LIs Possible Options Set the line-height of the A tag to control the height […]
Which Selector to Choose & Why There are three main CSS style types: tags, classes, and IDs. This article will explain the difference between tags, classes, and IDs. Tag Styles I’ve started this discussion with tag styles because they’re the most basic and therefore easiest to understand. When we make a tag style, we are […]