Cascading Style Sheets—or CSS for short—is a stylesheet language that tells a webpage how it should look. It’s used to describe the presentation of a document written in a mark-up language like HTML or XHTML, and it sets out things like colors, fonts and layout. As such, it’s a cornerstone technology of the World Wide Web.
It’s so powerful because it formats content without being a part of it. It effectively modifies the look of content and cascades it across multiple pages of a website, quickly and easily. This is important because it means that the look of hundreds of pages can be altered centrally, in the CSS file, without the need to edit each of those pages manually. It also means that different CSS rules can be applied to fit the size of the device being used to access the page, so with phones and tablets pages can adjust on the fly. This makes any site extremely responsive and makes content more accessible and easier to update. One single HTML page can be offered in a number of different forms to suit different purposes, so the same content can be adapted easily for on-screen reading, print or voice/touch recognition software.
CSS has a simple syntax and every style sheet has a set of rules. They all have a number of selectors and a declaration block. Declaration blocks are comprised of a list of declarations that are book-ended by braces. They have a property, a colon (:), and a value. If there are multiple declarations in a block of CSS code, then a semi-colon (;) needs to be used to separate them.
The selectors in CSS script are used to specify which particular style applies to what portion of the content. Selectors can apply to all elements of a certain type, or to separate groups. CSS supports pseudo-classes in selectors which permits formatting built on data that is external to the page structure.
“Hover” is an example of a pseudo-class. It only identifies content when the on-screen pointer is placed over it. A pseudo-class categorizes page elements using style sheets, such as :link or :visited. A pseudo-element also creates a selection that may be made of partial elements like :first-line or :first-letter. Selectors can be combined in many ways with a CSS program, especially in CSS 2.1, to attain high levels of accuracy and mobility.