The HTML Style Attribute
The style attribute adds styles to an element, such as color, font, and size. You set it on the element's start tag, giving it a CSS property and a CSS value (see the syntax below). You will learn more about CSS later in this tutorial.
Example
Paragraphs styled with color and size using the style attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Styles</title>
</head>
<body>
<p style="color:red;">I am Red</p>
<p style="color:blue;">I am Blue</p>
<p style="font-size:50px;">I am Big</p>
</body>
</html>
Style syntax
The shape of the style attribute.
<tagname style="property:value;">
Background Color
The CSS background-color property sets the background color of an element. Put it on the <body> to color the whole page, or on a single element to color just that element.
Whole page
Setting the page background to powderblue.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Single elements
Different background colors on a heading and a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Elements</title>
</head>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>
Text Color
The CSS color property sets the text color of an element.
Example
A blue heading and a red paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color</title>
</head>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts
The CSS font-family property sets the font used for an element.
Example
A heading in verdana and a paragraph in courier.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts</title>
</head>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Text Size
The CSS font-size property sets the text size of an element.
Example
A large heading and a slightly enlarged paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Size</title>
</head>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Text Alignment
The CSS text-align property sets the horizontal alignment of an element's text.
Example
A centered heading and paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Align</title>
</head>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Chapter Summary
To recap: use the style attribute to style elements, background-color for background color, color for text color, font-family for fonts, font-size for text size, and text-align for text alignment.