Styles in HTML

0
133
views

Style Attribute in HTML

You can change the style of a particular element in HTML by using HTML style attribute.
style attribute is also known as inline CSS.

The style attribute, follows this below syntax:

<tagname style="property:value;">

or

<style>
tagname {property: value;} 
</style>

NOTE:  It is recommended that one should have to define this type of style before the body tag.

Although, The property is a CSS property. The value is a CSS value. 

 

HTML Background Color

By using the background-color property, one can change the color of the background of a HTML web page

This example changes the background color for a page to lightgreen:

 

 Example

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

The color property defines the text color for an HTML element:

 

Styling Fonts

The font-family property sets the fonts to be described for an HTML element.

Example

<h1 style="font-family:Times new roman">
 It's a Times new roman heading 

</h1>
    
<h2 style="font-familt:veranda"> It's averanda heading </h2>

Text Color in HTML 

You can set the different colors by using color property as given in the first example image.

Example

 


<h1 style="color:black;"> It's a big heading </h1>

<h2 style= "color:green;"> It's a green heading </h2>

<h3 style="color:orange; "> It's a orange heading </h3>

 

HTML Text Size

The font-size can also be manipulated by this styling.

Example

<h1 style="color:black; font-size:50px;"> It's a big heading </h1>
    
<h2 style= "color:green; font-size:100px;"> It's a green heading </h2>
<h3 style="color:orange; font-size:20px;"> It's a orange heading </h3>

Chapter summary:

  • Use the styleattribute for styling HTML elements
  • Use background-colorfor background color
  • Use colorfor text colors
  • Use font-familyfor text fonts
  • Use font-sizefor text sizes