How To Use HTML Attributes
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.
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:
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:
h1is the name of the tag. It refers to the largest-sized Heading element.
styleis the attribute. This attribute can take a variety of different properties.
font-sizeis the first property we’re setting for the
40px;is the value for the property
font-size, which sets the text content of the element to 40 pixels.
coloris the second property we’re setting for the
greenis 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.