CSS developer guide

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

CSS is one of the core languages of the open Web and has a standardized W3C specification.

Documentation

Block formatting context: A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
CSS Image Sprites: Image "sprites" are used in numerous web apps where multiple icons are used. Rather than include each icon as a .png image file, it is much more memory and bandwidth-friendly to send it as a single image because the number of HTTP requests is reduced.
CSS media queries: A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Consistent list indentation: One of the most common style changes made to lists is a change in the indentation distance—that is, how far the list items are pushed over to the right.
Getting started with CSS: This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.
Scaling background images: The background-size CSS property makes it possible to adjust the size of background images, instead of the default behavior of tiling the image at its full size.
Testing media queries: The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.
Underscores in class and ID Names: Summary: The use of the underscore character in CSS can lead to major display problems in multiple browsers. Learn why this is so, and how to keep your sites from being bitten by this problem. This technical note examines the use of underscores in CSS, and why they should be generally avoided in most circumstances.
Understanding CSS z-index: The z-index attribute lets you adjust the order of the layering of objects when rendering content.
Using CSS animations: CSS animations make it possible to animate transitions from one CSS style configuration to another.
Using CSS counters: CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.
Using CSS flexible boxes: The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Community

Join the CSS community on our mailing list or newsgroup:

Mailing list

Related topics

These topics may also be of interest:

Using CSS gradients

CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors.

Using CSS multi-column layouts

The CSS multi-column layout extends the block layout mode to allow the easy definition of multiple columns of text.

Using CSS multiple backgrounds

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back.

Using CSS transforms

By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

Using CSS transitions

CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

Using flexbox to lay out web applications

Using flexbox can help you design compelling layouts in web applications that scale better from desktop to mobile. Put an end to floating <div> elements, absolute positioning, and JavaScript hacks, and start building horizontal and vertical flowing layouts in just a few lines of CSS. Some basic example use cases:

Using the :target selector

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. As an aid to identifying the destination of a link that points to a specific portion of a document, CSS3 Selectors introduces the :target pseudo-class. Netscape 7.1 introduced support for this pseudo-class into the Netscape family, giving authors a new way to assist users keep oriented within large documents.

Visual formatting model

The CSS visual formatting model is the algorithm used to process a document and display it on a visual media.

Writing efficient CSS

This document provides guidelines for optimizing CSS code, and more specifically on how to write efficient selectors.

CSS developer guide

Documentation

Community

Related topics

Document Tags and Contributors