Introduction

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

What is CSS For

CSS (Cascading Style Sheets) allows you to create great-looking web pages. It is a language for specifying how documents are presented to users — how they are styled, laid out, etc.

A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML.

Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge, are designed to present documents visually, for example, on a computer screen, projector, or printer.

CSS can be used for very basic document text styling — for example, for changing the color and size of headings and links. It can be used to create a layout — for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.

Adding CSS to Our Document

The very first thing we need to do is to tell the HTML document that we have some CSS rules we want it to use.

There are three different ways to apply CSS to an HTML document that you'll commonly come across, however, for now, we will look at the most usual and useful way of doing so — linking CSS from the head of your document.

Create a file in the same folder as your HTML document and save it as styles.css. The .css extension shows that this is a CSS file. To link styles.css to index.html, add the following line somewhere inside the <head> of the HTML document:

                  
                     <link rel="stylesheet" href="styles.css" />

This <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute.

CSS Syntax

CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.

For example, you can decide to have the main heading on your page to be shown as large red text. The following code shows a very simple CSS rule that would achieve the styling described above:

                  
                     h1 {
                        color: red;
                        font-size: 5em;
                     }
  • In the above example, the CSS rule opens with a selector. This selects the HTML element that we are going to style. In this case, we are styling level one headings (h1).
  • We then have a set of curly braces { }.
  • Inside the braces will be one or more declarations, which take the form of property and value pairs. We specify the property (color in the above example) before the colon, and we specify the value of the property after the colon (red in this example).
  • This example contains two declarations, one for color and the other for font-size. Each pair specifies a property of the element(s) we are selecting (h1 in this case), then a value that we'd like to give the property.

CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.

A CSS stylesheet will contain many such rules, written one after the other:

                  
                  h1 {
                     color: red;
                     font-size: 5em;
                   }
                   
                  p {
                     color: black;
                  }
Adding a CSS Class

So far, we have styled elements based on their HTML element names. This works as long as you want all of the elements of that type in your document to look the same. To select a subset of the elements without changing the others, you can add a class to your HTML element and target that class in your CSS.

  1. In your HTML document, add a class attribute to the second list item. Your list will now look like this: 
                            
                           <ul>
                              <li>Item one</li>
                              <li class="special">Item two</li>
                              <li>Item three</li>
                           </ul>
  2. In your CSS, you can target the class of special by creating a selector that starts with a full stop character. Add the following to your CSS file: 
                            
                           .special {
                              color: orange;
                              font-weight: bold;
                            }
  3. Save and refresh to see what the result is.

You can apply the class of special to any element on your page that you want to have the same look as this list item.

Reference

All the documentation in this page is taken from MDN Web Docs.