HTML Styles


Notations:

  • Style attributes are used to change the style of HTML documents.
  • Style attribute can change:
    1. Text-color
    2. Text-size
    3. Text-font
    4. Text-alignment
    5. Background colour of screen
  • Syntax for using style attribute can be given as:
    style="property:value;"

Changing text color in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Changing text color in HTML </title>
</head>
<body>
<h1 style="color:red">This is heading.</h1>
<p style="color:green">This is paragraph.</h1>
</body>
</html>

Output:

This is heading.

This is paragraph.

Changing text size in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Changing text size in HTML </title>
</head>
<body>
<p style="font-size:250%">This is paragraph</p>
<p style="font-size:160%">This is paragraph.</p>
</body>
</html>

Output:

This is paragraph.

This is paragraph.

Changing text font in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Changing text size in HTML </title>
</head>
<body>
<p style="font-family:courier">This is paragraph</p>
<p style="font-size:verdana">This is paragraph.</p>
</body>
</html>

Output:

This is paragraph.

This is paragraph.

Changing text alignment in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Changing text size in HTML </title>
</head>
<body>
<p style="text-align:center">This is paragraph</p>
<p style="text-align:right">This is paragraph.</p>
</body>
</html>

Output:

This is paragraph.

This is paragraph.

Changing background-color in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Changing text size in HTML </title>
</head>
<body style="background-color:green;">
<p style="text-align:center">This is paragraph</p>
<p style="text-align:right">This is paragraph.</p>
</body>
</html>

Output:

This is paragraph.

This is paragraph.