HTML Tags Tutor

Style Tag

The style tag is placed in the head section of an HTML document. It is used to place embedded style sheets.

<head>
<style type="text/css">
{ }
<style>
</head>

Style settings can also be defined using the style attribute and adding it to most html tags.

Because of the limitations of our editor, this is the method we'll use in our tutorials.

Lesson steps

Click the <> button to enter your code

Type the code shown here for an H1 header tag in the editor window:

<h1>Hello World</h1>

Click Preview button.

Add Font Family

Click the <> button to return to the code.

Add the inline style code to the opening h1 header tag as shown in red:

<h1 style="font-family: arial">
Click Preview button.

Add Font Size

Click the <> button to return to the code.

Add additional code as shown in red:

<h1 style="font-family: arial; font-size: 14pt">
Click Preview button.

Add Text Align

Click the <> button to return to the code.

Add additional code as shown in red:

<h1 style="font-family: arial; font-size: 14pt; text-align: center">
Click Preview button.

Add Text Color

Click the <> button to return to the code.

Add additional code as shown in red:

<h1 style="font-family: arial; font-size: 14pt; text-align: center; color: #ff0000">
Click Preview button.

Lesson Notes

When adding inline style declarations, use a semi colon to separate them. If these same declarations were defined in the head section using the style tag the code would look like this:
<head>
<style type="text/css">
h1 {
font-family: arial;
font-size: 14pt;
text-align: center;
color: #ff0000
}
<style>
</head>