08. HTML Styles

The HTML Style Attribute

It introduces the use of CSS in HTML.

<html>
<body style="background-color:gray;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in vardana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>

Deprecated Tags and Attributes

TAGS

<center>
<font> and <basefont>
<s> and <strike>
<u>

ATTRIBUTES

align
bgcolor
color

Common HTML Styles

Backgroung Color
<body style="background-color:gray">

<html>
<body style="background-color:gray">
<h2>Look:colored Background!</h2>
</body>
</html>

<html>
<body bgcolor="gray">
<h2>Look:colored Background!</h2>
<p>For future-proof HTML, use HTML styles instead:</p>
<p>style="background-color:gray"</p>
</body>
</html.

Font Family,Color, and Size

<html>
<body>
<h1 style="font-family:vardana">A heading</h1>
<p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p>
</body>
</html>

<html>
<body>
<p><font size="2" facce="vardana">
THis is a paragraph
</font></p>
<p><font size="5" face="Times" color="red">
This is another paragraph.
</font></p>
</body>
</html>

Text Alignment
<h1 style="text-alighn:center">

<html>
<body>
<h1 style="text-alighn:center">This is heading1</h1>
<p>The heading above is aligned to the center of this page.
      The heading above is aligned to the center of this page.
      The heading above is aligned to the center of this page.
</p>
</body>
</html>

<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page.
      The heading above is aligned to the center of this page.
      The heading above is aligned to the center of this page.
</p>
</body>
</html>

1 comment:

suman said...

nice article for beginners.thank you.
python tutorial
java tutorial

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams