A powerful styling language that defines the look and formatting of web documents
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts, allowing the same HTML page to be presented in different styles for different rendering methods.
First proposed by Håkon Wium Lie in 1994, CSS has become a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is maintained by the World Wide Web Consortium (W3C) and has evolved through several versions, with CSS3 (modularized into smaller specifications) being the current standard.
CSS works by associating style rules with HTML elements. These rules specify how the elements should be rendered on screen, in print, or in other media. The "cascading" part of the name refers to the way multiple style rules can combine and interact to determine the final presentation of an element.
CSS files are text files containing rules that define how HTML elements should be displayed. The basic structure consists of selectors (which identify the HTML elements to style) and declarations (which specify the styles to apply). Declarations contain properties and values, such as "color: blue" or "font-size: 14px". Modern CSS includes advanced features like media queries, animations, flexbox and grid layouts, and variables.
The primary use of CSS is for styling websites and web applications. Developers use CSS to define layouts, colors, typography, spacing, and responsive behavior. Modern websites rely heavily on CSS for their visual appearance and user experience, from simple blogs to complex web applications. CSS enables designers to create visually appealing and consistent interfaces across an entire website.
CSS media queries allow websites to adapt their layout and styling based on the viewing device's characteristics. This is essential for creating websites that work well on everything from large desktop monitors to small mobile screens. CSS provides the tools for fluid layouts, flexible images, and conditional styling that make responsive design possible.
CSS is integral to creating the user interfaces of web applications. Features like CSS Grid and Flexbox provide powerful layout options, while transitions and animations create smooth, interactive experiences. CSS frameworks like Bootstrap and Tailwind CSS help developers quickly build consistent, professional interfaces with predefined components and utilities.
CSS includes specific media types and properties for print output, allowing developers to define how web pages should appear when printed. This includes setting page margins, controlling which elements appear in print, and optimizing typography and layout for paper output. Well-designed print stylesheets can transform a web page into a document that looks professional when printed.
CSS is used to style HTML email templates, though with significant limitations due to inconsistent CSS support across email clients. Despite these challenges, CSS remains essential for creating visually appealing email newsletters and marketing materials. Email-specific CSS techniques have evolved to work around client limitations while still providing attractive designs.
CSS support varies across different web browsers:
CSS is well-supported in development tools:
CSS works with various web technologies:
| Feature | CSS | Sass/SCSS | Inline Styles | CSS-in-JS | XSLT |
|---|---|---|---|---|---|
| Separation of Concerns | |||||
| Maintainability | |||||
| Feature Set | |||||
| Performance | |||||
| Learning Curve | |||||
| Browser Support |
CSS provides an excellent balance of features, browser support, and separation of concerns. Preprocessors like Sass extend CSS with programming features, while CSS-in-JS offers component-based styling for JavaScript frameworks. Inline styles are simple but limit reusability, and XSLT is primarily for XML transformation rather than styling.
When moving from inline styles to external CSS, identify patterns and create reusable classes. Extract style attributes from HTML elements and organize them into logical groups in your CSS file. Use class names that reflect the purpose rather than appearance (e.g., "primary-button" instead of "blue-button"). This improves maintainability and reduces duplication.
Most preprocessors compile directly to CSS, but if you need to manually convert, focus on removing preprocessor-specific features like variables, mixins, and nesting. Replace variables with their actual values, expand mixins into their full CSS, and flatten nested selectors into standard CSS selectors with appropriate specificity. Tools like SassMeister can help with this conversion.
Extract the style objects or template literals from your JavaScript components and convert them to standard CSS syntax. Replace camelCase property names with hyphenated CSS names (e.g., "backgroundColor" becomes "background-color"). Extract dynamic styling logic into multiple CSS classes and use JavaScript to apply the appropriate classes based on conditions.
When converting CSS to a preprocessor like Sass, start by changing the file extension and identifying opportunities for variables, mixins, and nesting. Look for repeated values (colors, dimensions, font stacks) and convert them to variables. Group related selectors using nesting, and create mixins for repeated patterns. This conversion can make your styles more maintainable and DRY (Don't Repeat Yourself).
Converting external CSS to inline styles should generally be avoided for maintainability reasons, but may be necessary for HTML emails or certain performance optimizations. Extract the relevant styles for each element and add them to style attributes. Tools like Juice can automate this process for HTML emails by parsing your CSS and applying the appropriate styles to each element.
When moving to a CSS-in-JS solution, convert CSS selectors to JavaScript objects or template literals based on your chosen library. Convert hyphenated property names to camelCase (e.g., "background-color" becomes "backgroundColor"), and string values need proper quoting. Dynamic styles can be implemented as functions or conditional expressions within your components.