CHEATSHEET
Cheatsheet HTML & CSS
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental technologies for building web pages. HTML provides the structure of the page, while CSS is used to control the presentation, formatting, and layout.
Here are some key concepts and examples to help you get started with HTML and CSS:
 Concept |
 HTML |
 CSS |
 What it Does |
|---|---|---|---|
| Basic Structure | |
__ | Defines page structure |
| Headings | <h1> → <h6> |
font-size, font-weight |
Titles & hierarchy |
| Paragraph | <p> |
line-height, margin |
Text content |
| Bold / Italic | <strong>, <em> |
font-weight, font-style |
Text emphasis |
| Link | <a href=""> |
color, text-decoration |
Creates hyperlink |
| Image | <img src="" alt=""> |
width, height |
Displays image |
| List (bullet) | <ul><li> |
list-style |
Unordered list |
| List (numbered) | <ol><li> |
list-style-type |
Ordered list |
| Table | <table>, <tr>, <td>, <th> |
border, border-collapse |
Data table |
| Form | <form>, <input> |
padding, border |
User input |
| Button | <button> |
background-color, cursor |
Clickable button |
| Container | <div> |
display, margin |
Block container |
| Inline container | <span> |
color, font-size |
Inline styling |
| Layout section | <section> |
margin, padding |
Thematic grouping |
| Navigation | <nav> |
display: flex |
Navigation menu |
| Header / Footer | <header>, <footer> |
background-color |
Page top/bottom |
Box Model (Very Important)
The CSS box model describes how elements are structured in terms of their content, padding, border, and margin.
Here’s a breakdown of the box model:
| Layer | HTML | CSS Property | Meaning |
|---|---|---|---|
| Content | Text/element | width, height |
Actual content |
| Padding | __ | padding |
Space inside border |
| Border | __ | border |
Edge around content |
| Margin | __ | margin |
Space outside element |
Positioning & Display
CSS positioning and display properties control how elements are laid out on a web page.
Here are some key concepts:
| Concept | CSS | What it Does |
|---|---|---|
| Block element | display: block; |
Takes full width of container |
| Inline element | display: inline; |
stays in line with surrounding content |
| Inline-block | display: inline-block; |
Behaves like inline but allows setting width and height |
| Flexbox | display: flex; |
Creates a flexible container for aligning and distributing space among items |
| Relative | position: relative; |
Positioned relative to its normal position |
| Absolute | position: absolute; |
Positioned relative to the nearest positioned ancestor |
| Fixed | position: fixed; |
Positioned relative to the viewport, stays in place during scrolling |
| Sticky | position: sticky; |
Switches between relative and fixed based on scroll position |
| Clear float | clear: left; |
Clears floats on the left side of an element |
| Grid | display: grid; |
Creates a grid layout for arranging items in rows and columns |