Skip main navigation

Attributes and styling HTML text

Article discussing attributes and styling HTML text.

Attributes define additional characteristics or properties of HTML elements, such as the width and height of an image or the colour of the text.

As you learned last week, attributes are defined within the opening/start tag of an element and typically consist of name/value pairs such as name="value". (Always enclose your attribute values in quotation marks!)

You’ve already seen some of these attributes in action. Try adding this code to JSFiddle:

<p style="color:red;">This is a red paragraph.</p>

Perhaps you’ve already played around with the conventions, but the same convention for adding colour can be applied to headings too. Paste the following heading code into JSFiddle above the paragraph code.

<h1 style="color:blue;text-align:center">This is a header</h1>

Notice that you can use this attribute on any sort of textual content, and you can use text-align to change the position of the header or paragraph. These attributes are general purpose. Try adjusting the alignments of your heading and paragraph and compare the results.

General-purpose attributes

We’ll get to other ways to style text in a moment, but first note that style attributes are just one example of a general-purpose attribute. There are, for example, attributes such as id, title, and class that can be used on pretty much any HTML element.

Let’s briefly note what these other elements are about and then look at styling text in more detail.

id

The id attribute is used to assign a unique identifier or name to an element. This makes it easier to select the element using CSS or Javascript.
Let’s take a quick look at an example to see how it works:

<div id="container">Some content goes here.</div>
The <div> element defines a ‘box’ area in a web page. This box can contain any type of content. It’s a useful element when you want to lay out elements in your web page that don’t fit into the lines. Think of something like a pull-quote in a magazine article. You could use <div> to contain the pull-quote and position it on the page. You will learn more about how to use this element later in the course.

class

Similar to the id attribute, the class attribute is used to identify elements – making it easier to select them using CSS or Javascript. Unlike an id, classes are not unique within a document. This means you can use the same class multiple times within the same document. This is helpful because it allows you to define styling or functionality using CSS or Javascript for a class and those rules will apply to all elements within that class. So if you need to make a change, you can just update in the CSS/JSS and then that change will apply globally wherever that class is referenced in the HTML.

Let’s look at an example to see how it works:

<div class="container">Some content goes here.</div>

title

The title attribute is simply used to provide some context about an element or its content.

style

The style attribute allows you to specify CSS styling such as colour, font, and so on directly within the element.

Let’s look at an example to see how it works:

<p style="color:blue; size:14px;">
This paragraph is blue with size 14 font.</p>

We’ll look at how to link to an external CSS file to pull in and apply styles next week. For now, let’s look at how to specify styles inline; that is, directly with the element to be styled as an introduction to CSS.

Paste this example to see how it works:

<h1 style="color:red; font-size:30px;">
This is a red heading 1 with size 30 font.</h1>
<p style="color:blue; size:14px;">
This paragraph is blue with size 14 font.</p>

By putting the CSS rules directly within the start/opening tag, inline styles apply the unique style rules to an element. These rules are applied inline using the style attribute, which includes a series of CSS property/value pairs. Each property/value pair is separated by a semicolon within a single line of code. For example, color is a property and red is a value.

Using inline styles is typically considered bad practice. This is because it becomes difficult to update and maintain and it’s easy for inconsistencies to creep in. Imagine you have styled all of your paragraphs across an entire website to specify a font size and colour and now you want to update it. You would need to make these changes in hundreds, potentially thousands, of places!

This is where external CSS becomes invaluable as it allows you to specify the style once in the style sheet and then call that style using things like classes. Then, to make an update, you only need to update the style sheet and those changes will apply globally in every instance. Again, we’ll introduce and explore CSS next week.

Thinking ahead

In the next step, we’ll practice the basics of formatting text, but as you’ll learn in Week 3, CSS is a powerful and efficient way to control the style across your website. What do you already know about the relationship between CSS and how it’s used in HTML and other programming languages?

Share any insights into CSS’s relationship with HTML that you may already have with your fellow learners in the comments.

This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education