Scribd Logo
Unggah

Selamat datang di Scribd!

  • CSS (Cascading-Style Sheet) : Week 2 Session 2

    Diunggah oleh

    Yeni panjaitan
    18 tayangan25 halaman
    hhhhhh

    Judul Asli

    w2s2t_css

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    hhhhhh

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    18 tayangan25 halaman

    CSS (Cascading-Style Sheet) : Week 2 Session 2

    Diunggah oleh

    Yeni panjaitan
    hhhhhh

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 25

    CSS

    (Cascading-Style Sheet)
    Week 2 Session 2

    12S3101 Pemrograman dan Pengujian Aplikasi Web MSS, 2019


    Objectives

    • To be able to describe the use of CSS.


    • To be able to use CSS framework.
    – What is styling and why do we need to style the
    HTML page?
    – Basic inline styling.
    – Embedded style sheet.
    – External style sheet.
    – CSS frameworks.

    2
    Outline

    1. What is styling and why do we need to


    style the HTML page?
    2. Basic inline styling.
    3. Embedded style sheet.
    4. External style sheet.
    5. CSS frameworks.

    3
    1. What is styling and why do we
    need to style the HTML page?

    4
    Styling is ...

    • a process of formatting an element beyond


    its standard presentation.
    – Implementation of the HTML markup principle.
    • The styling process can be separated from
    structuring the page.
    – Styling is like seasoning the HTML page to make
    it much prettier.
    • Cascading Style Sheet (CSS) version 3.

    5
    The importance of styling

    • To make the element looks prettier.


    – To Attract more visitors.
    • To provide a centralized and standard
    presentation over a type of element.
    – Faster development and significantly lower the
    maintenance effort.

    6
    What can be styled?

    • Every element tag is style-able.


    – body, table, hyperlink, paragraph, etc.
    • Style can be used to change:
    – font, element’s alignment, sizes, background
    colors, positioning, etc.

    7
    2. Inline Styling

    8
    Inline styling

    • The inline styling is the simplest way to


    style a specific element without affecting
    others with the same tag.
    • The styling is applied directly on the
    element through its style attribute.
    • This technique is not actually separated
    from the page structuring process.

    9
    An inline styling

    <h1 style="font-family: sans-serif;">


    CSS Impact
    </h1>
    <p>
    This is a <b>normal</b> paragraph.
    </p>
    <p style="color: darkorchid; font-size: 200%;">
    This paragraph has been <b>styled</b>.
    </p>
    <a href="#">Ordinary Link</a>
    <a href="#" style="text-decoration: none;
    background-color: green; color: #ffffff;">
    Styled Link
    </a> 10
    An inline styling

    • Write the code to achieve this page!

    11
    3. Embedded styling

    12
    Embedded styling

    • Inline style has a problem that is when the


    exact same style is going to be applied to
    multiple elements.
    – Code duplication in the same page.
    • Define the style once inside the page and
    used it anytime anywhere in the page.
    – Styling for all the same element; or
    – Using the element’s class attribute.

    13
    <head>
    <title>CSS Impact</title>
    <style type="text/css">
    h1 {
    font-family: sans-serif;
    <body>
    }
    <h1>
    p {
    CSS Impact
    font-size: 12pt;
    </h1>
    font-family: arial, sans-serif;
    <p>
    }
    This is a <b>normal</b> paragraph.
    .special-p {
    </p>
    color: darkorchid;
    <p class="special-p">
    font-size: 200%;
    This paragraph has been <b>styled</b>.
    }
    </p>
    .special-a {
    <a href="#">Ordinary Link</a>
    text-decoration: none;
    <a href="#" class="special-a">
    background-color: green;
    Styled Link
    color: #ffffff;
    </a>
    }
    </body>
    </style>
    </head>
    14
    An embedded styling

    • Again, write the code to achieve this page!

    15
    Problems with embedded styling

    • What if the same style is about to be used in


    multiple pages? Say, hundred of pages!

    16
    3. External styling

    17
    External styling

    • Embedded style also has a problem that is


    when the exact same style is going to be
    applied to multiple elements in other pages.
    – Again, code duplication in the same page.
    • Define the style once independent from any
    page (external).
    – Import the external styling with link tag.
    – Set the MIME Type to text/css.
    <link rel="stylesheet" href="style.css" type="text/css">

    18
    <head>
    <title>CSS
    h1 { Impact</title>
    <style type="text/css">
    font-family: sans-serif;
    } h1 {
    font-family: sans-serif;
    <body>
    }
    p <head>
    { <h1>
    pfont-size:
    {
    <title>CSS12pt;
    Impact (External)</title>
    CSS Impact
    font-size:
    font-family: 12pt;
    arial, sans-serif;
    <link rel="stylesheet"
    </h1> href="style.css“ type="text/css">
    font-family: arial, sans-serif;
    } </head> <p>
    }
    This is a <b>normal</b> paragraph.
    .special-p
    .special-p { {
    </p>
    color: darkorchid;
    color: darkorchid; <p class="special-p">
    font-size:200%;
    font-size: 200%;
    This paragraph has been <b>styled</b>.
    } }
    </p>
    .special-a {
    <a href="#">Ordinary Link</a>
    text-decoration:
    .special-a { none;
    <a href="#" class="special-a">
    background-color:
    text-decoration: green;
    none;
    Styled Link
    color: #ffffff; green;
    background-color: </a>
    }color: #ffffff;
    </body>
    </style>
    }
    </head>
    19
    5. CSS Framework

    20
    CSS Framework [1]
    • A framework provides a set of ready to use
    components.
    • Using framework will certainly:
    – Improve code standard in a project.
    – Faster development and page prototyping.
    – Beautiful design.
    • It also has some drawbacks, such as:
    – Increase code dependency.
    – Learning effort and time.

    21
    CSS Framework [2]
    • Most commonly features:
    – Premade basic layouts.
    – Grid system that works similar to table but much
    more flexible.
    – Typography, icons.
    – Page responsiveness.
    • Most of the above features are wrapped in the
    form of CSS classes.
    • When using a CSS framework the most used
    tag to structure the page is the div.
    22
    CSS Framework [3]

    • Suggested frameworks:
    – Bootstrap (https://getbootstrap.com/)
    – Bulma (https://bulma.io/)

    23
    To do

    • Please take your time to customize your


    page using CSS and one of the framework.
    • On the lab, you will recreate your submitted
    pages and style them using CSS.
    • Hint:
    – Reading the documentation is very critical!

    24
    EOF

    25

    Anda mungkin juga menyukai