Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • CSS Basic: Workshop Webday 28 Februari Dan 6 Maret

    Încărcat de

    Christine Sani
    12 vizualizări24 pagini
    a

    Titlu original

    2. CSS Basic

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPTX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    a

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    12 vizualizări24 pagini

    CSS Basic: Workshop Webday 28 Februari Dan 6 Maret

    Încărcat de

    Christine Sani
    a

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 24

    CSS Basic

    Workshop Webday
    28 Februari dan 6 Maret
    Pembahasan
    1. Akses CSS
    2. Div
    3. Syntax CSS
    4. Selector
    5. Box Model
    6. Background
    7. Text
    8. Font
    9. Link
    10. Margin & Padding
    11. Positioning
    12. Float
    Akses CSS
    External
    Mengakses code CSS dari luar file.
    Internal
    Code CSS berada didalam file HTML/PHP yg digunakan.
    Inline
    Menuliskan Code CSS langsung di baris yg kita inginkan.
    Contoh Akses CSS
    External
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    Internal
    <head>
    <style type=text/css>
    body {
    background-color: #50b7dc;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    Inline
    <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
    Syntax CSS
    Div
    Pembuatan wilayah
    Berdasarkan id
    <div id=kotak>
    </div>
    #kotak {
    width: 500px;
    height:auto;
    background-color:red;
    }
    Berdasarkan class
    <div class=kotak2>
    </div>
    .kotak2 {
    width: 500px;
    height:auto;
    background-color:yellow;
    }
    Desain Layout
    wrapper
    Pembuatan layout ini
    bisa menggunakan div
    Misal
    Div id=wrapper
    Div class=kanan
    Div class=kiri
    Tag yg sudah tersedia
    <header></header>
    <nav></nav>
    <article></article>
    <footer></footer>
    <html> #wrapper {
    <head> width: 900px;
    <title>layout</title> height: auto;
    <link rel=stylesheet margin: auto;
    type=text/css href=satu.css> }
    </head> header {
    <body> width:900px;
    <div id=wrapper> height:200px;
    <header></header> background-image:url(satu.jpg);
    }
    <nav></nav>
    nav {
    <article>
    width:900px;
    <div class=kiri></div> height:50px;
    <div class=kanan></div> background-color:#71046d;
    </article> overflow:hidden;
    <footer></footer> }
    </div>
    </body>
    </html>
    article { footer {
    overflow:hidden; padding:10px;
    } font-size:9px;
    article .kiri {
    width:440px; color:#afafaf;
    height:auto; text-align:center;
    float:left; font-family: arial;
    padding:10px; }
    border-right:#fb1ff3 dotted 5px;
    }
    article .kanan {
    width:400px;
    height:auto;
    float:left;
    padding:10px;
    }
    Lengkapi HTML dengan isi

    <html>
    <article>
    <head>
    <title>layout</title> <div class=kiri>inikiri</div
    <link rel=stylesheet <div class=kanan>w</div
    type=text/css href=satu.css> </article>
    </head> <footer>&copy Copy Right</footer>
    <body>
    </div>
    <div id=wrapper>
    <header> </header> </body>
    <nav> </html>
    <ul>
    <li>Home</li>
    <li>Profil</li>
    <li>Kontak</li>
    <li>Alamat</li>
    </ul>
    </nav>
    nav ul { Tambahkan ini pada
    margin:0px;
    } css
    nav ul li {
    float:left;
    list-style:none;
    padding:10px;
    font-family:Agency FB;
    font-size:14pt;
    color:white;
    }
    Hasil
    Selector
    Element
    merupakan tag HTML biasa seperti p a h1 font dst
    p{
    text-align: center;
    color: red;
    }
    Id
    merupakan selector yg dibuat sendiri oleh programmer.
    Dalam HTML dipanggil (misal) id=para1
    #para1 {
    text-align: center;
    color: red;
    }
    Selector
    Class
    Merupakan selector yg dibuat sendiri oleh programmer.
    Dalam HTML dipanggil (misal) class=para1
    .para2 {
    text-align: center;
    color: red;
    }
    In group
    Ketika ada beberapa selector yg memiliki kesamaan code
    CSS, kita dapat menggabungkan nya menjadi seperti ini
    h1, h2, p {
    text-align: center;
    color: red;
    }
    Box Model
    Background
    Color
    body {
    background-color: #b0c4de;
    }
    penulisan bisa #kodewarna, rgba(red, green, blue, alpha), namawarna
    #b0c4de rgba()
    Image
    body {
    background-image: url("paper.gif");
    }
    Repeat
    Attachment
    Position
    body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    }
    Text
    Color
    color:#afafaf;
    Text-align
    text-align:center; center, right, left, justify
    Text-decoration
    text-decoration:none; none, overline, line-through,
    underline

    Text-transform
    text-transform:uppercase; uppercase, lowercase, capitalize
    Font
    Font-family
    font-family:arial;
    font yg di support semua browser yaitu
    arial, tahoma, verdana, times new roman
    Font-style
    font-style:italic; normal, italic,
    oblique
    Font-size
    font-size:12px;
    Link
    a:link {color:yellow;}
    ketika link dalam keadaan normal
    a:hover {color:red;}
    ketika mouse menghampiri link
    a:active {color:blue;}
    ketika link di klik
    a:visited {color:green;}
    setelah link di klik
    Margin & Padding
    Margin margin:100px 50px;
    Margin top & bottom = 100px
    Margin left & right = 50px
    margin margin:100px;
    Semua nya (right, left, top, bottom) = 100px
    margin-top
    margin-bottom
    margin-left
    Penulisan untuk margin dan padding sama
    margin-right

    margin:100px 50px 30px 200px;


    - Margin top = 100px
    - Margin right = 50px
    - Margin bottom = 30px
    - Margin left = 20px
    margin:100px 50px 30px;
    - Margin top = 100px
    - Margin right & left = 50px
    - Margin bottom = 30px
    Positioning
    Fixed
    Absolute
    Relative
    Overlapping
    Referensi
    www.w3schools.com/css

    S-ar putea să vă placă și