HTML and CSS work together to build and style web pages. HTML gives a page its structure, while CSS controls the way that structure looks on screen. This cheat sheet helps students remember the most common tags, selectors, properties, and layout patterns.
It is useful when creating class websites, debugging code, or reviewing for a web design unit.
The core idea is to write meaningful HTML first, then apply CSS rules to change layout, color, spacing, and typography. HTML elements use tags such as <h1>, <p>, <a>, <img>, and <div>, while CSS uses selectors such as h1, .class, and #id. Important CSS concepts include the box model, units, flexbox, and media queries.
Responsive design makes pages adapt to different screen sizes using flexible layouts and breakpoints.
Key Facts
- A basic HTML page usually includes <!DOCTYPE html>, <html>, <head>, <title>, and <body>.
- HTML elements often use an opening tag, content, and a closing tag, such as <p>This is text.</p>.
- An HTML attribute adds extra information to a tag, such as href in <a href="page.html">Link</a>.
- A CSS rule has the pattern selector { property: value; }, such as p { color: navy; }.
- Class selectors begin with a period, such as .highlight, and ID selectors begin with a hash sign, such as #main.
- The CSS box model is content + padding + border + margin, and total element width can increase when padding or borders are added.
- Flexbox can align items with display: flex;, justify-content: center;, and align-items: center;.
- A media query such as @media (max-width: 600px) { body { font-size: 16px; } } changes styles for smaller screens.
Vocabulary
- HTML
- HTML is the markup language used to structure the content of a web page.
- CSS
- CSS is the style language used to control the appearance and layout of HTML elements.
- Element
- An element is a complete piece of HTML, usually made from a start tag, content, and an end tag.
- Selector
- A selector is the part of a CSS rule that chooses which HTML elements the style will affect.
- Box Model
- The box model describes how content, padding, border, and margin combine to form the space an element uses.
- Responsive Design
- Responsive design is the practice of making a web page adjust well to different screen sizes and devices.
Common Mistakes to Avoid
- Forgetting closing tags, such as writing <p>Text without </p>, can cause later content to display incorrectly because the browser must guess where the element ends.
- Using an ID for repeated styling, such as putting id="card" on many elements, is wrong because IDs should be unique on a page and classes are better for reusable styles.
- Leaving units off CSS values, such as width: 300;, is wrong because most length values need units like px, %, rem, or em.
- Confusing padding and margin leads to layout errors because padding adds space inside the border, while margin adds space outside the element.
- Writing CSS that only works on one screen width is a mistake because users may view the page on phones, tablets, laptops, or large monitors.
Practice Questions
- 1 A div has width: 200px;, padding: 20px;, and border: 5px solid black;. If box-sizing is content-box, what is its total visible width?
- 2 A page has 4 cards in a flex container. Each card is 180px wide with 20px of margin on the left and 20px of margin on the right. What total horizontal space do the 4 cards need?
- 3 Write the CSS selector for all elements with class="warning", then write one rule that makes their text color red.
- 4 Why should a web page use semantic HTML tags like <header>, <nav>, <main>, and <footer> instead of using only <div> elements?
Understanding HTML & CSS Quick Reference
A web page is read as a document tree. Elements sit inside other elements, forming parent and child relationships. This structure affects styling and behavior.
A heading should describe the section below it, rather than being chosen only because it looks large. Navigation belongs in a navigation area. Main page content belongs in a main area.
Meaningful elements help screen readers describe the page to users who cannot see it. They help search tools and future editors understand the content too. Good structure makes a page easier to repair when the design changes.
CSS decisions follow rules called the cascade. More than one rule can match the same element, so the browser needs a way to choose. A more specific selector usually wins over a broad selector.
A rule written later can win when specificity is equal. Some properties, such as text color and font family, can pass from a parent element to its children. Others, such as margins and borders, do not normally pass down.
Students often struggle because a style appears to be ignored. In many cases, another rule is simply stronger or later in the stylesheet.
Element size is more complicated than the width written in CSS. Padding creates empty space inside the border. Margin creates space outside the border, between nearby elements.
A fixed width can cause trouble when a screen becomes narrow or when text grows larger. The box sizing property can make width calculations more predictable by including padding and borders within the stated width.
This matters for cards, buttons, forms, and image galleries. When a layout has an unexplained gap or extends past the screen edge, inspect margins, padding, widths, and borders before changing many random rules.
Flexible layouts work best when they allow content to choose sensible space. A row of cards may fit across a laptop screen but need to stack on a phone. Text should remain readable without forcing people to zoom.
Images need useful alternative text when they communicate information, and they should avoid stretching out of proportion. Relative sizing can help a page adapt, but it must be tested.
A breakpoint is not magic. It is a deliberate point where the current layout stops being comfortable or clear.
Careful testing is part of web design. Use the browser inspection tools to select an element and see which styles are active. Turn rules on and off one at a time.
Check the page at several window widths. Read the HTML nesting closely because one missing closing tag can affect a large section below it. Check links, keyboard focus, image descriptions, and color contrast.
Keep class names clear and reuse them for repeated patterns. Small, organized files are easier to understand than a page built from quick fixes.