--interactive--

CSS is responsible for the styles of a web page. All of these styles are made up of various CSS rules.

A CSS rule is made up of two main parts: a selector and a declaration block.

Let's take a look at the basic syntax:

selector {
  property: value;
}

A selector is a pattern used in CSS to identify and target specific HTML elements for styling.

Examples of selectors include type selectors, class selectors, and ID selectors.

The curly braces provided in the basic syntax are known as a declaration block. A declaration block applies a set of styles for a given selector, or selectors.

Inside the declaration block, you will have a series of declarations. Each declaration consists of a property and a value.

The property is the CSS identifier that specifies which feature is being styled. An example of a property would be the background-color property.

The value would be the specific setting applied to that property. For example, if the property is background-color, a value could be purple, which sets the background color to purple.

After each property name, you need to place a colon, and after each value, you should have a semicolon.

Now that you know the syntax for a CSS rule, let's take a look at an example. Enable the interactive editor and click on the styles.css tab to see the CSS code.

:::interactive_editor

<link rel="stylesheet" href="styles.css">
<h1>Learning about CSS</h1>

<p>Example paragraph element</p>
<p>Another example paragraph element</p>

p {
  color: blue;
}

:::

In this CSS rule, a type selector targets all paragraph elements on the page.

Inside the declaration block, there is one declaration.

The declaration consists of the color property with a value set to blue. This will change the text color for all paragraph elements to blue.

If you want to apply the same set of styles to multiple selectors, you can create a selector list with each selector separated by a comma.

Here is an example of styling multiple selectors (to interact with the example, enable the interactive editor):

:::interactive_editor

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

<h1 id="title">Example heading</h1>
<h2 class="subheading">Example subheading</h2>
<p>This paragraph is not affected by the selector.</p>

#title,
.subheading {
  color: navy;
}

:::

In this selector list, there is an id selector targeting the HTML element with the id value of title. All id selectors must start with a hash # symbol.

Then there is a comma followed by a class selector that targets all HTML elements with the class value of subheading. All class selectors must start with a dot .

The entire selector list will receive the same styling, with the text color set to navy.

--questions--

--text--

What is the purpose of a selector in a CSS rule?

--answers--

To apply styles to HTML elements.

--feedback--

The selector is the first part of the CSS rule and specifies the elements to be styled.

To determine which HTML elements the rule will apply to.

To define the specific style properties and values.

--feedback--

The selector is the first part of the CSS rule and specifies the elements to be styled.

To create new HTML elements.

--feedback--

The selector is the first part of the CSS rule and specifies the elements to be styled.

--video-solution--

2

--text--

Which of the following CSS rules correctly changes the text color of all paragraph elements to blue?

--answers--

p {
  background-color: blue;
}

--feedback--

Look for the selector that targets all paragraph elements and the property that changes text color.

p {
  color: blue;
}

.p {
  color: blue;
}

--feedback--

Look for the selector that targets all paragraph elements and the property that changes text color.

#p {
  color: blue;
}

--feedback--

Look for the selector that targets all paragraph elements and the property that changes text color.

--video-solution--

2

--text--

Given the following HTML, which CSS rule correctly sets h1 and h2 text color to green?

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

<h1 id="title">Example heading</h1>
<h2 class="subheading">Example subheading</h2>
<p>Paragraph element</p>

--answers--

#title
.subheading {
  color: green;
}

--feedback--

Refer back to the end of the lesson for the correct syntax.

#title,
.subheading {
  color: green;
}

.title,
#subheading {
  color: green;
}

--feedback--

Refer back to the end of the lesson for the correct syntax.

#title,
#subheading {
  color: green;
}

--feedback--

Refer back to the end of the lesson for the correct syntax.

--video-solution--

2