Scribd Logo
Upload

Welcome to Scribd!

  • Week 4 - Webapps

    Uploaded by

    Salem
    8 views12 pages
    This document discusses using CSS (Cascading Style Sheets) in web applications development. It covers using CSS classes and IDs to select and style specific elements. It also demonstrates how to import Google fonts and apply them to webpages. The document provides examples of additional CSS properties like display, lists, and opacity/transparency and how to use them to control layout and style elements.

    Original Description:

    1

    Original Title

    Week 4_ Webapps

    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 using CSS (Cascading Style Sheets) in web applications development. It covers using CSS classes and IDs to select and style specific elements. It also demonstrates how to import Google fonts and apply them to webpages. The document provides examples of additional CSS properties like display, lists, and opacity/transparency and how to use them to control layout and style elements.

    Copyright:

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

    Week 4 - Webapps

    Uploaded by

    Salem
    This document discusses using CSS (Cascading Style Sheets) in web applications development. It covers using CSS classes and IDs to select and style specific elements. It also demonstrates how to import Google fonts and apply them to webpages. The document provides examples of additional CSS properties like display, lists, and opacity/transparency and how to use them to control layout and style elements.

    Copyright:

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

    WEB APPLICATIONS DEVELOPMENT

    (Part 2) Cascading Style Sheets


    (CSS)

    Week 4
    WEB APPLICATIONS DEVELOPMENT - CIT

    Prayer for today


    Ama sa Langit, bigyan kami ngayong araw upang matupad ang aming
    mga tungkulin bilang responsable at mabait na mag-aaral.
    Bigyan kami ng gabay at pangangalaga sa pagtupad ng aming mga
    gawain.
    Bigyan mo kami ng tulong sa mga desisyon na aming ginagawa.
    Nanalangin kami sa iyo na pagpalain ang aming mga guro para sa
    matiyagang paghahatid sa amin araw-araw na mga aralin.
    Pagpalain ang aming mga magulang sa patuloy na pagsuporta sa amin.
    Maraming salamat, Lord sa lahat ng mga biyayang ibinibigay mo sa
    aming lahat. Ikaw ang aming suporta at lakas.
    Amen.
    2
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    WEB APPLICATIONS DEVELOPMENT - CIT

    Learning Outcomes
    1. Demonstrate using CSS classes and IDs.
    2. Demonstrate importing Google fonts and use it in the webpage.
    3. Demonstrate more CSS properties.

    3
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    Using CSS classes and ID
    selectors.
    WEB APPLICATIONS DEVELOPMENT - CIT

    CSS id selector
    - The ID selector uses the ID attribute of an HTML element to select a
    specific element.
    - The ID of an element is unique within a page, so the ID selector is used to
    select one unique element.
    - To select an element with a specific ID, write a hash (#) character, followed
    by the ID of the element.

    #para1 {
    text-align: center;
    color: red;
    }

    <p id=”para1”>My first paragraph</p>

    5
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    WEB APPLICATIONS DEVELOPMENT - CIT

    CSS class selector


    - The class selector selects HTML elements with a specific class
    attribute.
    - To select elements with a specific class, write a period (.) character,
    followed by the class name.

    .right {
    text-align: right;
    color: red;
    }

    <p class=”right”>My first paragraph</p>

    6
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    Importing Google Fonts
    WEB APPLICATIONS DEVELOPMENT - CIT

    Google Fonts
    - If you do not want to use any of the standard fonts in HTML, you can
    use Google Fonts.

    <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
    <style>
    body {
    font-family: "Sofia", sans-serif;
    }
    </style>
    </head>

    8
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    More CSS Properties
    WEB APPLICATIONS DEVELOPMENT - CIT

    CSS Display
    The display property is the most important CSS property for controlling
    layout.
    p{
    display: block;
    }

    p{
    display: none;
    }

    10
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    WEB APPLICATIONS DEVELOPMENT - CIT

    CSS Lists
    There are different types of list item markers or it can set it to none.
    - circle
    - square
    - upper-roman
    - lower-alpha

    ul {
    list-style-type: circle;
    }

    11
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
    WEB APPLICATIONS DEVELOPMENT - CIT

    CSS Opacity/Transparency
    - The opacity property specifies the opacity/transparency of an element.

    img {
    opacity: 0.5;
    }

    12
    SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN

    You might also like