Scribd Logo
Upload

Welcome to Scribd!

  • Lab3 1

    Uploaded by

    umie
    5 views4 pages
    The document discusses different ways of applying styles in Cascading Style Sheets (CSS): 1. Inline styles define style rules directly in HTML tags. 2. Embedded style sheets define rules between <style> tags in the HTML <head> section. 3. External style sheets define rules in separate .css files linked via <link> tags. The document provides examples of each method. It demonstrates embedding a style sheet to set the <h1> color, creating an external .css file, and linking it using <link> tags. Finally, it shows overriding external styles by defining an inline style within an <h1> tag.

    Original Description:

    Original Title

    LAB3-1

    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
    The document discusses different ways of applying styles in Cascading Style Sheets (CSS): 1. Inline styles define style rules directly in HTML tags. 2. Embedded style sheets define rules between <style> tags in the HTML <head> section. 3. External style sheets define rules in separate .css files linked via <link> tags. The document provides examples of each method. It demonstrates embedding a style sheet to set the <h1> color, creating an external .css file, and linking it using <link> tags. Finally, it shows overriding external styles by defining an inline style within an <h1> tag.

    Copyright:

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

    Lab3 1

    Uploaded by

    umie
    The document discusses different ways of applying styles in Cascading Style Sheets (CSS): 1. Inline styles define style rules directly in HTML tags. 2. Embedded style sheets define rules between <style> tags in the HTML <head> section. 3. External style sheets define rules in separate .css files linked via <link> tags. The document provides examples of each method. It demonstrates embedding a style sheet to set the <h1> color, creating an external .css file, and linking it using <link> tags. Finally, it shows overriding external styles by defining an inline style within an <h1> tag.

    Copyright:

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

    LAB 3/TSE2543

    LAB MANUAL 3
    CASCADING STYLE SHEET (CSS)
    LEARNING OUTCOMES:

    Identify different ways of styles that enable user to customize HTML


    elements and precisely control the formatting of a web page.

    THEORY AND CONCEPTS:

    CASCADING STYLE SHEET (CSS)

    CSS is offering styles for your HTML program. Style in CSS can be defined
    as a set of formatting instructions that can be applied to a piece of text. In
    general, there are 3 mechanisms by which styles can be applied to
    documents:

    I. Inline Style Sheets – The style can be defined within the basic HTML
    tags.
    II. Document Level Style Sheets – Styles can be defined in the <head>
    section and applied to the whole document.
    III. External Style Sheets – Styles can be defined in external files called
    style sheets which can then be used in any document by including
    the style sheet via a URL.

    EMBEDDING A STYLE SHEET WITHIN HTML DOCUMENT

    When you embed a style sheet, the browser will apply the style sheet’s
    rules to the tags only on the page in which the style sheet declaration is
    inserted. You can apply CSS styles to any tag in a document.

    The following is an example on how to set the color of the heading text
    using CSS in a HTML document

    KOLEJ POLY- TECH MARA UMI KALSUM


    LAB 3/TSE2543

    1> <html>
    2> <head>
    3> <style type=”text/css”>
    4> h1 {color:red}
    5> </style>
    6> </head>
    7> <body>
    8> <h1>This is header 1</h1>
    9> <p>To set multiples property values for
    an element in 10> rule, simply separate each
    assignment using
    11> semicolons. </p>
    12> </body>
    13> </html>
    Line 3-5: You embed a style sheet, you need to insert the style sheet’s rules
    between the start and end style tags (<style>…</style>) within the header
    section. The type attribute in the <style> tag tells the browser the type of
    style sheet to expect. Line 4 contains rules that set heading level 1 (<h1>)
    to red colour.

    ACTIVITY 1

    Base on above style declaration, redefine the style attributes of the


    <body>tag. To do this, enter the above HTML tags into new file called
    Embed.html. Using any text editor such as notepad, declare the CSS
    styles for <body> tag that support following property values:

    KOLEJ POLY- TECH MARA UMI KALSUM


    LAB 3/TSE2543

    ATTACHING AN EXTERNAL STYLE SHEET TO HTML


    DOCUMENT

    The CSS styles you’ve created so far are only applied to one document.
    Internal style sheets apply only to the document in which they were
    created. Now, you’ll learn how to create an external style sheet which
    contains the styles you defined in the document you created before.

    1. First, create a new notepad file and save it as mystyle.css.


    2. Rewrite the CSS style from the previous example but remember, you
    must ignore the opening and closing <style> tag.
    3. At this point you only need to write a single sentence,

    4. Save your file.


    5. Next, rewrite the same example and save it as external.html.
    Remember to remove the style part (from the opening <style> tag to
    the closing <style> tag).
    6. You need to link these two files in order to make it work.
    7. Write this statement in your external.html inside the opening and
    closing<head> tag.

    8. Then, write <H1>This is header 1</H1>


    9. Save your work. Open your external.html in the browser and you’ll
    see the same result.

    KOLEJ POLY- TECH MARA UMI KALSUM


    LAB 3/TSE2543

    DEFINING STYLE INLINE WITHIN HTML TAGS

    With inline styles, you define a tag’s style within the tag itself. Inline style
    is very useful for overriding inherited styles in external or embedded style
    sheets. We are going to use the example from external.html to see how
    its work.

    1. Rewrite the HTML code from external.html, save it as inline.html.


    2. The part that will be affected from mystyle.css is inside the H1. We
    will try to override the effect by modifying the code as below:

    3. Save your work and see the result.

    KOLEJ POLY- TECH MARA UMI KALSUM

    You might also like