Scribd Logo
Upload

Welcome to Scribd!

  • Including CSS in HTML Document

    Uploaded by

    Rahul Upamanyu
    20 views6 pages
    css use in html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    css use in html

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views6 pages

    Including CSS in HTML Document

    Uploaded by

    Rahul Upamanyu
    css use in html

    Copyright:

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

    Including CSS In HTML Document

    <p> There are four different methods used to add CSS within HTML document.
    These methods differ on the basis of their placement, importance given to them by
    a browser and how much of the document they effect. They are given below:</p>
    <ul type=disc>
    <li><b>Inline Style Sheets</b></li>
    <li><b>Embedded Style Sheets</b></li>
    <li><b>Linking to an External Style Sheet</b></li>
    </ul>

    <h2>Inline Style Sheets</h2>


    <hr>
    <p><b>Inline Style Sheets</b> are those which are included within a single
    specific occurrence of an element in HTML document. In other words, they are
    placed <b>Inline</b> within the element. Its effect is limited to the element in
    which it is specified. </p>
    <b>Example:</b>
    <pre lang=HTML>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Inline Style Sheets</title>
    </head>
    <body>
    <h2>Inline Styles</h2>
    <hr />
    <p>
    We are learning how the inline style works.</p>
    <p style="color:#03F;font-size:24px">
    We are learning how the inline style works.

    </p>
    </body>
    </html>
    </pre>
    <h3>Output</h3>

    <h2> Embedded Style Sheet</h2>


    <hr>
    <p>The inline style is very useful if you want to apply styles to a specific
    occurrence of an element. But if you want to apply same style to all the occurrences
    of a specific element within the entire webpage then you will have to specify style
    to all the occurrences of the element which is a very time consuming process. So in
    order to solve this problem, the embedded style sheets are used.</p>
    <b>The General Form Is:</b>
    <pre lang=HTML>
    <head><title> Title Goes Here</title>
    <STYLE TYPE=text/css>
    </-CSS Rules
    ->
    </STYLE>
    </head>

    </pre>

    <p style="background-color:#ccff99;"><b>Note:</b> From the above syntax it is


    clear that the style rules are enclosed between the HTML comments </-- and --> so
    as it ignore the contents if the browser does not support CSS.</p>
    <h3>>Example></h3>
    <pre lang=HTML>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Embedded Style Sheets</title>
    <style type="text/css">
    <!-h1,p{color:blue;}
    -->
    </style>
    </head>
    <body>
    <h1>Headings is blue</h1>
    <p>This is the first paragraph of the webpage</p>
    <h2>It is the Next Heading</h2>
    </body>
    </html>
    </pre>

    <h3>Output:</h3>

    <h2>External Style Sheet:</h2>


    <hr>
    <p>An external style sheet is a template or file that consists only CSS rules. An
    external style sheet must have an extension <b>.css</b>. These files are stored
    separately from the WebPages of the website to which they are applied. In order to
    apply these rules, you need to just link this file to each webpage on the website to
    which rules need to be applied. This is done using <LINK> element in the
    <HEAD> section of the webpage.</p>
    <b>General Syntax for <LINK> Element :</b>

    In order to create an external style sheet in your website follow the following steps:
    <b>Step 1:</b> <p>To create an style sheet, use a plain text editor such as
    Notepad, Notepad++ etc. Specify all the rules that you need to use in your
    website.</p>
    <pre lang=CSS>
    @charset "utf-8";
    /* CSS Document */
    p{
    color:#609;

    font-size:18px;
    }
    h1{
    color:#0F6;
    font-family:Tahoma, Geneva, sans-serif;
    }
    </pre>
    <b>Step 2:</b> After specifying the necessary rules needed, save your style sheet
    with </b>.css</b> extension.

    <b>Step 3:</b> Now link the external style sheet using <LINK> element in the
    <HEAD> section of the webpage to which you want to apply the rule.

    <pre lang=html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>External Style Sheet</title>
    <link rel="stylesheet" type="text/css" href="file:///D|/CSS/css.css" />
    </head>
    <body>
    <h1>Applying External Style Sheets</h1>
    <hr />
    <p> This is the tutorial of External Style Sheets in CSS.</p>
    </body>
    </html>
    </pre>
    <h3>Output :</h3>

    You might also like