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

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/
  • 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/