CSS Cheatsheet
1. What is CSS + How to Write It
CSS controls how HTML looks. Without CSS, every page looks the same.
Three ways to write CSS:
Inline — directly on the element.
<h1 style="color: red;">Hello</h1>- Quick but messy
- Hard to maintain
- Avoid this
Internal — inside a <style> tag in <head>.
<head>
<style>
h1 {
color: red;
}
</style>
</head>- Good for small experiments
- Everything in one file
External — a separate .css file linked to your HTML.
<head>
<link rel="stylesheet" href="style.css">
</head>h1 {
color: red;
}- Best practice
- One CSS file styles the whole site
- Always use this
CSS rule structure
selector {
property: value;
}- selector = what you want to style
- property = what you want to change
- value = what you want to change it to
2. Selectors
Selectors tell CSS which element to style.
Element selector — targets all elements of that type.
p {
color: blue;
}- Styles every <p> on the page
Class selector — targets elements with a specific class. Uses .
<p class="intro">Welcome</p>.intro {
color: blue;
}- Reusable. Multiple elements can share a class.
ID selector — targets one specific element. Uses #
<h1 id="title">Hello</h1>#title {
color: blue;
}- Unique. Only one element per ID.
3. Colors + Backgrounds
Text color
p {
color: red;
}Background color
div {
background-color: #0F172A;
}Color formats
color: red; /* Named color */
color: #C2410C; /* Hex */
color: rgb(194, 65, 12); /* RGB */
color: rgba(0, 0, 0, 0.5); /* RGB with opacity */- Hex is the most common in real projects
- rgba lets you control transparency. 0 = invisible, 1 = solid.
Background image
div {
background-image: url("images/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}- cover = fill the whole area
- center = keep the image centered
- no-repeat = show the image once
4. Typography
Font family
body {
font-family: "Poppins", sans-serif;
}- Always add a fallback (sans-serif)
Font size
h1 {
font-size: 48px;
}Font weight
p {
font-weight: bold;
}- Common values: normal, bold, 100–900
- 400 = normal, 700 = bold
Text alignment
h1 {
text-align: center;
}- Values: left, center, right
Line height
p {
line-height: 1.6;
}- Controls space between lines
- 1.6 is a good default for readability
Text decoration
a {
text-decoration: none;
}- none removes the underline from links
- underline adds one
Text transform
h1 {
text-transform: uppercase;
}- uppercase, lowercase, capitalize
5. Box Model
Every element is a box. The box model defines the space around it.
┌──────────────────────────────┐
│ margin │
│ ┌────────────────────────┐ │
│ │ border │ │
│ │ ┌──────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └────────────┘ │ │ │
│ │ └──────────────────┘ │ │
│ └────────────────────────┘ │
└──────────────────────────────┘Padding — space inside the border, around the content.
div {
padding: 20px;
}Margin — space outside the border, between elements.
div {
margin: 20px;
}Border — the line around the element.
div {
border: 2px solid #0F172A;
}- Format: width style color
- Styles: solid, dashed, dotted, none
Border radius — rounds the corners.
div {
border-radius: 8px;
}Shorthand
padding: 10px; /* all sides */
padding: 10px 20px; /* top/bottom left/right */
padding: 10px 20px 30px 40px; /* top right bottom left */Same shorthand works for margin.
Box sizing
* {
box-sizing: border-box;
}- border-box = padding and border are included in the width
- Always add this at the top of your CSS
Summary
| Category | Properties |
|---|---|
| Connection | <link>, <style>, inline style="" |
| Selectors | element, .class, #id |
| Colors | color, background-color, hex, rgb, rgba |
| Backgrounds | background-image, background-size, background-position |
| Typography | font-family, font-size, font-weight, text-align, line-height, text-decoration, text-transform |
| Box Model | margin, padding, border, border-radius, box-sizing |