Scribd Logo
Upload

Welcome to Scribd!

  • Ch-3 Css Types of CSS Inline "Inline-Styles - HTML": Lab Session 3

    Uploaded by

    Rass Seyoum
    19 views5 pages
    This document discusses different types of CSS including inline, embedded, external, and imported CSS. It provides code examples of each type. Inline CSS uses the style attribute within HTML elements. Embedded CSS defines rules within the <style> element in the <head>. External CSS links to a separate .css file using the <link> element. Imported CSS imports a .css file using the @import rule within the <style> element. The document concludes with an exercise to use different CSS selectors like type, id, and class selectors to style HTML elements.

    Original Description:

    Original Title

    Lab Session 3

    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
    This document discusses different types of CSS including inline, embedded, external, and imported CSS. It provides code examples of each type. Inline CSS uses the style attribute within HTML elements. Embedded CSS defines rules within the <style> element in the <head>. External CSS links to a separate .css file using the <link> element. Imported CSS imports a .css file using the @import rule within the <style> element. The document concludes with an exercise to use different CSS selectors like type, id, and class selectors to style HTML elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    19 views5 pages

    Ch-3 Css Types of CSS Inline "Inline-Styles - HTML": Lab Session 3

    Uploaded by

    Rass Seyoum
    This document discusses different types of CSS including inline, embedded, external, and imported CSS. It provides code examples of each type. Inline CSS uses the style attribute within HTML elements. Embedded CSS defines rules within the <style> element in the <head>. External CSS links to a separate .css file using the <link> element. Imported CSS imports a .css file using the @import rule within the <style> element. The document concludes with an exercise to use different CSS selectors like type, id, and class selectors to style HTML elements.

    Copyright:

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

    Lab Session 3

    CH-3 CSS
    Types of CSS
    Inline
    “inline-styles.html”
    <!DOCTYPE html ">
    <html >
    <head>
    <title>Inline Styles</title>
    </head>
    <body>
    <p>Here is some text</p>
    <!--Separate multiple styles with a semicolon-->
    <p style="font-size: 20pt">Here is some
    more text</p>
    <p style="font-size: 20pt;color:
    #0000FF" >Even more text</p>
    </body>
    </html>
    Embedded CSS
    You can put your CSS rules into an HTML document using the <style> element.
    This tag is placed inside <head>...</head> tags.
    <!DOCTYPE html>
    <html ">
    <head>

    Prepared by Mayet G. Information System 3rd year


    <title>Style Sheets</title>
    <style type="text/css">
    em {background-color:#8000FF; color:white}
    h1 {font-family:Arial, sans-serif}
    p {font-size:18pt}
    .blue {color:blue}
    </style>
    <head>
    <body>
    <h1 class="blue">A Heading</h1>
    <p>Here is some text. Here is some text. Here
    is some text. Here is some text. Here is some
    text.</p>
    <h1>Another Heading</h1>
    <p class="blue">Here is some more text.
    Here is some more text.</p>
    <p class="blue">Here is some <em>more</em>
    text. Here is some more text.</p>
    </body>
    </html>
    External CSS
    The <link> element can be used to include an external stylesheet file in your HTML
    document.
    1. Write this and save the file as “style.css”
    /* CSS Document */
    a { text-decoration: none }

    Prepared by Mayet G. Information System 3rd year


    a:hover { text-decoration: underline;
    color: red;
    background-color: #CCFFCC }
    li em { color: red;
    font-weight: bold }
    ul { margin-left: 2cm }
    ul ul { text-decoration: underline;
    margin-left: .5cm }
    2. Write the above html file, include h1-h3 tags, and save it, as “externalcss.html” don’t
    include <style> tag.
    <!DOCTYPE html">
    <head>
    <title>Importing style sheets</title>
    <link type="text/css" rel="stylesheet"
    href="styles.css" />
    </head>
    <body>
    <h1>Shopping list for <em>Monday</em>:</h1>
    <li>Milk</li>
    <li>Bread
    <ul>
    <li>White bread</li>
    <li>Rye bread</li>
    <li>Whole wheat bread</li>
    </ul>

    Prepared by Mayet G. Information System 3rd year


    </li>
    <li>Rice</li>
    <li>Potatoes</li>
    <li>Pizza <em>with mushrooms</em></li>
    </ul>
    <a href="http://food.com" title="grocery
    store">Go to the Grocery store</a>
    </body>
    </html>
    Imported CSS
    @import is used to import an external stylesheet in a manner
    similar to the <link> element. Change the above <head>
    tag with the following to use imported css
    <style type="text/css">
    @import url("styles.css");
    /* same as */
    @import "styles.css";
    </style>
    Exercise
    Use your own html file to use the styles and apply all selector types
    Three primary kinds of selectors:
    By tag (type selector): <tag>{ font-family: verdana,sans-serif; }
    By element id: #element_id { color: #ff0000; }
    By element class name (only for HTML): .myClass {border: 1px solid red}
    Selectors can be combined with commas: h1, .link, #top-link {font-weight: bold}

    Prepared by Mayet G. Information System 3rd year


    Hint: (use “id”, “class” attributes for corresponding html elements.)

    Prepared by Mayet G. Information System 3rd year

    You might also like