HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element. In this tutorial, we’ll learn how to use HTML attributes to set values for the size and color properties of HTML text elements.

An HTML attribute is placed in the opening tag like this:

<element attribute="property:value;">

One common attribute is style, which allows you to add style properties to an HTML element. While it’s more common to use a separate stylesheet to determine the style of an HTML document, we will use the style attribute in our HTML document for this tutorial.

Using the Style Attribute

We can change multiple properties of an <h1> element with the style attribute. Clear your “index.html” file and paste the code below into your browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>

Before we load the file in our browser, let’s review each of the parts of this HTML element:

• h1 is the name of the tag. It refers to the largest-sized Heading element.
• style is the attribute. This attribute can take a variety of different properties.
• font-size is the first property we’re setting for the style attribute.
• 40px; is the value for the property font-size, which sets the text content of the element to 40 pixels.
• color is the second property we’re setting for the style attribute.
• green is the value for the property color, which sets the text content color to green

Note that the properties and values are contained by quotation marks, and that each property:value pair ends with a semicolon ;.

Save the file and reload it in your browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive something like this:

This text is 40 pixels and green.

You have now learned how to use the style attribute to change the font size and font color of a text element. Note that certain elements require attributes, such as the <a> element which allows you to add a link to a text or image, and the <img> element, which allows you to add an image to the document. We’ll cover those two elements in the next tutorials and learn about additional attribute usage for <div> containers and other HTML elements later on in the tutorial series.