HTML Styles

HTML Styles

  • Every HTML element has a default style (background color is white and text color is black).
  • 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 lightgrey:

Example:

I am Red

I am Blue

Try it Yourself


  Example:

<body style="background-color:lightgrey">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Try it Yourself

The HTML Style Attribute

The property is a CSS property. The value is a CSS value.
The HTML style attribute has the following syntax:
style="property:value"

 

HTML Text Color

The color property defines the text color to be used for an HTML element:

Example:

<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

Try it Yourself

 

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example:

<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>

Try it Yourself

 

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example:

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

Try it Yourself

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example:

<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>

Try it Yourself


Summary of Chapter 

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

Note :
      The <center> tag, supported in older versions of HTML, is not valid in HTML5.
      The <font> tag, supported in older versions of HTML, is not valid in HTML5.
      The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.

Share on Google Plus

About Blogger

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

1 comments:

Thank You...!