What Is CSS? Styling and Layout for Beginners

How a CSS rule works

A rule has a selector followed by a block of declarations. Each declaration is a property and a value, ending with a semicolon. You usually keep rules in a separate file and link it from the <head> of your HTML document.

.card {
  padding: 1.5rem;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
}

Here .card is a class selector, so the rule applies to every element with class="card". Other common selectors target element names such as p, IDs such as #signup, attributes such as [type="email"] and states such as :hover or :focus-visible.

The cascade, specificity and inheritance

When several rules set the same property on the same element, the browser picks a winner. Understanding the order it uses saves hours of confusion.

• Specificity: an ID selector beats a class, and a class beats an element selector. Inline styles beat all three.
• Source order: when specificity is equal, the rule that appears later wins.
• Inheritance: some properties, such as color and font-family, pass from parent to child automatically; others, such as margin and border, do not.
• Importance: !important overrides normal rules, which is why overusing it creates styles that are hard to change later.

The box model

Every element is a rectangular box made of content, padding, border and margin. By default, width sets only the content area, so padding and border make the box wider than you expect. Most projects switch to a more predictable model at the top of the stylesheet.

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

With border-box, a box with width: 300px stays 300 pixels wide whatever padding and border you add.

Layout with flexbox

Flexbox arranges items in one direction, either a row or a column. It is ideal for navigation bars, button groups and aligning items vertically.

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

justify-content distributes items along the main axis, align-items aligns them on the cross axis and gap adds space between them without margins on each item.

Layout with CSS grid

Grid works in two dimensions, rows and columns at once, which suits card listings, galleries and whole-page layouts.

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

This single rule creates as many columns as fit, each at least 220 pixels wide, and wraps the rest onto new rows. On a phone you get one column and on a wide screen you get four or five, with no media query needed.

Organising CSS as a project grows

A stylesheet for one page is easy to manage. A stylesheet for a fifty-page site becomes messy quickly unless you follow a few conventions from the start.

• Start with a short base layer: the box-sizing reset, body font, default link colours and heading sizes.
• Write reusable components next, such as .button, .card and .site-nav, each in its own clearly commented block or file.
• Name classes after what a component is, not how it looks today. .alert-error survives a redesign; .red-text does not.
• Group related declarations in the same order every time, for example layout first, then spacing, then typography, then colour.
• Use cascade layers (@layer) when you combine your own styles with third-party CSS, so the order of precedence is explicit rather than accidental.

Consistent naming also makes it easier to select elements from scripts, because a clear class such as .product-card tells you exactly what you are working with.

Responsive design and custom properties

Responsive design means one page that works on every screen size. Write the mobile styles first, then use media queries to add changes for wider screens. Custom properties, often called CSS variables, keep colours and spacing consistent across the whole site.

:root {
  --brand: #0b5fff;
  --space: 1rem;
}
.button { background: var(--brand); padding: var(--space); }

@media (min-width: 768px) {
  :root { --space: 1.5rem; }
}

Change --brand once and every element that uses it updates. Modern CSS also offers clamp() for fluid font sizes, container queries for components that adapt to their own width, and native nesting, all supported in current browsers.

Once your layouts feel natural, add interaction with JavaScript events. The online web development classes at SkillNewton use projects like a responsive landing page to practise these skills together.

Common mistakes

• Fixing widths in pixels everywhere, which breaks layouts on small screens instead of letting content flow.
• Reaching for !important to win a specificity battle rather than simplifying the selectors involved.
• Removing the focus outline for appearance without providing a visible :focus-visible style, which harms keyboard users.
• Choosing text and background colours with low contrast, which makes content hard to read in sunlight or for people with low vision.
• Using margins on every child to create spacing when gap on a flex or grid container would be simpler.

Frequently asked questions