How To Declare Values For Multiple Properties In a CSS Rule

Introduction

In this tutorial, you will learn how to declare values for multiple properties in a CSS rule. Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all at once. We’ll also explore creating a variety of CSS rules that allow us to apply different styles to different pieces of content in a single HTML document.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Creating a CSS Rule With Multiple Declarations

To add more than one declaration to a CSS rule, try modifying your <h1> rule in your styles.css file (or adding the entire code snippet if you haven’t been following the tutorial series) so that it includes the additional highlighted declarations:

h1 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

Save the file and reload your HTML document in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser). Your text should now be located in the center of the page, have a size of 100 pixels, and render with the Courier font:

In the next section, we’ll add more CSS rules to extend the styling possibilities for the webpage’s content.

Creating Multiple CSS Rules To Style HTML Content

In this section we’ll add some more text to the index.html file using an HTML <p> element. We’ll experiment with modifying its properties using a new CSS ruleset that only applies to <p> tags.

In the index.html file, add a line containing <p>Some paragraph text</p> below the existing <h1>A sample title<h1> line that you added in the How To Understand and Create CSS Rules tutorial:

<h1>A sample title</h1>
<p>Some paragraph text</p>

Save the index.html file and reload it in the browser window to check how the file is displayed. Your browser should render a blue heading that says “A sample title" and an unstyled paragraph below it that says “Some paragraph text" like the following example:

Next, let’s add a CSS rule to style the <p> element. Return to your styles.css file and add the following ruleset at the bottom of the file:

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

Save the file and reload it in the browser window to check how the file is displayed. Your <p> text should now have the style you declared in the CSS rule you just created:

Now that you have CSS rules for the <h1> and <p> elements, any text you mark up with these tags in your HTML document will take on the style rules that you declared for these elements in your styles.css file.

Further Practice

If you want to continue experimenting with CSS rules, try creating CSS rulesets for different HTML text elements—such as <h2>, <h3>, and <h4>—and using them to modify text in your index.html file. If you’re stuck, you can copy the CSS rules in the following example and add them to your styles.css file:

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}

Save your file and then add the following HTML content to your index.html file:

<h2> This is red text with a size of 40 pixels. </h2>
<h3> This is purple text with a size of 50 pixels. </h3>
<h4> This is green text with a size 60 pixels. </h4>

Save the file and load index.html in your browser. You should receive the following results:

Conclusion

In this tutorial you experimented with specifying values for multiple properties using CSS. You also created multiple CSS rules for styling text content in an HTML document. You will expand upon both these skills when you begin building the demonstration website later on in the tutorial series. In the next tutorial, you will begin exploring how to style images with CSS.