Exercise: CSS Styling for a Web Page

For this exercise, explore the CSS options available to you to affect the visual style of the document's structure as defined by the HTML elements.

To get started understanding the structure of the provided HTML document, look at it both unstyled (try it both by interactively in the Developer Tools and finding and commenting out the line that links to file style.css). Then interactively explore the example style given by selecting different elements and hovering over them to see their positions, margins, borders, and paddings.

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

• Add different fonts to the text in the page (either built-in or downloaded)
• Make the H3 headings have a background color and different text color
• Make the list with the id navbar list look more interesting that just a bulleted list, especially regarding the sizing and spacing using different units
• Style the text of the class interesting so that it is different in some way
• Whatever else you want to experiment with

Add your CSS styles by editing a separate file named style.css that is linked from the HTML file.

Practice using the basic GIT workflow commands (add, commit, and push). After you have completed a "task" or "feature", make a GIT commit with an appropriate comment and after and regularly push your changes to Gitlab so your online repository reflects your work and you can see how it looks on the live web.