Scribd Logo
Upload

Welcome to Scribd!

  • Types of CSS: Internal Style Sheet

    Uploaded by

    Ashutosh Trivedi
    6 views12 pages

    Original Title

    Types of CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views12 pages

    Types of CSS: Internal Style Sheet

    Uploaded by

    Ashutosh Trivedi

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    Types of CSS

    There are three ways of inserting a style sheet in any Html documents, they are
    given below;

    • Inline style sheet


    • Internal style sheet
    • External style sheet

    Inline Styles Sheet

    ✓ Inline CSS is use with any elements of HTML where it is used on page.
    Here we use inline css for paragraph, the example shows how to change
    the color and the left margin of a paragraph:

    Example of inline css for<p< tag


    Example

    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

    Internal Style Sheet

    ✓ An internal style sheet should be used when a single document has a


    unique style. Internal styles sheet is defined in the head section of an
    HTML page, by using the <style> tag, like below:
    Example

    <html>
    <head>
    <style>
    hr {
    color:red;
    }
    p{
    margin-left:20px;
    }
    </style>
    </head>
    <body>
    <p>This is paragraph</p>
    <hr>
    <p>This is paragraph</p>
    </body>
    </html>

    Example

    This is h2 heading

    This is paragraph

    External Style Sheet

    ✓ An external style sheet is ideal when the style is applied to many pages.
    With an external style sheet, we can change the look of an entire Web site
    by changing one file. Each page must link to the style sheet using the tag.
    The tag goes inside the head section:
    Example

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    </html>

    ✓ An external style sheet can be written in any text editor like notepad, edit
    plus etc. The file should not contain any html tags. Your style sheet should
    be saved with a .css extension. An example of a style sheet file is shown
    below:

    Example

    hr
    {
    color:sienna;
    }
    P
    {
    margin-left:20px;
    }
    body
    {
    background-image:url("images/back40.gif");
    }

    Note: Do not add a space between the property value and the unit (such as
    margin-left:20 px). The correct way is: margin-left:20px
    Inline Styles Sheet

    ✓ Inline CSS is used with any elements of Html where it is used on page.
    Here we use inline css for paragraph, the example shows how to change
    the color and the left margin of a paragraph:

    Example of inline css for <p> tag


    Example

    <html>
    <body>
    <p style="color:red; margin-left:20px">This is paragraph.</p>
    </body>
    </html>

    Result

    This is paragraph.

    Example of inline css for <h1> tag


    Example

    <html>
    <body>
    <h1 style="color:green; font-size:20px">This is h1 Heading.</h1>
    </body>
    </html>

    Result

    This is h1 Heading.

    For using inline css we need style attribute to set all the properties of Html
    elements(<p>, <body>, <img>).
    Advantage of inline css

    • Less Loading time

    Internal Style Sheet

    ✓ An Internal style sheet should be used when a single document has a


    unique style (like same color and font for all paragraph). we define
    internal styles in the head section of an Html page, by using
    the <style> tag, like below:
    Example

    <html>
    <head>
    <style>
    h1
    {
    color:cyan;
    }
    p
    {
    color:red;
    margin-left:20px;
    }
    body
    {
    background:green;
    }
    </style>
    </head>
    <body>
    <h1>This is h1 Heading</h1>
    <p>This is paragraph</p>
    </body>
    </html>

    Result
    This is h1 Heading

    This is paragraph
    ▪ Internal css is useful in case of if we want to all paragraph of our html
    documents have same size and color that means all have same properties.
    And if we want all h1 header have same color on our page then this is
    useful.

    ▪ Suppose we are use 5 times <h1> tag in our Html page then it is better to
    declare internal css for all <h1> tag once. If here we use inline css then we
    need to apply 5 times css on this <h1> tag.
    Example of Internal CSS

    Example

    <html>
    <head>
    <style>
    h1
    {
    color:red;
    }
    p
    {
    margin-left:20px;
    color:yellow;
    }
    body
    {
    background-color:#000;
    }
    </style>
    </head>
    <body>
    <h1>This is internal css</h1>
    <p>Internal css is very simple and easy</p>
    <h1>This is my css</h1>
    <p>My css concept is strong</p>
    <h1>Css is easy to learn</h1>
    <p>Css is simple and easy to learn</p>
    </body>
    </html>

    External Style Sheet


    ▪ An external style sheet is ideal or useful when the same style is applied to
    many pages. With an external style sheet, we can change the look of an
    entire Web site by changing one file. Each page must link to the style sheet
    using the <link> tag. The <link> tag goes inside the head section:

    <link> tag

    ▪ The <link> tag defines the relationship between a html document and an
    external resource. The <link> tag is mostly used to link style sheets file to
    html pages.

    Syntax

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    </html>

    ▪ An external style sheet can be written in any text editor like notepad, edit
    plus etc. The file should not contain any html tags. Your style sheet should
    be saved with a .css extension. An example of a style sheet file is shown
    below:

    Example

    <style>
    h1
    {
    color:red;
    }
    p
    {
    margin-left:20px;
    color:yellow;
    }
    body
    {
    background-color:#000;
    }
    </style>

    Example of External CSS

    ▪ First we write html page and save it with .html extension.


    Example

    <html>
    <head>
    <!-- Here we import css file using <ink> tag -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <h1>This is heading</h1>
    <p>This is paragraph</p>
    </head>
    </html>

    ▪ Again we write a css page and save it with .css extension. In the above code
    mystyle is css file name. Below is our css code.
    Example
    <style>
    h1
    {
    color:red;
    }
    p
    {
    margin-left:20px;
    color:yellow;
    }
    body
    {
    background-color:#000;
    }
    </style>

    Result
    This is heading

    This is paragraph
    ▪ In the above image we use same css (style.css) file for all the pages
    (index.html, About.html, help.html, contact.html).

    You might also like