Tutorial

How To Declare Values For Multiple Properties In a CSS Rule

Published on October 12, 2020
Default avatar

By Erin Glass

Senior Manager, DevEd

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:

Styled header text

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:

index.html
<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:

Webpage output with a blue  heading and an unstyled  element

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:

styles.css
. . .
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:

Webpage output with styled  text

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:

styles.css
. . .
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:

index.html
<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:

Webpage content styled with multiple CSS rules

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel