Tutorial-BootStrap

HTML Styles

HTML Style Attribute

The style of an HTML element can be modified using the style attribute

below is the syntax of style attribute:

<tagname style="property:value;">

HTML Background color

Set the background color of an HTML element using the background-color property

Example

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

    <h1>Heading Element </h1>
    <p>Paragraph Element</p>

</body>

HTML color

Set the text color for an HTML element using the color property

Example

<body style="color:green">

    <h1 style="color:red">Heading Element </h1>
    <p style="color:purple">Paragraph Element</p>
    <p>Paragraph Element with no style set.
        It inherits from the parent element
    </p>

</body>

HTML Fonts

Set the font type for an HTML element using the ‘font-family’ property

Example

<body style="font-family:verdana;">

    <h1 style="font-family:courier;">Heading Element </h1>
    <p style="font-family:Comic Sans MS">Paragraph Element</p>
    <p>Paragraph Element with no style set.
        It inherits from the parent element
    </p>

</body>

HTML Text Alignment

Set the font type for an HTML element using the ‘font-family’ property

Example

<body style="font-family:verdana;">

    <h1 style="font-family:courier;text-align:center;">Heading Element</h1>
    <p style="text-align:left;">Paragraph Element</p>
    <p> Paragraph Element with no style set.
    It inherits from the parent element
    </p>

</body>

HTML Text Size

Set the font size for an HTML element using the font-size property

Example

<body>

    <h1 style="font-size:300%">Heading Element </h1>
    <p style="text-align:left;">Paragraph Element</p>
    <p>Paragraph Element with no style set.
        It inherits from the parent element
    </p>

</body>

Live Examples

All the live examples for the style properties can be found here