Pengenalan Dasar CSS Untuk Pemula

Bagikan

CSS (Cascade Style Sheet) merupakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah.

Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, dan lain-lain.

CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.

 

Struktur Kode atau Sintaks Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:

  1. Selektor;
  2. Blok Deklarasi;
  3. Properti dan nilanya.

Selektor

Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur. Contohnya :

h1 {

color: red;

}

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:

Blok Deklarasi

Blok deklarasi adalah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor. Contohnya :

p {

font-size: 18px;

}

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.

Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.

Properti dan Nilainya

Properti merupakan atribut atau sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.

Seperti halnya :

properti: “nilai”;

Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma.

Properti harus ditulis di dalam blok deklarasi.

Contoh:

 

Lalu Bagaimana Cara Menulis kode CSS dalam HTML

Penulisan kode CSS di HTML dapat dilakukan di dalam tag <style>. Tag tersebut dapat ditulis di dalam tag <head> atau <body>.

Kebanyakan orang menulisnya di dalam tag <head>. Perhatikan contoh berikut ini:

Hasilnya, elemen <p> akan berwarna merah:

 

Sekian artikel kali ini semoga bermanfaat yaaa!!!

Subscribe & Dapatkan Info Lainnya

WEBZID DEVELOPER

Berita Terkait