CSS

CSS is a language that describes the style of an HTML document, used to define styles for your web pages: the design, layout and variations in display for different devices and screen sizes.

PreviousHTML NextJavaScript

Last updated 4 years ago

Was this helpful?

How do I write CSS?

Writing CSS consists of a selector and a declaration box. We structure this by writing the selector and then putting the declaration block in curly brackets, as you can see in the example above. The selector is pointing to the HTML element that you want to style. These HTML elements are usually recognised by their tag name. In this example, it’s the heading, h1. The declaration block contains one or more declarations that are separated by semicolons. It’s good practice to have one declaration per line as shown above. Each declaration includes a CSS property name and value, separated by a colon.

It's good practice to keep your CSS in a separate file to your HTML. This means you can change the styling of your webpage without changing the HTML, all in one document. It makes your code much easier to read too, because you don’t have everything in the HTML file. You can link your HTML to your CSS one(s) by adding a link to the file in the <head> of each HTML file. There's an example below:

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

CSS Selectors

The CSS element Selector

The element selector selects HTML elements based on the element name. For example:

p {
 color: red;
}

The CSS id Selector

The id selector uses the id attribute of a HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. For example:

#header1 {
 color: green;
}

The CSS class Selector

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.

.header2 { color: blue; }