CSS - Selector dan Font

Terdapat 3 cara dalam menambahkan aturan CSS (Character Style Sheet), pada praktek ini akan dibahas lokasi penempatan CSS yang paling Efektif, pembahasan yang lain adalah penggunaan 3 macam Selector (HTML Tag, Class dan ID) serta contoh praktek dalam menggunakan font

CSS - Selector dan Font

Materi yang dipelajari

  • Menambahkan Sytle Sheet
    • Tiga Tempat untuk menempatkan style sheet
  • Format Penulisan CSS
  • Tiga Macam selector utama dalam menggunakan style sheet
    • Kombinasi Selector dengan Descendent-selector dan Pseudo-selector
  • Prioritas style

Cara menuliskan CSS dari tiga tempat yang berbeda

  • In-line style
  * <h1 style="color: #f00;">Tesla</h1>
  • style yang ditempatkan di bagian head
  <head>
    <style>
      h1 { color: #f00; }
    </style>
  </head>
  • external link
    • ditempatkan di satu file khusus untuk setting css
    • semua dokumen nantinya melihat setting file css dari 1 file saja, jadi bisa dikatakan terpusat
    • ini yang akan kita gunakan, karena mudah untuk di-maintain.
    <head>
      <link rel="stylesheet" href="style.css">
    </head>

Format penulisan CSS

  • Format CSS
  selector {
    property: value;
  }

contoh: 

p {
    color: red;
    font-size: 16px;
}

Selector

  • selector adalah kita memilih bagian mana dari HTML itu yang ingin kita ubah
  • terdapat tiga macam selector standard
    • Element (Standard tag html)
    • class
    • ID
  h1 {
    color: #F00;
  }
  • Contoh penggunaan Class
<div class="warna-merah">
  <h1> Tesla Saroni</h1>
</div>

.warna-merah {
  color: #F00;
}
  • Contoh penggunaan ID
<div id="warna-merah">
  <h1> Tesla Saroni</h1>
</div>

#warna-merah {
  color: #F00;
}
  • perbedaan antara class dan id, dimana class boleh dipanggil beberapa kali di dalam satu dokumen, sedangkan id hanya boleh dipanggil hanya 1x saja di dalam satu dokumen.
  • selain dari 3 selector utama, terdapat pula kondisi khusus yang merupakan gabungan dari ketiga selector tersebut yaitu
  • Descendent selector
    • memilih nav yang memiliki parent header, sehingga nav yang memiliki parent footer tidak terkenan efeknya
    header nav {
        color: green;
    }
  • Pseudo-selector
    • memilih berdasarkan suatu kondisi tertentu, misalnya mouse berada diposisi diatasnya.
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        color: darkred;
    }

Prioritas Style

  • Bila terdapat style yang ditempatkan di inline, di bagian head dan di di external, maka aturan mana yang akan digunakan?
  • Berikut adalah urutan dari paling Tinggi prioritasnya.
    • Aturan yang menggunakan tag !important
    • ditulis di Inline
    • ditulis di Head
    • ditulis di External
  • konsep yang kedua adalah priority terakhir dan terdekat
.aturan1 {
  color: #f00;
}
.aturan1 p {
  color: #0f0;
}

<div class="aturan1">Tesla Saroni</div>
  • warna apa yang ditampilkan pada Tesla saroni,
    • kalau diperhatikan aturan 1 mengubah tulisan menjadi warna merah
    • sedangkan pada aturan paragraf menjadi warna hijau
    • maka warna tulisan adalah hijau, karena posisi yang lebih detil.

Menggunakan Google font

  • Buka website Google font
  • pada bagian sebelah kiri terdapat menu filter, di sini anda dapat memilih kategori dari jenis font dengan klik pada pilihan filter
  • pilih font yang anda inginkan,
    • bila ada yang anda inginkan klik pada tombol add to collection.
    • anda bisa klik add to collection untuk beberapa jenis font
  • setelah beberapa jenis font terpilih
    • pada pilihan kanan bawah, klik "Use"
    • lakukan scroll ke bawah sampai anda menemui pilihan @import, klik pada @import
    • Blok 1 baris perintah import kemudian tekan control + C untuk mengcopy
  • kembali ke program bracket, pada file css anda (style.css)
    • lakukan paste dengan control + V
  • pada css anda sudah dapat digunakan dengan perintah font family
  • berikut contoh penggunaan di style.css
@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Fjalla+One);

h1 {
    font-family: fjalla one;
}

Praktek siswa

  • tambahkan style.css pada document index anda seperti yang sudah diajarkan
  • isi style css dengan informasi berikut:
    • usahakan untuk tidak menggunakan copy-paste tetapi mengetik satu-persatu
    • di saat anda membuat perhatikan hasilnya 1 persatu di google chrome
h1 {
    color: brown;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    letter-spacing: 0.4em;
    word-spacing: 0.5em;
    text-decoration: underline;
}

article {
    color:chocolate;
    text-align: justify;            
    text-indent: -2;
    line-height: 1.5em;  
}