CSS
Cascading Style Sheets
In short
CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
What is CSS?
CSS tells the browser how to present the elements described in HTML. You write rules that select elements and give values to properties, such as color, font-size, or margin, and the browser applies them when it draws the page.
The word cascading refers to how the browser decides which rule wins when several rules target the same element. It weighs where each rule comes from, how specific its selector is (an ID beats a class, which beats a tag name), and the order in which rules appear. Understanding the cascade and specificity is the key to debugging styles that seem to be ignored.
Modern CSS includes strong layout systems: Flexbox for arranging items in a single row or column, and Grid for two-dimensional layouts with rows and columns. Media queries and container queries let a design adapt to different screen sizes, which is called responsive design. Custom properties, also known as CSS variables, let you reuse values like brand colors across a whole site.
CSS is often confused with preprocessors such as Sass or utility frameworks such as Tailwind. Those are tools that generate or organize CSS, but the browser itself only understands plain CSS.
Key takeaways
- CSS controls the visual presentation of HTML.
- A rule is a selector plus one or more property and value pairs.
- The cascade and specificity decide which rule wins in a conflict.
- Flexbox and Grid are the main tools for page layout.
- Media queries make designs responsive to screen size.
Example
/* A reusable color stored in a custom property */
:root {
--brand: #2563eb;
}
/* Select every element with the class "button" */
.button {
background-color: var(--brand);
color: white;
padding: 0.5rem 1rem;
}
/* Slightly fade the button on mouse hover */
.button:hover { opacity: 0.9; }Readers ask
Is CSS a programming language?
CSS is usually described as a style sheet language rather than a general-purpose programming language. It is declarative: you describe how things should look, and the browser works out how to draw them.
What is the difference between Flexbox and Grid?
Flexbox arranges items along a single row or column, which suits navigation bars and toolbars. Grid arranges items in rows and columns at the same time, which suits full page layouts and card galleries.
What does specificity mean in CSS?
Specificity is the weight the browser gives each selector to decide which rule applies when several match the same element. ID selectors are more specific than class selectors, and class selectors are more specific than element selectors.
See also
- HTMLWeb Development, p. 18HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
- JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
- DOMWeb Development, p. 13The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
- FrameworkProgramming Fundamentals, p. 20A framework is a reusable foundation of code, tools, and conventions that provides the structure of an application, so developers only fill in their own logic.
- Responsive DesignWeb Development, p. 38Responsive design is an approach to building web pages whose layout, images, and text adapt automatically to any screen size, from phones to large monitors.
- Tailwind CSSWeb Development, p. 46Tailwind CSS is a utility-first CSS framework: instead of custom stylesheets, you style elements with small, single-purpose classes right in your HTML.
Sources
Spotted a mistake or something missing on this page?Suggest an edit