openskills.info
CSS logoCourse Preview

CSS

CSS (Cascading Style Sheets) controls how HTML elements appear on screen: colors, fonts, spacing, layout, and responsive behavior. It separates visual presentation from document structure, letting designers change a site's look without altering its markup.

itWeb development

Don't Panic - CSS

CSS is the style language of the web. It controls how structured documents appear on screens, on paper, and in other media: color, typography, spacing, layout, visual states, and adaptation to available space. HTML gives content meaning and structure. CSS turns that structure into presentation. Keeping those responsibilities separate lets one document support different layouts and themes without rewriting its content.

CSS is a rule system, not a bag of decoration commands. A browser matches selectors to elements, resolves competing declarations through the cascade, computes values, creates boxes, and lays those boxes out. A style rule pairs a selector with declarations. Invalid declarations are ignored, which supports progressive enhancement when you provide a sound baseline first and add newer features carefully.

The cascade considers origin and importance, cascade layers, specificity, scoping when applicable, and source order. Specificity is only one part. Inheritance fills in some properties from parents when nothing is declared. Every element participates through boxes with margin, border, padding, and content. Box-sizing changes whether width includes padding and border, so pick one sizing model for the project.

Layout starts with normal flow. Flexbox handles one-dimensional rows or columns. Grid handles two-dimensional tracks. Positioning is for offsets and overlays, not the first tool for ordinary page structure. Prefer classes for reusable styling and keep selectors as specific as the component requires.

Read the Intro for rules, cascade, and boxes. Use the Cheatsheet when you need selector, cascade, and layout anchors. Updates tracks the W3C CSS home page where the modular specification map for this language is maintained.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources

  • https://www.w3.org/Style/CSS/
  • https://www.w3.org/TR/selectors-4/
  • https://www.w3.org/TR/css-cascade-5/
  • https://www.w3.org/TR/css-box-4/
  • https://www.w3.org/TR/css-sizing-3/
  • https://www.w3.org/TR/css-display-4/
  • https://www.w3.org/TR/css-flexbox-1/
  • https://www.w3.org/TR/css-grid-2/
  • https://www.w3.org/TR/css-position-3/
  • https://www.w3.org/TR/css-values-4/
  • https://www.w3.org/TR/css-variables-1/
  • https://www.w3.org/TR/mediaqueries-5/
  • https://www.w3.org/TR/css-contain-3/
  • https://www.w3.org/TR/css-overflow-3/
  • https://www.w3.org/TR/WCAG22/
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
  • https://jigsaw.w3.org/css-validator/