HTML style Object – HTML Tutorial

This “HTML Style Object” post explains clearly about style object in HTML and its properties including how to declare style object, how to separate property with its value, how many properties we can use for each property and much more.


HTML Style Object:

  • “style” is an object
  • It is providing a number of properties.
  • “style” properties we can apply on any type of element.
  • “style” properties must be placed in “quotes”
  • “style” object property name and value separates by colon( : ) .

 

Syntax:
      style = “property : value”

 

  • 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.

 

<!DOCTYPE html>
<html>
<body>
<h2 style=”color:red”>I am Red</h2>
<h2 style=”color:blue”>I am Blue</h2>
</body>
</html>

 

  • Generally a hyperlink on the web page as follows :
    <!DOCTYPE html>
    <html>
    <body>
    <a href = “abc.html”>link1</a>
    </body>
    </html>

 

  • But we can apply fonts and increase the size and decorate the hyper link using style object attributes.
    <!DOCTYPE html>
    <html>
    <body>
    <h1 style=”font-family:verdana”>A heading</h1>
    <a href=”abc.html” style=”font-size:40px;text-decoration:none”>link1</a>
    <p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
    </body>
    </html>

 

  • We can use style object to set the styles to entire body also :
    <!DOCTYPE html>
    <html>
    <body style=”background-color:cyan”>
    <h2 style=”background-color:red”>This is a heading</h2>
    <p style=”background-color:green”>This is a paragraph.</p>
    </body>
    </html>

 

<!DOCTYPE html>
<html>
<body style=”background-image:url(C:/Users/welcome/Desktop/blog.png); margin:100 100 100 100; text-align:justify;
background-repeat:repeat-y; background-attachment:fixed”>
</body>
</html>

 

  • Here text-align attribute having four values called left, right, center, justify.
  • Background-repeat attribute having three values called repeat-x, repeat-y, no-repeat.

Next Topic:         Fonts in HTML

Share this