Scribd Logo
Upload

Welcome to Scribd!

  • Css Lesson 2

    Uploaded by

    Fahim Sabri
    54 views7 pages
    The document discusses different ways to add CSS to HTML pages, including external, internal, and inline CSS. External CSS uses external .css files linked via <link> tags, internal CSS defines styles between <style> tags in the <head>, and inline CSS uses the style attribute on individual elements. It provides examples of each method and demonstrates how to style various HTML elements by setting properties like background-color, color, and border color in CSS.

    Original Description:

    edited

    Original Title

    css lesson 2

    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
    The document discusses different ways to add CSS to HTML pages, including external, internal, and inline CSS. External CSS uses external .css files linked via <link> tags, internal CSS defines styles between <style> tags in the <head>, and inline CSS uses the style attribute on individual elements. It provides examples of each method and demonstrates how to style various HTML elements by setting properties like background-color, color, and border color in CSS.

    Copyright:

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

    Css Lesson 2

    Uploaded by

    Fahim Sabri
    The document discusses different ways to add CSS to HTML pages, including external, internal, and inline CSS. External CSS uses external .css files linked via <link> tags, internal CSS defines styles between <style> tags in the <head>, and inline CSS uses the style attribute on individual elements. It provides examples of each method and demonstrates how to style various HTML elements by setting properties like background-color, color, and border color in CSS.

    Copyright:

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

    How To Add CSS

    When a browser reads a style sheet, it will format the HTML document according to
    the information in the style sheet.

    Three Ways to Insert CSS


    There are three ways of inserting a style sheet:

     External CSS
     Internal CSS
     Inline CSS

    External CSS
    With an external style sheet, you can change the look of an entire website by
    changing just one file!

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

    body {
    background-color: lightblue;
    }

    h1 {
    color: navy;
    margin-left: 20px;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

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

    The internal style is defined inside the <style> element, inside the head section.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: linen;
    }

    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>

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

    </body>
    </html>

    Inline CSS
    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.
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>


    <p style="color:red;">This is a paragraph.</p>

    </body>
    </html>

    CSS Color Names


    In CSS, a color can be specified by using a color name:

    Tomato

    Orange

    DodgerBlue

    MediumSeaGreen

    Gray

    SlateBlue
    Violet

    LightGray

    <!DOCTYPE html>

    <html>

    <body>

    <h1 style="background-color:Tomato;">Tomato</h1>

    <h1 style="background-color:Orange;">Orange</h1>

    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

    <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

    <h1 style="background-color:Gray;">Gray</h1>

    <h1 style="background-color:SlateBlue;">SlateBlue</h1>

    <h1 style="background-color:Violet;">Violet</h1>

    <h1 style="background-color:LightGray;">LightGray</h1>

    </body>

    </html>

    CSS Background Color


    You can set the background color for HTML elements:

    <!DOCTYPE html>
    <html>

    <body>

    <h1 style="background-color:DodgerBlue;">Hello World</h1>

    <p style="background-color:Tomato;">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.

    </p>

    </body>

    </html>

    CSS Text Color


    You can set the color of text:

    <!DOCTYPE html>

    <html>

    <body>

    <h3 style="color:Tomato;">Hello World</h3>


    <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    magna aliquam erat volutpat.</p>

    <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis


    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    consequat.</p>

    </body>

    </html>

    CSS Border Color


    <!DOCTYPE html>

    <html>

    <body>

    <h1 style="border: 2px solid Tomato;">Hello World</h1>

    <h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

    <h1 style="border: 2px solid Violet;">Hello World</h1>

    </body>

    </html>

    You can set the color of borders:

    You might also like