CSS syntax

CSS is a language for styling web pages. CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. As you will see later, it can control the layout of multiple web pages all at once. But for now, let’s learn how to write CSS rules.

CSS rules

#

A CSS rule contains two parts: a selector and a declaration.

Selectors

#

A selector points to the HTML element you want to style. For example, if you want to style all <p> elements (the paragraphs), you can use the p selector. This would look like this:

p {
  color: red;
}

The code above will make all the paragraphs red. You can also use the h1 selector to style all the headings:

h1 {
  color: red;
}

Also, remember how we learned that you can add a class or an id to an HTML element? You can use these classes and ids as selectors in CSS. For example, if you want to style all elements with the class intro, you can use the .intro selector. If you want to style the element with the id firstname, you can use the #firstname selector. This would look like this:

.intro {
  color: red;
}

#firstname {
  color: red;
}

Classes and ids are explained in more detail in the HTML attributes lesson. For now, all that you have to remember is that you can add the same class to multiple elements. For example, you can add the class main-text to all the paragraphs in your web page. Then, you can use the .main-text selector to style all the paragraphs in your web page. This would look like this:

<p class="main-text">This is a paragraph.</p>
<p class="main-text">This is another paragraph.</p>

.main-text {
  color: red;
}

Technically, you can also use the same id for multiple elements. However, it is not recommended to do so. It is better to use a unique id for each element. Here is an example of a CSS rule that targets an element with the id firstname:

<p id="firstname">John</p>

#firstname {
  color: red;
}

Declarations

#

A declaration is a CSS property and a value, separated by a colon. This is what you saw in between the curly braces in the examples above.

A declaration always ends with a semicolon. It has the property name, a colon, and the property value. Here is an example of a declaration:

color: red;

The color property sets the color of the text. The value red sets the color of the text to red. Here is another example of a declaration:

font-size: 16px;

The font-size property sets the size of the text. The value 16px sets the size of the text to 16 pixels.

CSS comments

#

You can add comments to your CSS code. Comments are not meant to be displayed in the browser, but they can help you remember what the code does. Here is an example of a CSS comment:

/* This is a comment */

A good way to use them is to explain what a section of code does. For example, you can add a comment before a section of code that styles the navigation bar:

/* Navigation bar */
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

Activity

#

Try adding a CSS rule to one of the web pages that you built in the previous lesson. You can use the h1 selector to style the heading. You can also use the p selector to style the paragraphs.

Then, add some classes and ids to the HTML elements in your web page. You can use the classes and ids as selectors in CSS. For example, you can add the class main-text to all the paragraphs in your web page. Then, you can use the .main-text selector to style all the paragraphs in your web page. Try changing the color of the text in your web page.

Next Steps

#

Now that you know how to write CSS rules, let’s learn some common CSS properties!

Resources

#

• CSS Syntax