HTML Styles

    Every browser has a specific engine which parses the HTML document and displays a default style of the page content.

    HTML Style Attribute

    style is an attribute that can be used along with many HTML tags. With the help of style, we can change the default style of the element by changing their font size, colour, font etc. It is also known as Inline CSS, where we can change the individual element style.

    Style syntax

    <tagname style="property:value;">

    property and value are part of CSS.

    Change the background Color

    Using the CSS background-color property we can change the background colour of <body> and all the HTML elements that are under body tag. Example

    <body style="background-color:yellow;">
    
    <h1>TechGeekBuzz</h1>
    <p>Welcome to TechGeekBuzz.</p>
    
    </body>

    This will change the background colour of the page from white to yellow.

    Change the Text colour

    By default, black is the colour of every text element, but it can be changed using style attribute and color property.

    Example

    <h1 style="color:red;">This heading is Red</h1>
    <p style="color:blue;">The colour of this paragraph is Blue.</p>

    Change Text Font

    The font of the text can be altered using font-family property.

    <h1 style="font-family:calibri;">TechGeekBuzz</h1>
    <p style="font-family:batang;">HTML 5 Tutorial </p>

    Change Text Size

    The size of the text can also be changed using style attribute and font-size property.

    <h1 style="font-size:400%;">TechGeekBuzz</h1>
    <p style="font-size:200%;">HTML 5 Tutorial </p>

    Align Text

    The alignment of the text can also be altered using CSS text-align property, we can put text in the centre, left or right.

    <h1 style="text-align:center;">TechGeeKBuzz</h1>
    <p style="text-align:left;">Welcome to TechGeekBuzz.</p>

    Multiple Style properties

    Within a single element, we can define multiple style property. For instance, if we want to change the font size and colour of a paragraph tag then we can pass multiple CSS properties in that paragraph tag.

    Example

    <h1 style="color: red;">TechGeeKBuzz</h1>
    <p style=" color:blue; font-family:algerian;"> Welcome to TechGeekBuzz.</p>

    Summary

    • style is an attribute, which can work along with many HTML body elements.
    • With style, we can change the style, font, colour, background, etc. of a page.
    • The HTML style attribute is also known as inline CSS.
    • Styling an element will be limited to that element; it won’t affect similar other elements present on the document.
    • style properties and values are part of CSS.

    People are also reading: