1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Inline and CSS Styles in HTML

Discussion in 'Web Design, HTML And CSS' started by MinalS, Jun 16, 2016.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    31
    Trophy Points:
    0
    Style attribute

    The style attribute is used for defining the styles which is applied to specific HTML element. The syntax for the style attribute is:

    Code:
    style = “property:value;”
    
    where,
    • property defines any valid CSS property
    • value is a CSS value
    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Style</title>
    </head>
    <body>
    <h1 style="color:orange;">Orange color</h1>
    <p style="color:blue;">Blue color</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Text color

    Using the color property, user can define the color of the element.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Text color</title>
    </head>
    <body>
    <h1 style="color:Maroon;">Text color in HTML</h1>
    <p style="color:Green;">Text color is green</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Background color

    The color of background can be changed using the background – color property.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Background color</title>
    </head>
    <body style="background-color:Aqua;">
    <h1 style="color:Maroon;">Text color in HTML</h1>
    <p style="color:Green;">Text color is green</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Text size

    The size of the text is defined using the font – size property.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Text size</title>
    </head>
    <body>
    <h1 style="font-size:200%;">Defines the size of the text</h1>
    <p style="font-size:130%;">Size of the text can be changed</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Fonts

    Different fonts can be assigned to the text using the font – family property.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Fonts</title>
    </head>
    <body>
    <h1 style="font-family:courier;">Font style is courier</h1>
    <p style="font- family:arial;">Font style is arial</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Text alignment

    Using the text – align property, user can align the text.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Text align</title>
    </head>
    <body>
    <h1 style="text-align:center;">Center alignment</h1>
    <p style="text-align:left;">Left alignment</p>
    </body>
    </html>
    
    Output:

    [​IMG]
     
    Last edited by a moderator: Jan 21, 2017

Share This Page