Introducing Styles

Introduction

Styles are a newer way to format your text and colors in HTML. They are now the correct way to format instead of using tags like basefont, font, center, b, i, u,and s, an attributes like align, bgcolor, and color.

Using Style as an Attribute

The style attribute is used in many tags including: headings, paragraphs, and the body tag. Instead of using <body bgcolor="#0000ff"> to set the page background color to be blue, we will now use this: <body style="background-color:#0000ff">. We still use the equal sign to begin with everything that it is equaled to in quotations. We now use the – between words, and : for what this is set to.

Proper Syntax of Styles: <tag style="property:value">

Using Multiple Styles

Multiple styles can be used in each tag if desired. However you can not write the attribute style more than once. Instead type ; at the end (before the end quote) and add the second property (without using spaces). For example: <p style="font-family:arial;color:#ffffff">

Example 1 
<html>
<head>
         <title>My Web Page</title>
</head>
<body style="background-color:#aaaaff">
<h1 style="text-align:center">My New Heading</h1>
<p style="font-family:arial;color:#ff0000">This is my red text.</p>
<p style="font-family:arial;color:#ff0000;font-size:20px">This is my big red text.</p>
</body>
</html>

Let’s look at Example 1. The <h1 style="text-align:center"> tells the level-1 heading to be centered.

Practice:

  1. Make a copy your demo.html and save it as demostyles.html.
  2. Add #bbffbb as your background color.
  3. Make the level-1 heading to be centered.
  4. Change the level-2 heading to be arial.
  5. Change the first paragraph to be 15 pixels.
  6. Change the second paragraph to be arial and red. Click here if you need help.

Other Properties

Many other properties of styles exsist and now replace all the older ways to format your text and tables. Bold is now: <tag style="font-weight:bold">. There are variations of the vaule you can add, such as: normal, bolder, bold, lighter. A full list of Properites are available at: HTML Dog’s Website