CSS, short for “cascading style sheets,” is a stylesheet language for describing the visual style of an HTML or XML document (including XML dialects such as SVG, MathML, or XHTML). Whether on a computer screen, in print, or through spoken words, CSS specifies how elements should be rendered.
CSS is one of the cornerstone languages of the free and open web; it follows W3C standards and is supported by all major browsers. Once upon a time, the various components of the CSS specification were developed simultaneously, allowing for versioning of the most up-to-date recommendations. Among the many versions of CSS, you may be familiar with CSS1, CSS2.1, and CSS3. There will be no such thing as CSS3 or CSS4, as all CSS is now simply CSS.
Since CSS 2.1’s release, the scope of the specification has grown substantially, and the progress on various CSS modules has diverged to the point where it is more efficient to develop and release recommendations separately per module. In place of releasing new versions of the CSS specification at regular intervals, the W3C now captures a snapshot of the current stable state of the specification and the development of its individual modules at regular intervals. Levels, or versions, of CSS modules are now available, such as CSS Color Module Level 5.
Key resources
First Look at Cascading Style Sheets
If you’re just getting started with web development, our article on CSS fundamentals will help you get up to speed quickly.
Free CSS Resources
In our CSS tutorials, we cover all the bases, from the absolute basics to advanced techniques.
CSS Citation
Tutorials
Several modules can be found in our CSS Learning Area, and they all start from scratch and teach you CSS from scratch.
CSS first steps
Web pages can be styled and laid out using CSS (Cascading Style Sheets) to do things like change the font, colour, size, and spacing of text, add animations and other decorative features, and more. This module will help you ease into learning CSS by teaching you the language’s fundamentals, including how it operates, its syntax, and some simple examples of how you can use it to style HTML.
CSS building blocks
This module builds on the foundation laid in the previous ones, assuming that you have already familiarised yourself with the fundamentals of CSS and have some experience with its syntax and application. Cascade and inheritance, units, sizing, styling backgrounds and borders, debugging, and much more are covered in this module.
The goal of this guide is to equip you with the knowledge and skills necessary to write competent CSS by first covering the foundational theories upon which the language rests.
CSS styling text
Once you’re comfortable with the CSS language’s fundamentals, you can move on to one of the most frequent uses of CSS: styling text. We’ll go over the basics of formatting text, such as how to change the font, make it bold or italic, alter the spacing between lines and between letters, add a drop shadow, and more. Finally, we style lists and links and discuss using custom fonts on your page to conclude the module.
CSS layout
We’ve already covered the basics of Cascading Style Sheets (CSS), including how to style text and how to style and manipulate the boxes that your content sits inside. It’s time to start thinking about where to put your packages in relation to each other and the viewport. Now that we’ve covered the groundwork, we can delve deeply into CSS layout, exploring various display options, cutting-edge layout tools like flexbox, CSS grid, and positioning, and some venerable legacy techniques you may still find useful.
Use CSS to solve common problems
This module features a list of articles broken down by topic that detail how to apply CSS to common web development issues.
Cookbook
The CSS Layout Cookbook is an attempt to compile a set of recipes for the most frequently used layout patterns that web designers and developers may find useful. These recipes not only provide code that can serve as a jumping off point for your projects, but also showcase the variety of options available to you as a developer when working with layout specifications.
Tools for CSS development
If you want to make sure your CSS is up to par, you can use the W3C’s CSS Validation Service. As a debugging aid, this is incredibly helpful.
Using the Inspector and the Style Editor in Firefox Developer Tools, you can see and change the live CSS of a page.
Firefox’s Web Developer add-on allows users to monitor and modify a site’s live CSS in real time.
