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 with HTML 4, to provide a common way to style HTML elements.
CSS styling can be added to HTML in the following ways

in separate 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 styles and CSS in our CSS Tutorial.

HTML Style Example - Background Color

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

Example

<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>

Try it yourself »

The style attribute makes the "old" bgcolor attribute obsolete.
Try it yourself: Background color the old way

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:

Example

<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>

Try it yourself »

The style attribute makes the old <font> tag obsolete.
Try it yourself: Fonts the old way

HTML Style Example - Text Alignment

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

Example

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

Try it yourself »

The style attribute makes the old "align" attribute obsolete.
Try it yourself: Centered heading the old way

Deprecated Tags and Attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML.
Remark

The message is clear: Avoid using deprecated tags and attributes!
These tags and attributes should be avoided:

Tags	Description
<center>	Deprecated. Defines centered content
<font> and <basefont>	Deprecated. Defines HTML fonts
<s> and <strike>	Deprecated. Defines strikethrough text
<u>	Deprecated. Defines underlined text
Attributes	Description
align	Deprecated. Defines the alignment of text
bgcolor	Deprecated. Defines the background color
color	Deprecated. Defines the text color

For all of the above: Use styles instead!

Party in banquet

My Blog List

CSS is used to style HTML elements

Look! Styles and colors

Styling HTML with CSS

Using the HTML Style Attribute

HTML Style Example - Background Color

Example

HTML Style Example - Font, Color and Size

Example

HTML Style Example - Text Alignment

Example

Deprecated Tags and Attributes

No comments:

Post a Comment

dg3