# HTML Styles

« Previous
Next Chapter »

## I am Red

## I am Blue

Try it Yourself »

## HTML Styling

Every HTML element has a default style (background color is white, text color is black, text-size is 12px ...)

Changing the default style of an HTML element, can be done with the style attribute.

This example changes the default background color from white to lightgrey:

## Example

<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Try it Yourself »

| The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.

## The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

The property is a CSS property. The value is a CSS value.

| You will learn more about CSS later in this tutorial.

## HTML Text Color

The color property defines the text color to be used for an HTML element:

## Example

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
Try it Yourself »

## HTML Text Fonts

The font-family property defines the font to be used for an HTML element:

## Example

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
Try it Yourself »

| The <font> tag, supported in older versions of HTML, is not valid in HTML5.

## HTML Text Size

The font-size property defines the text size to be used for an HTML element:

## Example

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
</html>
Try it Yourself »

## HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

## Example

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

| The <center> tag, supported in older versions of HTML, is not valid in HTML5.

## Chapter Summary

- Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment

## Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples