---

Search posts under HTML5:

---

Inline styles in HTML5

How to use styles in HTML5?

Styles:

HTML style attribute is is used to add the styles to the text.

HTML adding color to the text:

The syntax of HTML style

    style="property:value;"
    style="color:red;"

Defining the HTML styles

 <p><b>HTML styles </b></p>
    <p style="color:blue;">DOTNETFUNDA</p>
    <p style="color:green;">TECHFUNDA</p>

In the above code snippet we have defined styles using style tag. We have taken <p> tag as style color:as blue and color as green in another <p> tag. which display the text in the blue and green color

output

HTML background color:

HTML back ground color is used to add the background color to the html page

 <div style="background-color:pink;">
        <p>Dotnetfunda is an online tutorial which is used to learn and share the technologies</p>
        <p>Techfunda is an online tutorial which is used to learn technologies step by step manner</p>
    </div>

 Background color

In the above code snippet we have defined how to apply the background color. We have taken div as section and style as background color as pink and in that section we are having the text as in the <p> tag which appears the div section in the pink color in the output.

output

HTML Text Color:

It is used to add the color to the text.

 <p style="color:limegreen;">Dotnetfunda is an online tutorial which is used to learn and share the technologies</p>
    <p style="color:orange;">Techfunda is an online tutorial which is used to learn technologies step by step manner</p>

 HTML color

In the above code snippet we have defined adding color to the text. We have taken <p> tag. In that <p> tag we have given style as color as limegreen  and we have given text in that <p> tag which appears the color of the text as given colors

output

HTML fonts:

It is used to change the font style of the text 

<p style="font-family:Tahoma;">Dotnetfunda is an online tutorial which is used to learn and share the technologies</p>
    <p style="font-family:initial;">Techfunda is an online tutorial which is used to learn technologies step by step manner</p>
    <p style="font-family:Verdana;">Techfunda is an online tutorial which is used to learn technologies step by step manner</p>

HTML fonts

In the above code snippet we are defining the styles of the fonts. we are having three <p> tags. We are having style as

• font-family as Tahoma-renders as tahoma format
• font-family as initial- renders as intial format
• font-family as verdana - renders as verdana format

 <p style="font-size:20px;">Techfunda</p>
    <p style="font-size:45px;">Dotnetfunda</p>

 <p style="text-align:center">Techfunda</p>
    <p style="text-align:right">Dotnetfunda</p>
    <p style="text-align:left">ITFunda</p>