HTML Attributes, Elements

Jan
5

The Style Attribute

Styles were introduced with HTML 4, as the preferred way to style HTML elements. Styles can be added to HTML elements directly by using the style attribute (also known as inline CSS). The style attribute also includes a property/value.

1
2
3

<p style="font-size: 8px;">This would be 8 pixel type.</p>
<p style="font-family: arial, sans-serif;">This paragraph would be in Arial font.</p>
<p style="color: #990099;">The text in this paragraph would be purple.</p>

To simplify things, properties and their values can be combined:

1	<p style="font-size: 8px; font-family: arial, sans-serif; color: #990099;">Now this paragraph is purple 8 pixel Arial.</p>

The Class and ID Attributes

The class and id attributes are nearly identical. They play no direct role in formatting your elements but rather serve behind the scenes for Cascading Style Sheets. The idea is that you can classify or id certain tags and later format the tag using CSS. The only rule is that you use the same ID only once on a page, while a class can be used more than once on a page. ID is also used with Anchor links. You will learn more about the class/id attributes in the CSS tutorials.

1 2	<p class="bluetext">Blue paragraph</p> <p id="menucontainer">Your navigation might go here.</p>

The <div> Element

The <div> tag is nothing more than a container for other tags. Much like the <body> tag, div elements are block elements and work behind the scenes grouping other tags together. Below is how a <div> plays the role of a container for other HTML elements.

<div style="background-color: #ffff99;">
<h4>SEARCH LINKS</h4>
<p><a href="http://www.google.com/" title="Google">Google</a></p>
</div>

The <span> Element

Like the <div> tag, the <span> tag provides no visual change by itself. It provides a way to further format a small portion of text.

1	<p>My daughter has <span style="color: #604128;">brown</span> hair.</p>

Top

HTML Attributes, Elements