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 | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Don't Panic
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/
Supports
- CSS as a core open web language for fonts, colors, spacing, and document styling
- Modular CSS specifications and snapshots rather than one monolithic current version
- W3C learning, specification, browser, and validation resource map
- https://www.w3.org/TR/selectors-4/
Supports
- Selectors as patterns matched against elements in a document tree
- Type, class, ID, attribute, pseudo-class, pseudo-element, and combinator terminology
- Specificity and selector error handling
- https://www.w3.org/TR/css-cascade-5/
Supports
- Declaration value processing, cascade sorting order, origins, and importance
- Cascade layers, specificity ordering, source order, inheritance, and defaulting
- Important declarations and CSS-wide keywords
- Custom properties participating in the cascade through referenced modules
- https://www.w3.org/TR/css-box-4/
Supports
- Transformation of document content into boxes
- Content, padding, border, and margin areas and edges
- Margin and padding properties and transparent margins
- https://www.w3.org/TR/css-sizing-3/
Supports
- Content-box and border-box sizing behavior
- Preferred, minimum, maximum, and intrinsic sizes
- Sizing terminology used by layout modules
- https://www.w3.org/TR/css-display-4/
Supports
- Inner and outer display types
- Block, inline, flow, flow-root, flex, grid, and display-none behavior
- Box generation and formatting contexts
- https://www.w3.org/TR/css-flexbox-1/
Supports
- One-dimensional Flexbox model with main and cross axes
- Flex containers, flex items, direction, wrapping, sizing, ordering, and alignment
- Flex item minimum sizing and free-space distribution
- https://www.w3.org/TR/css-grid-2/
Supports
- Two-dimensional grid-based layout system
- Lines, tracks, cells, areas, explicit placement, auto-placement, and alignment
- Flexible and intrinsic track sizing, nesting, and subgrid
- Visual reordering not changing document order or non-visual navigation order
- https://www.w3.org/TR/css-position-3/
Supports
- Static, relative, absolute, sticky, and fixed positioning schemes
- Containing blocks, inset properties, and normal-flow effects
- https://www.w3.org/TR/css-values-4/
Supports
- Shared CSS value-definition grammar and generic value types
- Absolute, font-relative, viewport-relative, and container-relative units
- Percentages, calculations, and minimum, maximum, and clamp functions
- https://www.w3.org/TR/css-variables-1/
Supports
- Author-defined custom properties with double-dash names
- Cascade and inheritance behavior of custom properties
- Variable references and fallback values
- https://www.w3.org/TR/mediaqueries-5/
Supports
- Media queries as logical tests of user-agent and device characteristics
- Width, display, interaction, color, scripting, and user-preference features
- Query composition, range syntax, evaluation, and error handling
- https://www.w3.org/TR/css-contain-3/
Supports
- Size, layout, style, and paint containment
- Establishing query containers
- Container size and style queries
- https://www.w3.org/TR/css-overflow-3/
Supports
- Overflow areas, clipping, and scroll containers
- Overflow property behavior when content exceeds a box
- https://www.w3.org/TR/WCAG22/
Supports
- Text contrast, non-text contrast, focus visibility, reflow, text spacing, and color requirements
- Content order and meaningful sequence requirements
- Motion, zoom, and adaptable presentation considerations
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
Supports
- Guided beginner progression through syntax, selectors, cascade, box model, values, overflow, and debugging
- Practice challenges and skill tests used in the links progression
- Browser developer tools as a CSS debugging aid
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction
Supports
- Normal flow as the default layout baseline
- Selection among modern page layout methods based on their intended relationships
- Source structure remaining useful before layout overrides
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
Supports
- Responsive design through flexible layouts, media queries, and the viewport
- Content-driven breakpoints rather than fixed device categories
- Guided practice used to support the responsive-design quiz judgement
- https://jigsaw.w3.org/css-validator/
Supports
- W3C service for checking CSS syntax and property validity
