What is CSS?

CSS (Cascading Style Sheets) describes how HTML elements will be displayed on a webpage. It controls the design elements of a webpage such as color schemes, dimensions of the HTML elements, webpage layout, and variations in display for different devices and screen sizes.

Syntax

A CSS rule consists of a selector and a declaration block​:

The selector points the HTML element to a style. In the illustration above, the selector is pointing to an h1 element. The declaration block contains one or more declaration, separated by semi-colons. Each declaration includes a CSS property name and a value separated by a colon.

This particular CSS rule will color all h1 elements blue and make them bold.

Where is CSS written?

CSS rules can be written in the same HTML files between <style> </style> tags, as shown below:

They can also be defined inline:

CSS rules can also be defined in an external CSS file with a .css extension. This file needs to be imported into the relevant HTML file(s).

Styling specific elements

In the examples above, the CSS rule applies a particular style to all h1 elements. However, if one wants to only style one particular element, then it needs to be targeted by either its ID or its class.

This functionality is shown in the code below:

Note how the class is styled with a . before the class’s name, and the ID is styled using a # before the ID’s name.