Advanced GIS

Assignment 5: CSS

Don't forget that there is another assignment for the Final Project Proposal due at the same time as this assignment!

Resources

The first three sections on this HTML Dog page list the more common CSS properties you'll be using.
This CSS cheat sheet is a bit more terse but you might find it useful.
There are more exhaustive references on CSS-Tricks and the Mozilla Developer Network.
If you're looking for a resource on CSS that you can read through, I'd recommend the CSS chapters ("Hello, CSS" to "Flexbox") of HTML & CSS is Hard. For now I would stick with editing code in Glitch, so you can skip the parts that mention a text editor named Atom.
css-tricks has good beginner-to-intermediate tutorials, and you might appreciate HTML & CSS -- The VERY Basics.
This video from last week also covers using CSS in Carto.
This video covers CSS in web pages.

Part 1: Add some CSS to a Carto map

Using a Carto map from earlier (or a new one), use CSS to edit your pop-up and legend. Try to make both fit the style of your basemap and data.

Part 2: Improve your HTML page from Assignment 5

Using your page from Assignment 4 (Part 2), add CSS to style it. While I strongly support you using site builders and templates from sites such as Templated in the future, please write your own CSS from scratch for this assignment. Consider fonts, colors, and positions when making your changes. Use at least three selectors, and select based on your elements' classes for at least one. The styles should be in a CSS file linked in the <head> of your document, like this:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="/styles.css">
    </head>
    <body>
    </body>
</html>

Put the styled page online using Glitch.

Submitting your work

Submit a link to the map you edited in Part 1 and a link to the page you posted online for Part 2.

Please include a short paragraph summary of your work.