Skip to main content

​
What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls:
  • Colors and backgrounds
  • Fonts and typography
  • Spacing and layout
  • Animations and transitions
  • Responsive design

​
The “Cascade” in CSS

CSS applies styles in order of specificity (from lowest to highest):
  1. Browser default styles (user agent)
  2. External stylesheets (<link>)
  3. Internal styles (<style> in <head>)
  4. Inline styles (style="...")
  5. !important (avoid using)
Avoid using !important as it makes code harder to maintain and debug. Use proper specificity instead.

​
Basic Syntax

selector {
  property: value;
  property: value;
}

​
Example from our project:

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-gray-600);
  background-color: var(--color-gray-100);
}

​
CSS Reset

Browsers apply default styles that vary between them. A “reset” normalizes these styles for consistency.

​
Modern CSS Reset (Box-Sizing)

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
The * selector targets all elements. Using box-sizing: border-box makes width calculations more predictable.

​
Why box-sizing: border-box?

/* Width calculation:
 * Total = width + padding + border
 */
.box {
  width: 100px;        /* Content width */
  padding: 20px;       /* +40px */
  border: 2px solid;   /* +4px */
  /* Total width = 144px! */
}

​
HTML & Body Setup

html {
  scroll-behavior: smooth;
  font-size: 16px; /* 1rem = 16px */
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 100vh; /* Always fill viewport height */
  
  /* Smooth font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

​
Key Properties Explained

  • scroll-behavior: smooth - Animates navigation to anchor links instead of jumping
  • min-height: 100vh - 100vh = 100% of viewport height, ensures body fills screen
  • Font smoothing properties improve text rendering on different browsers

​
Element Resets

​
Images

img {
  display: block;     /* Removes inline spacing */
  max-width: 100%;    /* Prevents overflow */
  height: auto;       /* Maintains aspect ratio */
}

​
Lists

ul, ol {
  list-style: none;   /* Removes bullets/numbers */
}

a {
  text-decoration: none;
  color: inherit;     /* Uses parent color */
}

​
Buttons

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;      /* Buttons have their own font by default */
  color: inherit;
}

​
Inputs

input, textarea {
  border: 1px solid var(--color-gray-300);
  font: inherit;
  outline: none;      /* Remove default, add custom focus */
}
When using outline: none, always provide an alternative focus indicator for accessibility.

​
Accessibility: Focus States

input:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
  • :focus-visible only shows focus ring during keyboard navigation, not mouse clicks
  • outline-offset creates space between the outline and element border

​
Next Steps

Now that you understand CSS basics and resets, let’s explore:

Selectors

Learn different ways to target elements

Variables

Create reusable design tokens

Box Model

Master spacing and sizing

BEM Methodology

Write maintainable CSS

Build docs developers (and LLMs) love

Get started for freeTalk to us