CSS - Styling Document Layout

The goal of today's lab is to understand the structure of the HTML document and to make significant changes to its layout using styling.

Starting with a given HTML file that is styled to display like this, change its styling so it displays like this. You should be able to do this without changing the structure (tags) of the document at all, only by changing and adding CSS rules.

There are multiple ways to achieve the same or similar results in CSS. Experiment with different combinations of selectors (tag, id, class), positioning (float, block, inline), and alignments (left, right, center) to achieve different effects. Take advantage of the Developer Tools to inspect and interactively change styles to see their immediate affects (using large values helps to clearly see what happens).

Note, however, that the only reasonable way to actually get the columns to align nicely with the same height is to use CSS's Flexbox model. You can achieve most of the desired layout without using this and I suggest you explore the default methods first to get a better foundation of how block tags versus inline tags can be positioned before jumping straight to that solution (since all tools have pros and cons).

Getting Started

The basic files and site structure are already set up for you on GitHub. Start by accepting the lab repository to create your own version (you can find the link using the Resources tab on Piazza). If you are working with a partner, choose one person to do this and make sure that both people's NetIDs are in the comment at the top of the style.css file to ensure both people get credit for doing the lab.

To get started understanding the structure of the provided HTML document, look at it both unstyled (comment out the line that links to style.css) and with the example style given using the Developer Tools to see the positions, margins, borders, and paddings of the elements.

It may also help to look at this short tutorial to understand how positioning works using CSS or this question-based page of interactive CSS examples.

Modify the given style.css file to affect your changes to the document's layout. Do not modify the given HTML file.

Submission

At the end of class, push your changes to the style.css file to the lab-layout-GIT_SCREEN_NAME repository on GitHub to submit your work. If you worked in a pair, make sure both people's NetIDs are in the comment at the top of the style.css file.