The HTML Style Attribute is important, it can be used to see what a style looks like quickly, but if you are doing some proper development, use class attribute and link it to a CSS file, placing your CSS in the abstracted file.

The HTML Style Attribute is a way to style your HTML Element, with the use of in-line Cascading Style Sheets (CSS). This is done by placing the CSS into the style attribute.

Take for example :

<div>Hello World!</div>

which looks like this within a HTML page

Hello World!

Style the Background Color

Now let’s make the background of the html div red!

<div style="background-color:red;">Hello HTML World</div>

which looks like the following on the HTML page

Hello HTML World


Style the Text Color

Now let’s make the color of the html text white.

<div style="background-color:red ;color:white;">Hello HTML World</div>

which looks like the following on the HTML page

Hello HTML World


Style the Font

Now let’s change the font to Georgia.

<div style="background-color:red ;color:white;font-family:Georgia;"></div>

which looks like the following on the HTML page

Hello HTML World


Set the Width

Now let’s set the width of the div to 300px

<div style="background-color:red ;color:white;font-family:Georgia;width:300px;">Hello HTML World</div>

which looks like the following on the HTML page

Hello HTML World


Set the Height

Now let’s set the height of the div to 200px

<div style="background-color:red;color:white;font-family:Georgia;width:300px;height:200px;">Hello HTML World</div>

which looks like the following on the HTML page

Hello HTML World


Style the Font Bold

Now let’s style the font to bold.

<div style="background-color:red ;color:white;font-family:Georgia;width:300px;height:200px;font-weight:bold;">Hello HTML World</div>

which looks like the following on the HTML page

Hello HTML World


As you can see from the above there are many ways to use inline Cascading Style Sheets to style HTML. There are many CSS properties that can be used to style. I will cover these in my CSS tutorials when they are written.

Linking your HTML file to CSS in a seperate file.

Looking at the above code you can see placing all the CSS into the HTML can make your code rather messy, this is why we can make a CSS file (.css extension) and link the HTML to this .css file. Then we place all the CSS from the webpage into the .css file, making your code much nicer! This will be covered in the CSS Tutorials, stay tuned.

To point your HTML at the .CSS file use the following code within your HTML pages Head Tag.

<html>
  <head>
    <link rel="stylesheet"  href="/filename.css"  type="text/css" />
  </head>
  <body>
  </body>
</html>