HTML Styles

Style Sheets help in describing how your document will be displayed on the screen.

Using CSS, you can define a number of style properties for a particular HTML element.

Here, each style property includes a name and a value, where both are separated using a colon ‘:’.

You can add multiple properties at the same time depending on how to give style to your document. All the properties are separated using a semi-colon ‘;’.

Example:

<p style="color:blue;font-size:20px;"> Example of Style Sheet </p>

In this chapter, we will study about the different kinds of HTML Styles.

The Style Attribute

This attribute is used to define the specific styling to the element. It can be color, font style, font size etc., where special effects are provided to the HTML elements.

The Syntax for Style Attribute

<tagname style="property:value;">

Here, property and value is the CSS property and CSS value respectively.

Example

<h1 style="color:red;"> Hello world </h1>
<p style="font-size:20px;"> We all are equal. </p>

HTML Background Color

The background-color property is used to define the background for an HTML element. The default background color is white, where this example will tell you how to change the background color of a web page. The color can be written either in words like ‘blue’ or in specific color number like #000000.

Example:

<body style="background-color:blue;">
<h1 style="color:red;">Hello world </h1>
<p style="font-size:20px;"> We all are equal. </p>
</body>

HTML Text Color

The color property is used to define the color of a text for an HTML element. The default text color is black, where this example will tell you how to change the text color. Just like background-color, this property uses the same value properties.

Example:

<h1 style="color:red;"> Hello world </h1>
<p style="color:green;"> We all are equal. </p>

HTML Fonts

The font-family property is used to define the font style to be used for an HTML element. You can choose any font, where in this example the names of the fonts are the values of the property.

Example:

<h1 style="font-family:arial;"> Hello world </h1>
<p style="font-family:calibri;"> We all are equal. </p>

HTML Font Size

The font-size property is used to define the text size for an HTML element. You can choose the font size depending on how small or large you want to view the particular text.

Example:

<h1 style="font-size:200%;"> Hello world </h1>
<p style="font-size:10px;"> We all are equal. </p>

HTML Text Alignment

The text-align property is used to align the horizontal text for an HTML element. You can align the text to the left, center or right. You can do it based on how you want your text to be displayed on a web page.

Example:

<h1 style="text-align:left;"> Hello world </h1>
<p style="text-align:center;"> We all are equal. </p>