1. Measurement Units
CSS uses various units to define lengths, sizes, and distances. These are divided into Absolute (fixed size) and Relative (size depends on something else).
A. Absolute Units
These units have a fixed size regardless of the screen size or font size.
| Unit | Name | Usage |
px | Pixels | The most common, representing one physical dot on a screen. Best for borders or small, fixed spacing. |
pt | Points | 1/72 of an inch (primarily for print stylesheets). |
B. Relative Units
These units are preferred for responsive design because they scale based on the user’s environment or the parent element.
| Unit | Name | Reference | Usage |
em | Em | Relative to the font size of the element itself. If a parent has font-size: 16px, then 1em inside the parent is $16\text{px}$. | Scales typography and spacing within a component. |
rem | Root Em | Relative to the font size of the root HTML element (<html>). This size is typically $16\text{px}$ by default. | Ideal for consistent spacing and layout measurements across the whole page. |
% | Percentage | Relative to the parent element. | Best for fluid widths and heights. |
C. Viewport Units
These units are relative to the size of the user’s browser window (viewport).
| Unit | Name | Reference |
vw | Viewport Width | $1\text{vw}$ is 1% of the viewport width. |
vh | Viewport Height | $1\text{vh}$ is 1% of the viewport height. |
vmin/vmax | Viewport Min/Max | 1% of the smaller/larger dimension (useful for ensuring an element fits). |
/* Examples of Unit Usage */
.header {
height: 10vh; /* Takes up 10% of the screen height */
}
.main-content {
width: 90%; /* Takes up 90% of the parent's width */
font-size: 1.25rem; /* 1.25 times the root font size (approx 20px) */
}
2. Color Models
CSS offers several ways to define colors, providing flexibility and precision.
| Model | Format | Example | Description |
| Hexadecimal | #RRGGBB or #RGB | #FF0000 (Red), #333 (Dark Gray) | The most common, using three pairs of hex values (00 to FF) for Red, Green, and Blue. |
| RGB | rgb(R, G, B) | rgb(255, 0, 0) | Uses three integer values (0 to 255) for Red, Green, and Blue. |
| RGBA | rgba(R, G, B, A) | rgba(0, 0, 0, 0.5) | Same as RGB, but adds Alpha (A) for opacity (0.0 fully transparent to 1.0 fully opaque). |
| HSL | hsl(H, S, L) | hsl(200, 50%, 50%) | Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). Easier for designers to manipulate. |
| Named Colors | Plain English | red, blue, transparent | A limited set of predefined names. |
.box {
background-color: #3498db; /* Hex code (Blue) */
color: hsl(0, 0%, 10%); /* HSL (Very dark gray) */
border: 1px solid rgba(255, 255, 255, 0.8); /* Transparent White border */
}
3. Essential Text Styling
Typography is critical for readability and aesthetics.
| Property | Purpose | Example Value |
font-family | Sets the typeface. Always include a generic family (e.g., serif, sans-serif) as a fallback. | 'Arial', sans-serif |
font-size | Sets the size of the font. Use relative units (rem) for best practice. | 16px or 1.1rem |
font-weight | Sets the boldness (usually 400 for normal, 700 for bold). | bold or 700 |
line-height | Sets the space between lines of text. Use a unitless number (e.g., 1.5) for best scaling. | 1.5 |
text-align | Aligns text horizontally. | left, center, right, justify |
text-decoration | Adds or removes lines. | none (to remove link underlines), underline |
text-transform | Changes text capitalization. | uppercase, lowercase, capitalize |
letter-spacing | Sets the space between characters. | 2px or -0.5px |
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.6; /* 1.6 times the font-size */
}
a {
text-decoration: none; /* Removes the default blue underline from links */
color: #007bff;
}
