Scribd Logo
Upload

Welcome to Scribd!

  • Https - Myguru - Upsi.edu - My - Documents - 2020 - Courses - MTD3063 - Material - K00814 - 20201005132608 - 03 CSS

    Uploaded by

    nurshazihah
    115 views17 pages

    Original Title

    https___myguru.upsi.edu.my_documents_2020_courses_MTD3063_material_K00814_20201005132608_03 CSS (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    115 views17 pages

    Https - Myguru - Upsi.edu - My - Documents - 2020 - Courses - MTD3063 - Material - K00814 - 20201005132608 - 03 CSS

    Uploaded by

    nurshazihah

    Copyright:

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

    MTD3063

    DATABASE DRIVEN WEB PROGRAMMING


    SEM 1 SESSION 2020/2021

    1
    CSS

    2
    CSS

    YouTube: Evolution of Web Design 1990-2019 3


    CSS
    • CSS - Cascading Style Sheets
    • To control the style of a Web document
    • What can we do with CSS that we can’t do with HTML?
    • Control of backgrounds.
    • Set font size to the exact height you want.
    • Highlight words, entire paragraphs, headings or even individual
    letters with background colors.
    • Precise positioning.

    A GOOD PRACTICE: warna, layout, fonts…


    4
    STRUKTUR ASAS CSS
    CODING: The basic syntax of a CSS rule:

    selector
    HTML element tags property value
    (e.g. p, h2, body, img, table class, (e.g. color, font-size) (e.g. red, 14pt)
    ID names)

    A GOOD PRACTICE: Notice the { } around the rule and the : before
    each value! Close each value with a semicolon ;.
    5
    STRUKTUR ASAS CSS

    <p style="font-size: 10pt; color: red”> CSS ini dalam HTML tag. </p>

    6
    STRUKTUR ASAS CSS
    INLINE (a.k.a. local)

    7
    STRUKTUR ASAS CSS
    INTERNAL
    (a.k.a. global or
    embedded)

    8
    STRUKTUR ASAS CSS
    EXTERNAL
    (a.k.a. linked)

    A GOOD PRACTICE:
    Use external stylesheet.
    9
    STRUKTUR ASAS CSS
    EXTERNAL
    (a.k.a. linked)

    as a new file

    10
    WHY EXTERNAL STYLESHEET?

    This single stylesheet can be used to define the look of multiple


    pages.

    11
    <html>
    <head>
    <link rel=“stylesheet” href=“FitBloggin.css”
    type=“text/css” media=“screen”>
    <style>
    p {color; FF0033;}
    </style>
    </head>
    <body>
    <p style=“color: FF0033;”>Some text!</p>
    </body>
    </html>

    12
    <html>
    <head>
    <link rel=“stylesheet” href=“FitBloggin.css” EXTERNAL CSS
    type=“text/css” media=“screen”>
    <style>
    p {color; FF0033;} INTERNAL CSS
    </style>
    </head>
    <body>
    <p style=“color: FF0033;”>Some text!</p> INLINE CSS
    </body>
    </html>

    13
    PENYEDIAAN WEB PAGE LENGKAP
    Applying styles to portions of a document:
     <div>
     A division tag: to “package” a block of document into one unit. It defines a
    block element.
     Causes a line break, like <br> and <p>.
     <span>
     “Wraps” a portion of text into a unit, but doesn't cause a line break. Allows
    styles to be applied to an 'elemental' region (such as a portion of a
    paragraph).

    14
    PENYEDIAAN WEB PAGE LENGKAP

    15
    16
    CUBA
    17

    You might also like