programmes CSS Getting Started CSS Fundamentals

CSS Fundamentals

Uploaded : 4 months ago Updated : 4 months ago beginner

Take The Quiz

The properties you will use daily

You know how a rule is built. Here are the essential properties for colour, text, the box model and layout.

Common properties

Every element is a box: content, then padding, then border, then margin. Understanding this is the key to spacing and sizing.

.card {
  padding: 16px;     /* inside */
  border: 1px solid #ddd;
  margin: 12px;      /* outside */
}

Use box-sizing: border-box

It makes width include padding and border, so sizing stays predictable. Many projects set it globally: * { box-sizing: border-box; }

Flexbox arranges items in a row or column with easy alignment — ideal for navbars, cards and centring.

.row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

Avoid fixed pixels everywhere

Prefer relative units (rem, %, fr) and Flexbox/Grid so your layout adapts to any screen.

What’s the difference between margin and padding?

Margin is space OUTSIDE the border; padding is space INSIDE, between content and border.

Flexbox or Grid?

Flexbox for one-dimensional layouts (a row or a column); Grid for two-dimensional layouts (rows and columns together).

px, em or rem?

Use rem for font sizes and spacing (scales with the root font); use px only when you truly need a fixed size.