Buzzmatic

CSS Basics: Designing and Structuring Websites

CSS determines how a website looks. Here you learn the structure of CSS rules, the most important selectors and modern layout techniques like Flexbox and Grid.

Beginner7 min readLast updated: July 20, 2026

What you will learn

  • What CSS is and why content and presentation are separated
  • How the browser generates the display from CSS
  • How a CSS rule is structured from selector and declaration
  • Which selectors there are and how cascade, specificity and inheritance work
  • How to embed CSS and which modern layout techniques there are

What is CSS?

CSS stands for Cascading Style Sheets and is the stylesheet language with which you define the appearance of web pages. While HTML defines the structure and meaning of content, CSS determines how this content is presented – on screen, in print or via speech output. Alongside HTML and JavaScript, CSS is one of the three core languages of the open web; its standardization is driven forward by the World Wide Web Consortium (W3C).

The core idea: separation of content and presentation

A central principle of modern web design is the separation of content (HTML) and presentation (CSS). In the past, formatting was embedded directly into the HTML code, which led to cluttered, hard-to-maintain code. With CSS, HTML only takes care of structure, CSS exclusively of the visual appearance. This brings clear advantages:

  • Maintainability: design changes run centrally via the CSS file, not via every single HTML document.
  • Flexibility: the same content can be presented differently with different stylesheets.
  • Clean code: HTML documents stay lean and focused on their structure.
  • Accessibility: content remains accessible even without CSS, for example for screen readers.

How does CSS work?

When a browser loads a page, it goes through several steps until the content becomes visible:

  1. HTML parsing and DOM: the browser reads the HTML and builds the Document Object Model (DOM) from it, a tree structure of all elements.
  2. Loading resources: images, scripts and CSS files are loaded.
  3. CSS parsing: the style rules are analyzed and prepared.
  4. Render tree: the browser combines DOM and CSS rules and determines the applicable styles per element – taking cascade, specificity and inheritance into account.
  5. Layout (reflow): the size and position of each element are calculated.
  6. Painting: the elements are drawn on the screen with their styles.

The structure of a CSS rule

Every CSS rule consists of a selector and a declaration block in curly braces. The block contains one or more declarations, each consisting of a property and a value, separated by a colon and ended with a semicolon.

Here, h2 is the selector that specifies which elements the rule affects. font-family is a property, Verdana its value.

The structure of a CSS rule h2 { color : navy ; } PROPERTY VALUE SELECTOR DECLARATION BLOCK

A CSS rule consists of a selector, curly braces and declarations made of property and value.

Selectors: selecting elements specifically

Selectors define which elements a rule affects. The most important types:

  • Type selectors: target all elements of a type (p for all paragraphs).
  • Class selectors: target elements with a class (.highlight). An element can have multiple classes.
  • ID selectors: target a single element with a unique ID (#navigation).
  • Attribute selectors: target attributes (input[type="submit"]).
  • Pseudo-classes: select by state or position, e.g. :hover, :focus or :nth-child().
  • Pseudo-elements: style parts of an element, such as ::before, ::after or ::first-letter.
  • Combinators: define relationships, e.g. descendants (div p) or child (ul > li).

Cascade, specificity and inheritance

Three concepts decide which rule applies when several match:

  • Cascade: the order in which stylesheets and rules are merged (author, user and browser stylesheets).
  • Specificity: determines the precedence. More complex selectors like ID selectors have a higher specificity than simple type selectors.
  • Inheritance: certain properties like color or font-family are passed from the parent to the child element, provided no more specific rule applies there.

Embedding CSS into the web page

There are three ways to integrate CSS:

External stylesheet (recommended): the rules are in a separate .css file that is linked in the <head>. Advantages: central maintenance, browser caching, clean separation.

Internal stylesheet: the rules are placed directly in the <head> within <style> tags. Useful for styles that only affect a single page.

Inline style: the rules are assigned to a single element via the style attribute. They have the highest specificity, but complicate maintenance and should be used sparingly.

Advanced concepts

CSS has evolved enormously. Instead of monolithic versions like "CSS3", it is today regarded as a living standard of individual modules (e.g. CSS Color Module Level 5) that are developed independently. Important techniques:

  • Box model: describes elements as boxes made of content, padding, border and margin.
  • Flexbox: one-dimensional layout for arranging elements in a row or column.
  • Grid layout: two-dimensional system for complex grid structures.
  • Media queries: basis for responsive design – rules apply depending on screen width, resolution or orientation.
  • CSS variables (custom properties): reusable values for colors or sizes.
  • Transitions and animations: smooth transitions and keyframe-based movements.

Tools and SEO relevance

The browser developer tools help with working on CSS: with the inspector you analyze HTML and CSS live and test changes. The W3C CSS Validation Service checks your code for validity, and editors like VS Code offer syntax highlighting and auto-completion.

CSS is not directly evaluated by search engines, but a clean, well-structured code base has an indirect positive effect on SEO – for example via faster loading times. How to optimize these is shown in the article on PageSpeed optimization.

Conclusion

CSS is far more than "making websites pretty". It significantly shapes how we experience the web. The separation of content and presentation, the flexibility for different devices and the continuous evolution make CSS an indispensable part of modern web development. A good understanding of the basics – rule structure, selectors, cascade and embedding – is the basis for appealing, user-friendly and maintainable pages. You then add interactivity with JavaScript.

FAQ

Frequently asked questions

HTML takes care of the structure and meaning of the content, CSS exclusively of the appearance. This separation makes websites more maintainable, more flexible and more accessible, because design changes happen centrally in the stylesheet.

The external stylesheet. It allows central maintenance, is cached by the browser and cleanly separates content from design. Internal stylesheets and inline styles are special cases for individual pages or elements.

Flexbox is a one-dimensional layout model for arranging elements in a row or column. Grid is two-dimensional and is suited to complex grid structures with columns and rows.

Not directly – search engines do not rate CSS as a ranking factor. Indirectly, however, a clean code base helps, for example through faster loading times and better accessibility.

Quiz

Test your knowledge

Five questions on the CSS basics.

Question 1 of 5

What is the core idea behind CSS?