Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cascading Style Sheets

    Diunggah oleh

    Zull Mks'elf ARcher
    13 tayangan19 halaman
    Belajar

    Judul Asli

    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
    Belajar

    Hak Cipta:

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

    Cascading Style Sheets

    Diunggah oleh

    Zull Mks'elf ARcher
    Belajar

    Hak Cipta:

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

    CSS

    Cascading Style Sheets

    CSS ?
    CSS = Cascading Style Sheet.
    Suatu style yang digunakan untuk
    membuat dynamic HTML.
    Dapat mendeskripsikan dan mengontrol
    tampilan/template halaman web
    Bukanlah suatu keharusan dalam
    membuat web, akan tetapi
    menggunakan CSS akan membuat
    tampilan web menjadi lebih menarik.

    Tag HTML yang umum


    digunakan bersama CSS
    DIV
    Singkatan dari division yang berarti sebuah tag HTML untuk
    membuat suatu kelompok tertentu atau membuat suatu seksi
    yang bertujuan untuk pengelompokan sebuah file HTML
    menjadi beberapa bagian sesuai dengan tempatnya agar
    mempermudah para web developer memberi style pada
    setiap bagiannya.
    Misalnya :Sebuah halaman Web yang terdiri dari 4 bagian:
    Header, Side Bar, Content dan Footer.
    SPAN
    Mengatur konten/isi yang dilingkupinya tanpa membagi
    halaman web ke dalam bagian-bagian kecil (seperti yang
    dilakukan tag div)

    Struktur CSS
    Perintah CSS terdiri atas 2 komponen, yakni
    Selector & Declaration.
    Selector berfungsi untuk memberi tahu browser
    bahwa pada elemen mana rule CSS diterapkan.
    Selector dapat berupa elemen HTML, selector
    class atau selector id.
    Declaration merupakan aturan CSS yang
    diterapkan, terdiri atas property dan value.
    Untuk Inline Style, declaration langsung
    ditempatkan pada tag HTMLnya tanpa
    menggunakan Selector

    Struktur CSS

    Aturan Penulisan CSS


    Internal Style
    Menggunakan tag <style> Kode CSS
    diletakkan diantara tag <head>dari
    dokumen HTML.
    Inline Style
    Menambahkan langsung kode CSS ke dalam
    tag HTML.
    External Style
    Menggunakan tag <link> untuk merujuk ke
    file css khusus

    Sintaks CSS
    CSS sintaks standar
    body {color:black}
    Jika value lebih dari satu kata gunakan tanda kutip / p { font-family: "sans serif } atau
    p { font-family: sans-serif }
    Jika lebih dari satu properti untuk sebuah selektor
    p{
    text-align: center;
    color: red;
    }
    Untuk Komentar
    /* .. */
    Satuan Untuk Value yang berupa nilai
    em Untuk menentukan ukuran berupa pecahan (desimal)
    ex x-height, digunakan untuk menentukan ukuran yang sifatnya vertikal
    px Pixels, menentukan ukuran yang bersifat pixel (layar monitor)

    Internal Style
    <html>
    <head>
    <title>Contoh Penggunaan Internal Stytle<title>
    <style type=text/css>
    p{
    font-weight: bold;
    color: #FF0000 ! important;
    font-size: 25px;
    }
    </style>
    </head>
    <body>
    <p>Contoh Penggunaan Internal Style</p>
    </body>
    </html>

    Inline Style
    <html>
    <head>
    <title>Contoh Penggunaan Inline Style</title>
    </head>
    <body>
    <p style=font-weight: bold;
    color: #FF0000;
    font-size: 25px;>
    Contoh Penggunaan Inline Style
    </p>
    </body>
    </html>

    External Style
    File style.css
    div {
    font-weight: bold;
    color: #FF0000;
    font-size: 25px;
    }

    External Style
    File contohEksternalStyle.html
    <html>
    <head>
    <title>Contoh Penggunaan Inline Style</title>
    <link rel=stylesheet type=text/css
    href=style.css>
    </head>
    <body>
    <p>Contoh Penggunaan Eksternal Style</p>
    </body>
    </html>

    Grouping
    Untuk mempersingkat penulisan, CSS juga memungkinkan untuk
    melakukan grouping pada selectorselector yang memiliki property
    yang sama.
    contoh:
    span { font-size: 13px;
    font-family: tahoma;
    color: #888; }
    p { font-size: 13px;
    font-family: tahoma;
    color: #389274;}
    di grouping menjadi:
    span, p {font-size: 13px;
    font-family: tahoma;
    color: #389274; }

    Contoh Grouping
    <html>

    <head>
    <title>Contoh Grouping</title>
    <style>
    span, p {
    font-size: 16px;
    font-family: tahoma;
    color: #389274;
    padding-left: 5px;
    font-weight: bold;
    border-left: 5px solid #888;
    }
    </style>
    </head>
    <body>
    <p>Contoh Grouping 1</p>
    <span>Contoh Grouping 2</span>
    </body>
    </html>

    CSS Class Selector


    Diawali dengan menambahkan tanda . (titik) pada file css
    Pada file HTML ditambahkan property class untuk
    memanggil selector tersebut.
    Satu elemen HTML dapat memanggil lebih dari satu class
    contoh:
    .set-border { padding: 20px;
    border: 3px solid #389274;
    box-shadow: 3px 3px 3px #888; }
    .set-font-center { text-align: center;
    color: #666;
    font-weight: bold;
    font-family: tahoma;}

    CSS Class Selector


    <html>
    <head>
    <title>Contoh Class Selector</title>
    <style>
    .set-border { padding: 20px;
    border: 3px solid #389274;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #888;
    margin: 10px;
    width: 200px;
    height: 200px;}
    .set-font-center { text-align: center;
    color: #389274;
    font-weight: bold;
    font-family: tahoma;}
    </style>
    </head>
    <body>
    <div class=set-border>Contoh Penggunaan Class set-border</div>
    <div class=set-font-center>Contoh Pengguaan Class set-font-center</div>
    <div class=set-border set-font-center>Contoh Penggunaan Class set-border dan set-fontcenter</div>
    </body>
    </html>

    CSS ID Selector
    Diawali dengan menambahkan tanda
    # pada file css
    Pada file HTML ditambahkanproperty id
    untuk memanggil selector tersebut.
    Penulisan id tidak boleh diawali dengan
    angka
    Satu elemen HTML hanya boleh
    menggunakan satu id

    CSS ID Selector
    <html>
    <head>
    <title>Contoh ID Selector</title>
    <style>
    body { font-family: tahoma; margin:0px;}
    #header { width : 100%; height: 100px; padding-top: 30px;
    background-color: #389274; color: #fff;
    font-size: 40px; text-align:center;
    display: block;}
    #menu { width : 25%;
    font-size: 18px; text-align: center; color: #888;
    display: inline-table;}
    #content { padding: 2%; width: 70%; height: 400px;
    border-left: 3px solid #ccc;
    font-size: 14px; text-align:left;
    display: inline-table;}
    #footer { width : 100%; height: 150px; padding-top: 50px;
    background-color: #333; color : #fff;
    font-size: 15px; text-align:center;
    display: block;}
    </style>
    </head>
    <body>
    <div id="header">Header</div>
    <div id="menu">Menu</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
    </body>

    Pengaturan Hyperlink (Pseudo-classes)


    Selector

    Keterangan

    a:link

    Keadaan Link Awal

    a:visited

    Keadaan Link setelah dikunjungi

    a:active

    Keadaan Link jika sedang aktif

    a:hover

    Keadaan Link jika didekati mouse

    a:focus

    Keadaan Link jika sedang aktif

    Contoh Pengaturan Hyperlink (Pseudo-classes)


    <html>
    <head>
    <title>Contoh Class Selector</title>
    <style>
    ul { list-style: none;}
    ul li .set-link{ color: #389274;}
    ul li .set-link:link { text-decoration: none; display: block;
    width: 200px; padding: 5px 10px;
    font-family: tahoma; }
    ul li .set-link:active, ul li .set-link:hover, ul li .set-link:focus{ border-left: 5px solid #389274;
    color: #000;
    background: #eee;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href= class=set-link>Contoh Link 1</a></li>
    <li><a href= class=set-link>Contoh Link 2</a></li>
    <li><a href= class=set-link>Contoh Link 3</a></li>
    <li><a href= class=set-link>Contoh Link </a></li>
    </ul>
    </body>
    </html>

    Anda mungkin juga menyukai