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
Intro
CSS
CSS is the style language of the web. It controls how structured documents appear on screens, on paper, and in other media. You use it to set color, typography, spacing, layout, visual states, and adaptation to the available space.
HTML gives content meaning and structure. CSS turns that structure into a presentation. Keeping these responsibilities separate lets one document support different layouts, themes, and output conditions without rewriting its content.
CSS is not a list of isolated decoration commands. It is a rule system. A browser matches rules to elements, resolves competing declarations, computes values, creates boxes, and lays those boxes out. That sequence is the durable mental model for understanding CSS.
Read a rule from the outside in
A style rule combines a selector with a declaration block.
.notice {
color: #17324d;
padding: 1rem;
border-inline-start: 0.25rem solid #2f6feb;
}
The selector .notice matches elements with that class. Each declaration pairs a property with a value. Here, color, padding, and border-inline-start are properties.
A declaration only matters when its selector matches and its value is valid. Unsupported or invalid declarations are ignored according to CSS error-handling rules. This behavior supports progressive enhancement: provide a sound baseline, then add newer features.
Prefer classes for reusable styling. Type selectors work well for broad document defaults. Attribute selectors and pseudo-classes express state or structure. IDs are valid selectors, but their high specificity can make ordinary overrides harder.
The cascade resolves conflicts
Several declarations can target the same property on the same element. The cascade selects the winning declaration by considering origin and importance, cascade layer, specificity, scoping proximity when applicable, and source order.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
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
