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.
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 greenNote 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:
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.