HTML Style Tutorial

Browser Support

HTML style is a bit of an odd duck in that there is a style element and a style attribute.

The style element and the style attribute both provide a means for you to specify how HTML elements should render in a browser. You can define things like borders, colors, sizes, font styles, line spacing, positioning and more.

HTML Style Element

As an element, the style tag can only be used in the HEAD section of an HTML document. This is called an embedded style. Embedded styles affect every element on the page. For example, suppose the following style was embedded in a web page:

<html>
<head>
<style type="text/css">
h2 {color: blue;}
div {text-align: justify;}
</style>
</head>

Every time an <h2> heading was used on a page with that code embedded in the HEAD it would be blue in color, and every division would have the text justified (unless an inline style was used to override them).

HTML Style Attribute

As an attribute, style can be used inline to add styles to elements on a case-by-case basis. The term inline simply means the style attribute is added directly to an HTML element in the flow of your source code.

Here's an example:

<p style="color: red;">
Paragraph text...
</p>

With that inline style coded into a paragraph tag, the text within that paragraph would be rendered in the color red.

In addition to embedded and inline styles, you can link to an external style sheet. To link to an external style sheet, place the link in the HEAD section of your web page. Example:

<head>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</head>

Naturally you'd have to change the name of the style sheet in this example (myStyles) to the actual name of your style sheet and include the correct path to the style sheet if it's kept in a different directory from your web page.

There you go, you're stylin' now! Your smile is in style!

Based on your interest in this tutorial you may also be interested in:

This concludes the HTML Style Tutorial.

Back | HTML Tag Chart | HTML Index | Web Design Tutorials

If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]