-->

  • css external internal and inline files




    CSS Files

    There are Three ways to insert CSS style sheet


    • External style sheet
    • Internal style sheet
    • Inline style sheet




    External style sheet 



    with an external style sheet, you can change the look of an entire by website changing just one file.

    Each page must include a reference to the external style sheet file inside the <link> element.
    The <link> element goes inside the <head> section:



    Syntax  



    • <link rel = " stylesheet "    href = " style.css ">
    • style.css means this is a source of  file ( URL ).




    Example  



    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS External Files </title>



    <link rel = " stylesheet "    href = " style.css ">

    </head>

    <body>

    <h2>This is a heading.</h2>
    <p>This is paragraph.</p>

    </body>
    </html>



    Result





                     This is heading.

                      This is paragraph.



    A external sheet file can be written in any text editor like Notepad  ,   Notepad++  ,  Sublime ,  Alom ,  Brackerts   ,   pycham  Etc....

    The Style file must be saved  with  a   .css   extension.

    Here is Style.css File 



    body {

      background-color: #fff;  (    White color );
    }

    h1 {

      color: red;
      margin-left: 20px;

    }

    p  {

     color: blue;
    margin-left: 20px;

    }

















    Internal Style Sheet
    An internal style sheet may be used if one single page has a unique style.

    Internal styles are defined within the <style> element, inside the <head> section of an HTML page:


    Example


    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Internal Files </title>

    <style>


    body {


    }


    h1 {


      color: red;  margin-left: 20px;

    }


    p  {

     color: blue;margin-left: 20px;

    }


    </style>

    </head>

    <body>

    <h2>This is a heading.</h2>
    <p>This is paragraph.</p>

    </body>
    </html>



    Result





               This is heading.

                      This is paragraph.










    Inline Style Sheet
    An inline style may be used to apply a unique style for a single element.

    To use inline styles, add the style attribute to the relevant element. The style attribute can
     contain any CSS property.




    <html>
    <head>
    <title>CSS Internal Files </title>

    </head>

    <body>

    <h2   style="font-weight: bold; color: blue">This is a heading.</h2>
    <p  style="color: red;">This is paragraph.</p>

    </body>
    </html>



    Result





              This is heading.

                      This is paragraph.






    Multiple Style  Sheets

    If some properties have been defined for the same selector (element) in different style sheets,
    the value from the last read style sheet will be used.


    Example



    • Assume that an external style sheet has the following style for the <h1> element:



    h1 {

      color: red;


    }



    • then, assume that an internal style sheet also has the following style for the <h1> element:


    h1  {

    color: blue;

    }










    Example


    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Internal Files </title>

    <style>



    h1 {


      color: red;

    }

    </style>

    </head>

    <body>

    <h2>This is a heading.</h2>


    </body>
    </html>



    Result





               This is heading.

                    


    Here is External style sheet  ( style.css  )  :


    h1 {


      color: red;

    }











    • However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "blue":.




    Example


    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Internal Files </title>

    <style>



    h1 {


      color: red;

    }

    </style>


    <link rel = " stylesheet "    href = " style.css ">



    </head>

    <body>

    <h2>This is a heading.</h2>


    </body>
    </html>



    Result





               This is heading.






    Video on This Topic :-  SooN




    Have a Nice Stay Here   : - )








  • 0 comments:

    Post a Comment

    For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.