HTML Styling | html Style Attributes (Color, Font, Size, Alignment )

HTML Styles

HTML Styling
Every HTML element has a default style background color is white, text color is black, text-size is 12px You Can Changing the of an HTML element default style with the style attribute. Below this example we will changes the default background color from white to magenta:

HTML CODE EXAMPLE : Change HTML web page default background color

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

<h1> hello I am a h1 heading with  Magenta Background. </h1>

<p> hello I am a paragraph  with  Magenta Background  .</p>

</body>

Note : The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.

The HTML Style Attribute

HTML style attribute syntax

HTML CODE EXAMPLE : HTML Style Attribute syntax

  
style="property:value;"

Here The property is a CSS property and The value is a CSS value.
Note: You will learn more about CSS later in this tutorial.

HTML Text Color
In HTML color property describe the text color to be used for an HTML element

HTML CODE EXAMPLE : HTML Text Color

<!DOCTYPE html>
<html>
<body>
  <h1 style="color:teal;">Hello I am a h1 heading</h1>
  <p style="color:green;"> Hello I am a paragraph.</p>
</body>
</html>

HTML Text Fonts

In HTML font-family property describe the font to be used for an HTML element.

HTML CODE EXAMPLE : Font-Family Property

<!DOCTYPE html>
<html>
<body>
  <h1 style="font-family:algerian">This is a heading</h1>
  <p style="font-family: Bauhaus ">This is a paragraph.</p>
</body>
</html>

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

HTML Text Size

In HTML font-size property describe the text size to be used for an HTML element.

HTML CODE EXAMPLE : HTML Text Size

<!DOCTYPE html>
<html>
<body>
  <h1 style="font-size:300%">Hello I Am  A heading With With Font Size 300%</h1>
  <p style="font-size:150%"> Hello I Am  A paragraph With Font Size 150%</p>
</body>
</html>

HTML Text Alignment

In HTML the text-align property describe the horizontal text alignment for an HTML element

HTML CODE EXAMPLE : HTML Text Alignment

<!DOCTYPE html>
<html>
<body>
  <h1 style="text-align:center;"> Heading With Center Alignment </h1>
  <p style="text-align:right;">Hello I Am  A Paragraph, And My Align Is Right</p>
</body>
</html>

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

Chapter Summary

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

<< PREV POST NEXT POST >>

Sunday, March 28, 2021

HTML Styling | html Style Attributes (Color, Font, Size, Alignment )

LABELS CLOUD

HTML

CSS