Saturday, 1 November 2014

Lesson no 4 = HTML Styles

HTML Styling

Every HTML element has a default style (background color is white, text color is black, text-size is 12px ...)
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to light grey:

Example of Styling in HTML


<!DOCTYPE html>
<html>
<body>

<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>

</body>
</html>

OutPut:

I am Red

I am Blue


The HTML Style Attribute

The HTML style attribute has the following syntax:
style="property:value"

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>

Output:

This is a heading

This is a paragraph.

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 34</h1>

<p style="font-size:160%">
This is a paragraph 11.</p>

</body>
</html>

Output:

This is a heading 34

This is a paragraph 11.

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 here</h1>

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

</body>
</html>

Out Put:

Centered heading here

This is a paragraph for testing.

0 comments:

Post a Comment