DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Apa Itu Rule Css?

advertisement
Apa itu rule css
Pada artikel sebelumnya kita sudah belajar mengenal properti-properti css yang bisa kita gunakan untuk mengatur style pada elemen.
Pada artikel kali ini kita akan belajar apa itu rule css
Yuk langsung saja ke tutorialnya

Apa Itu Rule?

Rule adalah sebuah aturan yang diterapkan pada css, selector ataupun properti.
Rule ditandai dengan simbol @nama_rule.

Macam-Macam Rule

Berikut rule-rule css yang bisa kita gunakan

@charset

Digunakan untuk mengatur karakter yang digunakan didalam penulisan css
Contoh kodenya,
@charset "UTF-8";
body{color:black;background:white;}

@font-face

Digunakan untuk membuat inisialisasi nama dan properti lainnya dari font
Contoh kodenya,
@font-face {
  font-family: IniFontKu;
  src: url(file_font.woff);
}
body{font-family:'IniFontKu'}

@import

Digunakan untuk mengimport file css ataupun font
Contoh kodenya,
@import url("file_css_lain.css");
body{font-family:'IniFontKu'}
Contoh lainnya,
@import "mobile.css" screen and (max-width: 768px);
/*keterangan: css hanya diimport ketika layar dibawah 769 piksel*/

@keyframes

Digunakan untuk membuat inisialisasi animasi dan aturannya,
Contoh kodenya,
.animasi {
  animation: mendarat 5s infinite;
}
@keyframes mendarat {
  from {top: 0px;}
  to {top: 200px;}
}

@media

Digunakan untuk membuat aturan ketika dibuka di berbagai media atau perangkat
Contoh kodenya,
body {
   max-width:100%;/* default */
  }
@media screen and (max-width: 900px) {
  body {
    max-width:900px;/*Ketika halaman dibuka di layar dengan ukuran maksimal 900 piksel*/
  }
}
@media screen and (max-width: 600px) {
  body {
    max-width:600px;/*Ketika halaman dibuka di layar dengan ukuran maksimal 600 piksel*/
  }
}
@media screen and (max-width: 300px) {
  body {
    max-width:300px;/* ketika halaman dibuka dilayar dengan ukuran maksimal 300 piksel */
  }
}
Sampai disini materi kita tentang apa itu rule css.
Untuk lebih jelasnya nanti kita akan praktikan di tutorial-tutorial selanjut.
Tutorial kali ini hanya pengenalan saja ya sobat.

Jika kalian meresa artikel ini bermanfaat, silahkan klik tombol share. 
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Good luck! 👍
advertisement



0 Komentar untuk " Tutorial belajar css # Apa Itu Rule Css?"

Silahkan berkomentar dengan baik dan bijak!