Scribd Logo
Unggah

Selamat datang di Scribd!

  • Intro CSS

    Diunggah oleh

    John Nelson A Picones
    23 tayangan11 halaman
    INTRO CSS

    Judul Asli

    INTRO 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
    INTRO CSS

    Hak Cipta:

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

    Intro CSS

    Diunggah oleh

    John Nelson A Picones
    INTRO CSS

    Hak Cipta:

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

    INTRO TO CSS

    JOHN NELSON A. PICONES


    A BIT OF HISTORY
    Cascading Style Sheets were created to remove HTML style tags and
    attributes from web pages

    HTML was never intended to contain tags for formatting

    CSS1 was first published in Dec 1996

    Current standard is CSS3, first draft in 1999


    HTML = STRUCTURE, CSS = STYLE, JAVASCRIPT = CONTROL
    STYLE SHEET TYPES

    Inline CSS Internal CSS External CSS


    Embedded style inside of HTML tags Styles defined within the <head> External .css file that can be used
    tag at the top of HTML web page by many web pages
    <h1style="color:blue;margin-
    left:30px;">This is a heading</h1> <head> <head>
    <style> <linkrel="stylesheet"type="text/c
    body{ ss"href="mystyle.css">
    background-color:linen; </head>
    }

    h1{
    color:maroon;
    margin-left:40px;
    }
    </style>
    </head>
    EXAMPLE EXTERNAL CSS FILE
    body{
    background-color:lightblue;
    }

    h1{
    color:white;
    text-align:center;
    }

    p{
    font-family:verdana;
    font-size:20px;
    }
    ELEMENT TYPES

    IDs must be unique Classes are used many times


    HTML Code: HTML Code:
    <h2 <p class=menuItem>Home</p>
    id=menuHeading>Menu</h2>
    CSS Code:
    CSS Code: .menuItem {
    #menuHeading { color: lightblue
    color: blue }
    }
    CSS FRAMEWORKS
    CSS frameworks include;Foundation,Blueprint,Bootstrap,Cascade
    Frameworkand Materialize

    Frameworks are libraries of pre-prepared styles that make web


    development easy and fast

    They include things like cross browser compatibility, mobile first styles,
    responsive pages to adjust to any device, etc..
    BOOTSTRAP
    Most widely used and supported CSS framework

    Easy to add to any web page: getbootstrap.com

    <!-- Latest compiled and minified CSS -->


    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
    css" integrity="sha384-
    BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEj
    h4u" crossorigin="anonymous">
    MOBILE FIRST
    Add this to your <head>
    <metaname="viewport"content="width=device-width, initial-scale=1">
    RESPONSIVE DESIGN
    Bootstrap uses a grid system to react to screen sizes and re-arrange
    columns automatically as required
    EXAMPLE
    <divclass="row">
    <divclass="col-sm-12">Top Menu</div>
    </div>
    <divclass="row">
    <divclass="col-sm-4">Left Menu</div>
    <divclass="col-sm-8">Main Body</div>
    </div>

    Anda mungkin juga menyukai