CSS Basics

CSS basics form the foundation of all styling. Understanding selectors, colors, the box model, and units is essential before moving to more complex layouts.

CSS Selectors

Selectors determine which elements are styled.

Element Selector

Targets all instances of a given HTML element:

h1 { color: navy; }
p { font-size: 16px; }

Class Selector

Targets elements with a specific class attribute. Prefixed with a dot (.):

.highlight { background: yellow; }
.card { border: 1px solid #ccc; }

HTML: <p class="highlight">This is highlighted.</p>

ID Selector

Targets a single element with a specific id. Prefixed with a hash (#):

#logo { width: 200px; }
#main-nav { background: #333; }

HTML: <div id="logo">...</div>

Use IDs sparingly — one per page, and prefer classes for reusable styles.

Universal Selector

Targets every element on the page:

* { margin: 0; padding: 0; box-sizing: border-box; }

Grouping Selectors

Apply the same styles to multiple selectors by separating with commas:

h1, h2, h3 { font-family: Arial, sans-serif; }

Descendant Selector

Targets elements nested inside another element:

article p { line-height: 1.8; }
/* Targets only <p> inside <article> */

Colors in CSS

CSS offers multiple ways to specify colors:

• Named colors: red, blue, green, tomato, rebeccapurple — 140+ named colors
• Hexadecimal (Hex): #FF5733 — six-digit code (RRGGBB). Can be shortened to 3 digits if pairs match: #F53
• RGB: rgb(255, 87, 51) — red, green, blue values (0–255 each)
• RGBA: rgba(255, 87, 51, 0.5) — RGB + alpha channel for opacity (0 to 1)
• HSL: hsl(9, 100%, 60%) — hue (0–360), saturation (0–100%), lightness (0–100%)
• HSLA: hsla(9, 100%, 60%, 0.5) — HSL + alpha

.example {
  color: #333;          /* dark gray hex */
  background: rgb(240, 240, 245);  /* light blue-gray */
  border-color: hsl(200, 50%, 40%); /* medium blue */
}

Backgrounds

The background shorthand sets all background properties:

.card {
  background: #fff url("pattern.png") no-repeat center/cover;
}

Individual properties:

• background-color — solid color
• background-image — image URL
• background-repeat — repeat, no-repeat, repeat-x, repeat-y
• background-position — center, top left, 50% 50%
• background-size — cover, contain, custom dimensions
• background-attachment — scroll, fixed, local

Borders

.box {
  border: 2px solid #333;          /* shorthand: width style color */
  border-radius: 8px;              /* rounded corners */
  border-top: 1px dashed red;      /* individual side */
  outline: 3px solid blue;         /* outline (outside border, not in box model) */
}

Border styles: solid, dashed, dotted, double, groove, ridge, inset, outset, none.

The Box Model

Every element in CSS is treated as a rectangular box consisting of:

+-------------------------------------------+
|              Margin (transparent)          |
|  +-------------------------------------+  |
|  |           Border                    |  |
|  |  +-------------------------------+  |  |
|  |  |        Padding                |  |  |
|  |  |  +-------------------------+  |  |  |
|  |  |  |      Content           |  |  |  |
|  |  |  |   (width x height)    |  |  |  |
|  |  |  +-------------------------+  |  |  |
|  |  +-------------------------------+  |  |
|  +-------------------------------------+  |
+-------------------------------------------+

• Content — the actual content (text, image)
• Padding — space between content and border (inside the element)
• Border — line around the padding
• Margin — space outside the border (between elements)

Box-Sizing

By default, width and height apply only to the content box. Padding and border add to the total size:

/* Default (content-box): width = content only */
.box { width: 300px; padding: 20px; border: 2px solid; }
/* Total width = 300 + 40 + 4 = 344px */
 
/* Border-box: width includes padding and border */
.box { width: 300px; padding: 20px; border: 2px solid; box-sizing: border-box; }
/* Total width = 300px (content shrinks to 256px) */

Always use box-sizing: border-box globally for intuitive sizing:

*, *::before, *::after { box-sizing: border-box; }

CSS Units

| Unit | Type | Description | |------|------|-------------| | px | Absolute | Pixels (1px = 1/96th of an inch) | | rem | Relative | Relative to root (<html>) font-size (default 16px) | | em | Relative | Relative to parent's font-size | | % | Relative | Percentage of parent element | | vw | Relative | 1% of viewport width | | vh | Relative | 1% of viewport height | | vmin | Relative | 1% of the smaller dimension (vw or vh) | | vmax | Relative | 1% of the larger dimension (vw or vh) | | cm, mm, in | Absolute | Physical units (rarely used on screen) |

Best practices:

• Use rem for font sizes (respects user's browser settings)
• Use % for widths of containers
• Use vw/vh for full-screen sections
• Use px for borders, shadows, and precise spacing