- Web Development Tutorials

Using the Style Attribute

How to use the style attribute in an html tag
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List

Home/DHTML/CSS/Style Attribute

The first way to add a style to you page is to simply declare it inside an HTML tag. The way to do this is to add the style=" " attribute to an html tag. The general form to add one style property looks like this:


To help clarify this, let's look at an example. If you want the color of some text to look red, the style attribute would look like this:


The style sheet property is "color". The value of the color is "red". Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks.

Now, you just insert this into an HTML tag, such as the <DIV> tag. DIV is just a division on a page. Remember to close the tag when you are through or you will have more red text than you bargained for! Here is the sample code:

<DIV style="color:red">Wow, I am totally red!</DIV>

This will give you the following:

Wow, I am totally red!

You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So if we want the text to be red and to be italic, we would do the following:

<DIV style="color:red; font-style:italic">I'm some red-hot italic text!</DIV>

Now we will have text that is both red and italic:

I'm some red-hot italic text!

In this way, you can add any number of properties to the section of text. Just separate them with semicolons:

<DIV style="color:red; font-style:italic; font-weight:bold; font-family:Arial">
Now I'm also bold and have an Arial font!

Now you would get this:

Now I'm also bold and have an Arial font!

Don't worry about learning all of these properties right now, we'll get to examples of all of the css properties in later tutorials. This is just showing you how to use the style attribute for now. If you want to see a page with a listing of the css properties, check out the Css Properties Tables and browse through the listings. You can even use the style attribute now to test some of them out if you'd like.

Well, if you want to move on to the next section, you can see how to add the style properties to tags by using the <STYLE></STYLE> tags in the head section of your page. So, let's move on to: Declaring Styles in the Head Section.

By: John Pollock next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy