What is CSS?
CSS stands for Cascading Style Sheets and it is the language used to style the visual presentation of web pages. CSS is the language that tells web browsers how to render the different parts of a web page.
Every item or element on a web page is part of a document written in a markup language. In most cases, HTML is the markup language, but there are other languages in use such as XML. Throughout this guide we will use HTML to demonstrate CSS in action, just keep in mind that the same principles and techniques apply if you’re working with XML or a different markup language.
How is CSS Different From HTML?
The first thing to understand when approaching the topic of CSS is when to use a styling language like CSS and when to use a markup language such as HTML.
- All critical website content should be added to the website using a markup language such as HTML.
- Presentation of the website content should be defined by a styling language such as CSS.
Blog posts, page headings, video, audio, and pictures that are not part of the web page presentation should all be added to the web page with HTML. Background images and colors, borders, font size, typography, and the position of items on a web page should all be defined by CSS.
It’s important to make this distinction because failing to use the right language can make it difficult to make changes to the website in the future and create accessibility and usability issues for website visitors using a text-only browser or screen reader.
CSS syntax includes selectors, properties, values, declarations, declaration blocks, rulesets, at-rules, and statements.
- A selector is a code snippet used to identify the web page element or elements that are to be affected by the styles.
- A property is the aspect of the element that is to be affected. For example, color, padding, margin, and background are some of the most commonly used CSS properties.
- A value is used to define a property. For example, the property color might be given the value of red like this:
- The combination of a property and a value is called a declaration.
- In many cases, multiple declarations are applied to a single selector. A declaration block is the term used to refer to all of the declarations applied to a single selector.
- A single selector and the declaration block that follows it in combination are referred to as a ruleset.
- At-rules are similar to rulesets but begin with the @ sign rather than with a selector. The most common at-rule is the
@mediarule which is often used to create a block of CSS rules that are applied based on the size of the device viewing the web page.
- Both rulesets and at-rules are CSS statements.