HTML | style attribute

Styles in HTML are basically rules that describe how a document will be presented in a browser. Style information can be either attached as a separate document or embedded in the HTML document.

There are 3 ways of implementing style in HTML :

  1. Inline Style : In this method, the style attribute is used inside the HTML start tag.
  2. Embedded Style : In this method, the style element is used inside the <head> element of the document.
  3. External Style Sheet : In this method the <link> element is used to point to an external CSS file.

Inline Style :

In Inline styling, the CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a series of CSS property and value pairs. Each ‘ property : value ‘ pair is separated by a semicolon ( ; ).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
  
<h1 style="color:Blue;font-size:25px;">
                Example of Inline Style</h1>
  
<p style="color:red;">First paragraph</p>
  
<p style="color:green;font-size:40px;">
                        Second paragraph</p>
  
<hr style="border-color:orange;">
  
</body>
</html>

chevron_right


Output :

Embedded Style :

Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang = "en">
<head>
<style type = "text/css">
body { background-color : powderblue; }
h1{color:black; font-family : arial;}
p{color:yellow; font - family : verdana;}
</style>
</head>
<body>
    <h1>Example of Embedded Style</h1>
    <p>First paragraph.</p>
</body>
</html>

chevron_right


Output :

External Style Sheet :

External Style Sheets method can be useful when the CSS has to be applied to various web pages. An external style sheet holds all the style rules in a separate document that you can link from an HTML file on your site.
There are two ways of attaching external style sheets –

  • Linking External Style Sheets :
    In this method, an external style sheet is linked to an HTML document using the <link> tag.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" 
                href="/html/css/externalstyle.css">
    </head>
    <body>
        <h3>Example of Linking External Style Sheet</h3>
        <p>First paragraph.</p>
    </body>
    </html>

    chevron_right

    
    

    Output :

  • Importing External Style Sheets :
    External style sheets can be loaded into an HTML document using “@import”. The “@import” statement instructs the browser to load the CSS file. Other CSS rules can also be included using the <style> element.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <style type = "text/css"
        @import url("/html/css/importstyle.css");
    p{color:powderblue; font - size : 30px;}
    </style>
    </head>
    <body>
        <h3>Example of external style sheet using import</h3>
        <p>First paragraph</p>
    </body>
    </html>

    chevron_right

    
    

    Output :



  • My Personal Notes arrow_drop_up

    I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.