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?