Assignment 2: CSS Basics

Due: Friday, 9/18/26, before class.

Goal

In Assignment 1, the only styling tool you had was the style attribute on individual elements. That works, but it means repeating yourself constantly and it doesn't scale. This time, you'll write real CSS: a separate style.css file, linked into your page, with rules that target elements using selectors instead of styling one element at a time.

You may build off your Assignment 1 page, or start a new page — either is fine, as long as it meets the requirements below.

Requirements

1. External stylesheet only
   No style attributes this time — all styling must live in style.css, linked from your page like this:

   <link rel="stylesheet" href="style.css">

2. Selectors
   Use all three kinds of selector somewhere in your stylesheet:
   • At least 2 element selectors (e.g. p { ... })
   • At least 3 class selectors (e.g. .card { ... }), used on more than one element each
   • At least 1 id selector (e.g. #main-title { ... }), used on exactly one element
3. Box model & visual styling
   Apply padding, margin, border, and background-color somewhere on your page. Use border-radius at least once.
4. Typography
   Set a font-family, and use at least two more typography properties (for example font-size, font-weight, line-height, or text-align).
5. Layout with flexbox
   Use display: flex on at least one container — for example, to lay out a navigation bar, or a row of cards/images.
6. A hover effect
   Add at least one :hover rule (for example, a link or button that changes color or background when you hover over it). This wasn't in the CSS reference — see Helpful Resources below.

File and Folder Setup

Same rules as Assignment 1: your folder and file names must match exactly. This assignment needs two files, both inside a new 02-css-basics folder:

csc336-fall2026/
└── assignments/
    └── 02-css-basics/
        ├── index.html
        └── style.css

Once pushed, your assignment will be visible at:
https://<your-username>.github.io/csc336-fall2026/assignments/02-css-basics/

Helpful Resources

• CSS Basics Reference — a printable-style table of the core CSS properties, each linked to its MDN docs page.
• CSS Basics Live Demo — the same properties, but live and rendered, with the exact CSS shown under each example.
• MDN: :hover — the hover effect requirement above isn't in the reference/demo pages, this is where to look.
• MDN CSS Reference — the full reference, for anything not covered above.
• If you want a refresher on using your browser's dev tools to inspect and debug CSS live, this video covers the basics in about 10 minutes.

Challenge (optional)

Once the requirements above are done, try adding one or more of:

• A gradient background (linear-gradient())
• A box-shadow or text-shadow
• More than one flexbox container, with different justify-content/ align-items values

What to Submit

Nothing to submit directly — your assignment should be publicly available at the address in File and Folder Setup above once you've committed and pushed.