Lesson 10 : HTML Styles

CSS is used to style HTML elements.

Look! Styles and colors

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

• in Cascading Style Sheet files (CSS files)
• in the <style> element in the HTML head section
• in the style attribute in single HTML elements

---

Using the HTML Style Attribute

It is time consuming and not very practical to style HTML elements using the style attribute.

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.

You can learn everything about CSS in our CSS Tutorial.

---

HTML Style Example - Background Color

The background-color property defines the background color for an element:

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

he font-family, color, and font-size properties make the old <font> tag obsolete.

---

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>


The text-align property makes the old <center> tag obsolete.

Lesson 9 : HTML Fonts

The HTML <font> Tag Should NOT be Used

The <font> tag is deprecated in HTML 4, and removed from HTML5.

The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.

In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements. 

The example below shows how the HTML could look by using the <font> tag:

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>