Tuesday, 26 November 2013

Chapter 7: HTML Styles

Chapter 7: HTML Styles


» HTML Style Attribute

The new HTML attribute is the style attribute. This attribut helps younto use CSS in HTML. Cascading Style Sheet can be added in HTML by using the style attribute.

Now we will show you how to add formatting to document with the style attribute.

» EXAMPLE:


<html>
<body style="background-color: red;">

<p style="font-family:verdana;color: red;">This text is in verdana and red.</p>

<p style="font-family:georgiacolor:green;">This text is in Georgia and green.</p>

<p style="font-size:40px;">This text is 40 pixels high</p>

<p>The background will be red but it can'not be displayed on this page.</p>

</body>
</html>



» Result:



This text is in verdana and red.
This text is in times and red.
This text is 40 pixels high
The background will be red but it can'not be displayed on this page.




» Deprecated tags and attributes


Deprecated tags – they will not be supported in future versions of HTML.

TAG
DESCRIPTION
<center>
Defines centered text.
<font> or <basefont>
Defines HTML fonts.
ATTRIBUTE
DESCRIPTION
align
Defines alignment text.
bgcolor
Defines the background color.
color
Defines the text color.












Common HTML Styles

» Background Color


» EXAMPLE:


<html>

<body style="background-color:red;">
<h2>This is the color of the background</h2>
<p>The result cannot be shown in this page.</p>
</body>

</html>



» Font Family, Color, and Size

The style attribute defines a style for the <p> element.

» EXAMPLE:


<html>
<body>
<h1 style="font-family:verdana;">This is heading</h1>
<p style="font-family:courier new; color:blue; font-size:25px;">This is paragraph</p>
</body>
</html>


» Result:

This is heading

This is paragraph



» Text Alignment

The style of <h1> elememt is defined by the style attribute.

» EXAMPLE:


<html>
<body>

<h1 style="text-align:center;">This is heading</h1>
<p>This is normal paragraph</p>

</body>
</html>

» Result:

This is heading

This is normal paragraph