All Syllabus

Home About PHP HTML CSS SQL Java Script jQuery AJAX      

HTML

What is HTML ?

HTML Editors

HTML Basic Examples

HTML Elements

HTML Attributes

HTML Headings

HTML Paragraphs

HTML Formatting

HTML Styles

HTML Quotations

HTML ComputerCode

HTML Comments

HTML Styles - CSS

HTML Links

HTML Tables

HTML Lists

HTML Styles

HTML Formatting Elements

In the previous chapter, you learned about HTML formatting elements.

Formatting elements are special HTML elements with a special meaning.

Formatting elements were designed to display special types of text, like important text, emphasized text, subscripts, and superscripts.


HTML Styling

HTML styling has nothing to do with formatting elements.

Styling is about changing or adding the style of existing HTML elements.

Every HTML element has a default style (background color is white, text color is black ...)

Changing the default style of an HTML element, can be done with the style attribute.

Example

<body style="background-color:lightgrey">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>
The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.

The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

The property is a CSS property. The value is a CSS value.

  You will learn much more about CSS later in this tutorial.

HTML Text Color

The color property defines the text color to be used for an HTML element:

Example

<!DOCTYPE html>
<html>

<body>
   <h1 style="color:blue">This is a heading</h1>
   <p style="color:red">This is a paragraph.</p>
</body>

</html>

HTML Text Fonts

The font-family property defines the font to be used for an HTML element:

Example

<!DOCTYPE html>
<html>

<body>
   <h1 style="font-family:verdana">This is a heading</h1>
   <p style="font-family:courier">This is a paragraph.</p>
</body>

</html>
The <font> tag, supported in older versions of HTML, is not valid in HTML5.

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example

<!DOCTYPE html>
<html>

<body>
   <h1 style="font-size:300%">This is a heading</h1>
   <p style="font-size:160%">This is a paragraph.</p>
</body>

</html>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<!DOCTYPE html>
<html>

<body>
   <h1 style="text-align:center">Centered Heading</h1>
   <p>This is a paragraph.</p>
</body>

</html>