Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Lab 2

    Hochgeladen von

    Raheem
    153 Ansichten4 Seiten
    This document provides instructions for Lab 2 on basic CSS for a course on web design and programming. The objectives are to apply CSS rules, define inline, internal, and external stylesheets, and use CSS selectors. For Task 1, students are instructed to write CSS rules in an external stylesheet file and link it to an HTML file to style elements. For Task 2, students add inline and internal stylesheets to another HTML file to style elements. Task 3 states that using basic selectors will be continued in further instructions.

    Originalbeschreibung:

    Originaltitel

    LAB 2

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    This document provides instructions for Lab 2 on basic CSS for a course on web design and programming. The objectives are to apply CSS rules, define inline, internal, and external stylesheets, and use CSS selectors. For Task 1, students are instructed to write CSS rules in an external stylesheet file and link it to an HTML file to style elements. For Task 2, students add inline and internal stylesheets to another HTML file to style elements. Task 3 states that using basic selectors will be continued in further instructions.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    153 Ansichten4 Seiten

    Lab 2

    Hochgeladen von

    Raheem
    This document provides instructions for Lab 2 on basic CSS for a course on web design and programming. The objectives are to apply CSS rules, define inline, internal, and external stylesheets, and use CSS selectors. For Task 1, students are instructed to write CSS rules in an external stylesheet file and link it to an HTML file to style elements. For Task 2, students add inline and internal stylesheets to another HTML file to style elements. Task 3 states that using basic selectors will be continued in further instructions.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    SOKOINE UNIVERSITY OF AGRICULTURE

    DIRECTORATE OF COMPUTER CENTER

    DIT 0211: WEB DESIGN AND PROGRAMMING

    LAB2: BASIC CSS


    Objectives

    To be able to apply the CSS rules


    To be able to define and use inline, internal and external stylesheets
    To be able to use CSS selectors

    General Instructions
    1. Implement all the programs give using text editor to make yourself used to CSS syntax and
    its properties
    2. Attempt all questions relating to each program
    3. In first place, try working independently, in case you face any difficulties you may discuss
    with your fellows or you consult me(Instructor)
    4. To have more understanding on these programs, you are advised to make some modification
    in some properties so that you can experience different results
    1|Page
    DIT 0211: LAB 2

    TASK 1: Writing CSS rules and defining External Stylesheets


    1. Create the HTML Program 1.1 and save it with the name of index.html
    2. Preview HTML file created in step (1) above
    3. Create the CSS Program 1.2 and save it (in the same location where you saved the HTML
    above) with the name mycss.css
    4. In the <head> tag of HTML file created above , add the following code : <link
    href="mycss.css" type="text/css" rel="stylesheet"> in order to link
    the CSS file to HTML file
    5. Refresh the page to see if the effects of CSS is applied to your HTML code
    6. If you observe the changes , then you have successfully and correctly written CSS rules and
    linked the external CSS file to the HTML file
    Program 1.1

    <html>
    <head>
    <title>CSS rules and External linking</title>
    </head>
    <body>
    <h1>CSS test</h1>
    <p>
    The book required should have a cover colored <span
    class="blue"> light blue </span> and
    papers with <span class="green"> dark green </span>
    background.
    </p>
    </body>
    </html>

    Program 1.2
    h1{
    font-size: 20px;
    text-align: center;
    color: #3feb14;
    }
    span.blue{
    color:lightskyblue; font-weight:bold;
    }
    span.green{
    color:darkolivegreen; font-weight:bold;
    }

    2|Page
    DIT 0211: LAB 2

    TASK 2: Inline and internal CSS linking


    1. Create the following HTML program and save it with the name of program2.html
    <html>
    <head>
    <title> inline and internal linking </title>
    </head>
    <body>
    <h1> CSS EXAMPLE </h1>
    <p> This is a paragraph </p>
    </body>
    </html>

    2. Preview HTML file created in step (1) above


    3. In the <head> tag write the following code to add internal CSS linking.
    Note that the internal CSS linking is achieved by writing the CSS code within the <style>
    tag. The <style> tag should always be placed in head section of an HTML document.

    <style type="text/css">
    body { background-color:red;}
    h1 { color:orange; text-align:center;}
    p { font-family: "Times new roman "; font-size: 20px;}
    </style>
    4. In <h1> add the attribute style whose value is font-style:italic; to add
    internal stylesheet i.e. style=font-style:italic .
    NB: To add internal stylesheet, add the style attribute to the selected HTML that you need
    to apply your CSS code and then write your CSS properties as attribute values of such style
    attribute
    5. Save the changes you have made in program2.html and preview(refresh) it
    6. If you observe the changes , then you have successfully and correctly implemented Inline
    and internal CSS linking the given HTML file

    3|Page
    DIT 0211: LAB 2

    TASK 3: Using basic Selectors


    To be continued.

    4|Page
    DIT 0211: LAB 2

    Das könnte Ihnen auch gefallen