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
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: color: red;.
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 @media rule 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.
Preparing HTML Markup for Styling
CSS should be used to add content to a web page. That task is best handled by markup languages such as HTML and XML. Instead, CSS is used to pick items that already exist on a web page and to define how each item should appear.
In order to make it as easy as possible to select items on a web page, identifiers should be added to elements on the webpage. These identifiers, often called hooks in the context of CSS, make it easier to identify the items that should be affected by the CSS rules.
Classes and IDs are used as hooks for CSS styles. While the way CSS renders is not affected by the use of classes and hooks, they give developers the ability to pinpoint HTML elements that they wish to style.
Classes and IDs aren’t interchangeable. It’s important to know when to use each.
Ways of Linking CSS Rules to an HTML Document
There are three ways of adding CSS rules to a web page:
Inline styles
Internal stylesheets
External stylesheets
In the vast majority of cases, external stylesheets should be used. However, there are instances where inline styles or internal stylesheets may be used
When to Use Classes
Use classes when there are multiple elements on a single web page that need to be styled. For example, let’s say that you want links in the page header and footer to be styled in a consistent manner, but not the same way as the links in the body of the page. To pinpoint those links you could add a class to each of those links or the container holding the links. Then, you could specify the styles using the class and be sure that they would only be applied to the links with that class attributes.
Best Practices for Preparing Your Markup for Styling
Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write markup that makes it easy to poinpoint specific elements?
Apply classes liberally and consistently. Use classes for items that should be aligned in one direction or the other, and for any elements that appear repeatedly on a single web page.
Apply IDs to items that appear only once on a web page. For example, use an ID on the div that contains your web page content, on the ul that that contains the navigation menu, and on the div that contains your web page header.