Tutorial belajar css # 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

advertisement

Yuk langsung saja ke tutorialnya,

Apa Itu Rule CSS?

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,

advertisement

@charset

Digunakan untuk mengatur karakter yang digunakan didalam penulisan css

Contohnya,

@charset "UTF-8";
body{color:black;background:white;}

@font-face

Digunakan untuk membuat inisialisasi nama dan properti lainnya dari font

Contohnya,

@font-face {
  font-family: IniFontKu;
  src: url(file_font.woff);
}
body{font-family:'IniFontKu'}

@import

Digunakan untuk mengimport file css ataupun font

Contohnya,

@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,

Contohnya,

.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

Contohnya,

body {
   max-width:100%;/* default */
  }
@media screen(min-width: 900px) {
  body {
    max-width:900px;/*Ketika halaman dibuka di layar dengan ukuran minimal 900 piksel*/
  }
}
@media screen(min-width: 600px) {
  body {
    max-width:600px;/*Ketika halaman dibuka di layar dengan ukuran minimal 600 piksel*/
  }
}
@media screen(min-width: 300px) {
  body {
    max-width:300px;/* ketika halaman dibuka dilayar dengan ukuran minimal 300 piksel */
  }
@media screen(maxn-width: 300px) {
  body {
    max-width:300px;/* ketika halaman dibuka dilayar dengan ukuran maksimal 300 piksel */
  }
@media print{
  body {
    max-width:300px;/* ketika halaman dalam mode print
  }
}

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.

advertisement

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! ????