Study guide for CSS test
Jon Ippolito
Version 3.0
Note: This guide does not necessarily cover everything on the test; consult the syllabus for topics, badges, and readings/chats to be sure you have reviewed all aspects.
DEBUGGING HTML AND CSS
The in-class test will require you to debug a broken web page collaboratively. You should be able to identify and fix common beginner mistakes in HTML and CSS.
- HTML document declaration (eg <!doctype html>)
- Fundamental HTML structure (eg <html>, <head>, <body>)
- Missing or mismatched tags (eg <div> without a closing </div>)
- Correct HTML attributes:
- <img> uses src
- <a> uses href
- <link> uses href and rel
- Incorrect class or id usage (eg class=".welcome" vs class="welcome")
- Incorrect file paths (eg \ instead of /)
ADDING CSS
Know three basic places that CSS can appear and their pros and cons:
- Inline styles (inside an HTML element)
- Internal styles (inside a <style> element in the <head>)
- External stylesheets (linked using <link rel="stylesheet">)
CSS SELECTORS
Know the three general types of selectors:
- Element selectors (p, nav, body)
- Class selectors (.card, .intro, .welcome)
- Id selectors (#menu)
Know how to nest selectors:
nav {
a {
...
}
}
nav {
a:hover {
...
}
}
CSS SYNTAX
You should know all aspects of CSS syntax cold. For example, where do these characters appear and what do they do?
You should also recognize common syntax mistakes such as:
- Missing semicolons
- Missing colons
- Missing hyphens in compound property names (eg background color instead of background-color)
- Gaps between selectors and pseudo-classes (eg a :hover instead of a:hover)
FILE PATHS
Know how to identify paths to files, eg:
- ../media/kitten.jpg
- https://example.com/images/pic.jpg
CSS VALUES
Know acceptable values for dimensions and colors, including:
- CSS color names (white, gray, teal)
- px
- em
- vw, vh
- %
- hsl(...)
- url(...)
- var(--variable-name)
Know common value mistakes:
- Missing units (20 vs 20px)
- Invalid percentages (eg hsl(200,50,90%))
- Invalid opacity values (eg 80% vs 0.8)
CSS VARIABLES
Know how CSS variables work:
- Define in :root
- Start with --
- Use with var(--my-favorite-color)
CSS PROPERTIES
Know the syntax and values for:
- color
- background-color
- background-image
- background-size (cover, contain)
- opacity
- font-size
- font-family
- font-weight (bold, normal)
- margin
- padding
- border
- box-shadow
- transition
- transform (scale, rotate, translate)
BOX MODEL
Distinguish these "envelopes" to block-level content:
Know TRBL order for shorthand values:
Example:
- margin: 10px 20px 30px 40px;
DISPLAY
Know these layout options:
GRID LAYOUT
Know how to create layouts using:
- display: grid
- grid-template
- grid-area
- grid-template-rows
- grid-template-columns
- gap
FLEX AND GRID ALIGNMENT
Know how to distribute items using:
- align-items
- justify-content
- space-between
- space-around
- space-evenly
HOVER AND TRANSITIONS
Know how to create simple interaction effects:
- :hover
- transition
- transform
Example:
a:hover {
transform: scale(1.5);
}