Scribd Logo
Unggah

Selamat datang di Scribd!

  • Dasar CSS

    Diunggah oleh

    dina mala
    10 tayangan48 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan48 halaman

    Dasar CSS

    Diunggah oleh

    dina mala

    Hak Cipta:

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

    TUTORIAL CSS DASAR

    Oleh Muh. Anas Faishol,S.Kom,MT


    #Part 1 : Pengertian dan Pengenalan CSS
    • CSS merupakan singkatan dari ” Cascading Style Sheets “.
    • CSS adalah bahasa pemrograman yang di gunakan untuk men-design
    sebuah halaman website.
    • dalam mendesign halaman website CSS menggunakan penanda yang
    kita kenal dengan id dan class.
    Fungsi dan Kegunaan CSS
    • CSS dapat mengubah font, ukuran font, warna dan format font.
    mengatur ukuran layout, lebar tinggi dan warna element, mengubah
    tampilan form, membuat halaman website yang responsive dan
    masih banyak lagi
    • Untuk men-desain font dapat dilakukan dengan mendefinisikan font ,
    untuk mengatur warna bisa menggunakan color, margins digunakan
    untuk mengatur jarak pada luar element tertetu. mengatur warna
    atau gambar pada latar belakang bisa menggunakan background.
    mengatur ukuran font gunakan font size.jenis font menggunakan font-
    family dan banyak lagi lainnya.
    #Part 2 : Cara Penulisan CSS
    • Inline CSS Style
    • Internal CSS Style
    • External CSS Style
    Teknik penulisan CSS Inline Style
    adalah teknik cara penulisan syntax CSS yang tidak memerlukan
    selector(id dan class) sehingga syntax CSS di letakkan atau langsung di
    sisipkan pada element HTML. syntax css di letakkan di dalam atribut
    style=””.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Penulisan CSS dengan Inline Style</title>
    </head>
    <body>

    <h1 style="color:blue">Studi Independen Bersertifikat (SIB) Arkatama</h1>

    </body>
    </html>
    Teknik penulisan CSS Internal Style
    • adalah Teknik cara penulisan syntaks css yang di letakkan satu file
    dengan file html atau file php.
    • syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag
    </style>.
    • biasa nya tag <style> .. </style> di letakkan pada bagian tag <head>
    pada HTML.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Penulisan CSS dengan Internal Style</title>
    <style type="text/css">
    #tulisan{
    color: 10px;
    }

    .box{
    background: red;
    padding: 10px;
    }
    </style>
    </head>
    <body>

    <div class="box">
    <h1 id="tulisan"> Studi Independen Bersertifikat (SIB) Arkatama <h1>
    </div>

    </body>
    </html>
    Teknik penulisan CSS External Style
    • Untuk membuat contoh penulisan CSS dengan External style siapkan
    satu buah file html dan satu buah file css.
    • di sini saya membuat sebuah file dengan nama index.html dan
    style.css
    Index.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Penulisan CSS dengan External Style</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <div class="box">
    <h1 id="tulisan"> Studi Independen Bersertifikat (SIB) Arkatama </h1>
    </div>

    </body>
    </html>
    style.css
    #tulisan{
    color: 10px;
    }
    .box{
    background: red;
    padding: 10px;
    }
    #Part 3: Attribute selector
    Attribute selector digunakan untuk memilih elemen atribut yang
    spesifik. Atribut selector akan memilih elemen berdasarkan keberadaan
    atribut tertentu pada HTML
    Jenis Deklarasi Atribut Selector
    • #1. Attribute Selector dengan nilai spesifik, merupakan attribute
    selector yang digunakan untuk memberikan properti CSS pada
    atribut dan nilai yang spesifik.
    • Sebagai contoh, kita akan memberikan background kuning pada
    setiap tag link dengan atribute target blank.
    • #2 Attribute selector menggunakan simbol ~. Attribute selector
    dengan simbol ~ akan memberikan properti CSS pada attribut yang
    memuat value yang telah ditentukan.
    • Sebagai contoh, kita akan memberikan border/garis pada elemen
    apapun yang memuat value “flower”.
    • #3. Attribute selector menggunakan simbol =
    • Dengan menambahkan simbol = pada attribute selector, kita bisa
    memberikan properti CSS yang sama pada elemen yang berbeda
    dengan spesifik nilai yang ditentukan dan diikuti karakter -
    • #4 Attribute selector dengan simbol ^. Selektor yang diikuti simbol ^
    digunakan untuk memilih elemen HTML tertentu yang dimulai dengan
    nilai spesifik yang telah ditentukan. Berbeda dengan simbol -, semua
    elemen dengan nilai yang telah ditentukan akan memiliki properti
    yang sama.
    • #5 Attribute selector dengan simbol $. Apabila simbol – dan ~
    digunakan untuk memberikan properti CSS dengan awalan yang
    sama.
    • Simbol digunakan untuk memberikan properti CSS yang sama dengan
    akhiran nilai yang spesifik.
    • #6 Attribute selector dengan simbol *. Apabila simbol ~ digunakan
    untuk memberikan properti CSS dengan awalan yang sama.
    • Simbol digunakan untuk memberikan properti CSS yang sama dengan
    akhiran nilai yang memuat nilai yang ditentukan.
    #Part 4: CSS Value dan unit
    • CSS value adalah nilai ukuran dari suatu elemen. Nilai ini akan diikuti
    oleh satuan (CSS unit).
    • CSS unit adalah satuan untuk menentukan ukuran dari suatu elemen
    atau kontennya. Misal, jika ingin menentukan margin dari sebuah
    paragraf, kita bisa memberikan nilai tertentu.

    value unit
    #Absolute vs Relative
    • Unit yang "absolute" akan selalu memiliki ukuran yang sama apapun
    elemen parent-nya atau ukuran layar. Artinya properti yang diatur
    dengan absolute unit akan memiliki ukuran sama baik di telepon
    maupun di layar monitor yang besar.
    • Absolute unit berguna jika project yang dikerjakan tidak memikirkan
    keresponsifan. Misalnya, aplikasi desktop yang tidak bisa di-resized
    bisa menggunakannya. Jika ukuran jendela tidak akan berubah, maka
    kontennya pun tidak juga.
    • Pixel (px) sering dipakai untuk menentukan absolute unit di layar.
    Centimeter, millimeter, dan inchi lebih sering dipakai untuk dokumen
    cetak
    • Relative unit berguna untuk mendesain website yang responsif karena
    ukurannya bisa berubah relatif terhadap parent atau ukuran layar.
    • Secara umum relative unit bisa dipakai sebagai satuan bawaan
    website responsif sehingga bisa membantu untuk meng-update style
    di ukuran layar yang berbeda.
    • Relative unit mungkin akan sedikit lebih sulit dibandingkan absolute
    unit untuk menentukan satuan mana yang akan dipakai.
    • %: Ukurannya relatif terhadap parent element
    • em: Ukurannya relatif terhadap font-size dari elemen saat ini
    • rem: Ukurannya relatif terhadap font-size root elemen (<html>). "rem" = "root em"
    • ch: Ukurannya mengikuti jumlah karakter (1 karakter sama dengan lebar dari karakter
    0/nol font yang sedang aktif)
    • vh: Ukurannya relatif terhadap tinggi viewport (ukuran jendela tau aplikasi), 1vh = 1/100
    dari tinggi viewport
    • vw: Ukurannya relatif terhadap lebar dari viewport. 1vw = 1/100 lebar viewport
    • vmin: Ukurannya relatif terhadap ukuran viewport yang lebih kecil (misalnya diorientasi
    portrait, lebar akan lebih kecil daripada tinggi). 1vmin = 1/100 dari ukuran viewport yang
    lebih kecil.
    • vmax: Sama dengan vmin, dia akan melihat ukuran viewport yang lebih besar
    • ex: Ukurannya relatif terhadap tinggi dari karakter "x" kecil font yang sedang aktif.
    %
    • Kamu ingin agar suatu child element memiliki 10% lebar parent
    sebagai marginnya sehingga ia tidak akan mengisi keseluruhan parent.
    Ketika ukuran parent berubah, maka margin juga akan berubah.

    .child {
    margin: 10%;
    }
    em
    • Kamu ingin agar font child element memiliki setengah ukuran parent-
    nya (contoh: ukuran paragraf setelah judul)

    .child {
    font-size: 0.5em;
    }
    rem
    • Kamu ingin agar ukuran font 2 kali lebih besar dari ukuran font root
    element (maksudnya di sini ukuran font yang diatur untuk body,
    biasanya 16px).

    .header {
    font-size: 2rem;
    }
    ch
    • Kamu menggunakan mono-spaced font (font yang semua karakternya
    memiliki ukuran lebar yang sama) dan hanya menyediakan ruang
    untuk 10 karakter saja.

    .small-text {
    width: 10ch;
    }
    vh
    • Kamu ingin agar landing page memiliki bagian yang ukurannya
    setinggi browser.

    .wrapper {
    height: 100vh;
    }
    vw
    • Kamu ingin ada bagian teks yang ukurannya setengah layar browser
    untuk komponen hero.

    .half-size {
    width: 50vw;
    }
    vmin
    • Kamu ingin sebuah gambar selalu mengambil ukuran lebih kecil dari
    suatu viewport. Misalnya sata telepon dalam mode portrait maka
    gambar tersebut akan selebar layar.

    .min-width {
    width: 100vmin;
    }
    vmax
    • Kamu ingin menampilkan gambar pola di latar belakang.

    .max-width {
    width: 100vmax;
    }
    ex
    • Kamu mungkin jarang menemukan kebutuhan untuk
    menggunakan ex. Pada contoh ini kamu ingin agar tinggi antar baris
    kalimat dipisahkan oleh jarak 2 x.

    .double-x { l
    ine-height: 2ex;
    }
    #Part 5: CSS Color
    • color adalah properti CSS yang dapat digunakan untuk memberi
    warna sebuah karakter.
    • Value untuk property ini bisa menggunakan keyword seperti:
    • nama warna, seperti : red, green, blue, dan sebagainya.
    • Hexadesimal. Menggunakan pagar (#) untuk mengawalinya, contoh : #0000FF
    • RGB. Memberi warna pada masing-masing warna merah, hijau, dan biru pada
    rentang 0 - 255. Contoh: rgb(255, 0, 0) (akan mengasilkan warna merah).
    html
    <p class="color-1">Ini adalah kalimat dengan warna hijau memakai
    value nama warna.</p>
    <p class="color-2">Ini adalah kalimat dengan warna biru memakai
    value heksadesimal.</p>
    <p class="color-3">Ini adalah kalimat dengan warna merah memakai
    value RGB.</p>
    css
    .color-1{
    color: green;
    }

    .color-2{
    color: #0000FF;
    }

    .color-3{
    color: rgb(255, 0, 0);
    }
    #Part 6: Box Model
    • Konsep Box Model digunakan untuk memudahkan developer dalam
    memberikan style pada elemen HTML
    • Pada dasarnya, setiap elemen di HTML dapat dianggap sebagai “box”.
    Yaitu, sebuah “box” yang membungkus (wrap) elemen secara
    keseluruhan. Box tersebut terdiri dari beberapa bagian, yaitu
    ; margin, border, padding, dan content
    • Content : Adalah konten dari elemen. Biasanya berupa teks atau gambar
    • Padding : berguna untuk mengatur ruang (space) di sekitar konten
    • Border : batasan yang mengelilingi konten dan padding
    • Margin : berguna untuk mengatur ruang (space) di luar elemen
    Penerapan Box Model
    • Elemen Box
    • Inline
    Jika box model diterapkan pada elemen blok
    (block-element), maka :
    • Box tersebut akan memenuhi ruang (space) inline direction yang
    tersedia. Dalam hal ini, box akan memenuhi ruang sebesar
    ukuran container-nya (filling up 100%)
    • Box akan selalu memulai dengan baris baru
    • Dapat menggunakan properti width dan height
    • Padding, margin, dan border akan “mendorong” elemen lain. Karena
    box akan menyesuaikan ukuran elemen yang diminta
    Jika box model diterapkan pada elemen inline
    (inline-element), maka :
    • Box tidak memulai dengan baris baru
    • Tidak dapat menggunakan properti width dan height
    • Dapat menggunakan padding, margin, dan border, tapi tidak akan
    membuat elemen inline yang lain “terdorong” oleh box
    Part 7: Browser Developer Tools
    • Untuk memudahkan kita dalam mengetahui dan mendefinisikan Box
    Model, biasanya developer profesional menggunakan browser
    developer tools
    • Sederhananya, browser developer tools ini digunakan untuk
    mengetahui dan memanipulasi kode HTML, CSS, dan
    JavaScript secara langsung di browser
    Tugas
    1. Melanjutkan repository sebelumnya
    2. Buatlah halaman Galeri Bahasa Bunga seperti contoh
    3. Submit link dan screenshot di aplikasi Sinauo

    Ketentuan:
    1. Pisahkan antara CSS dan HTML
    2. Buat variable untuk nilai-nilai konstan dan warna
    3. Layout tidak boleh menggunakan tabel
    4. Layout berupa baris dengan empat buat card
    5. Minimal dua baris
    6. Setiap baris memiliki warna card yang berdeda
    7. Konten gambar dan deskripsi bebas cari di internet
    8. Dilarang menggunakan CSS framework

    Anda mungkin juga menyukai