Pengenalan CSS

CSS merupakan salah satu alat terpenting dalam mendesain dan mempercantik tampilan sebuah website. Kami akan mengajari Anda dasar-dasar dan cara menggunakan CSS

CSS Dapat Mengubah Gaya Kecantikan HTML

CSS adalah bahasa yang kita gunakan untuk menata halaman Web.

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lain
CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus
Stylesheet eksternal disimpan dalam file CSS

Demo CSS - Satu Halaman HTML - Beberapa Gaya!

Di sini kita akan menampilkan satu halaman HTML yang ditampilkan dengan empat stylesheet yang berbeda. Klik tautan "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" di bawah untuk melihat gaya yang berbeda:

Mengapa Menggunakan CSS?

CSS digunakan untuk menentukan gaya halaman web Anda, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS Memecahkan Masalah Besar

HTML TIDAK PERNAH dimaksudkan untuk memuat tag untuk memformat halaman web!

HTML dibuat untuk menggambarkan konten halaman web, seperti:

<h1> Ini adalah heading </h1>

<p> Ini adalah paragraf. </p>

Ketika tag seperti <font>, dan atribut warna ditambahkan ke spesifikasi HTML 3.2, itu memulai mimpi buruk bagi pengembang web. Pengembangan situs web besar, di mana font dan informasi warna ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) membuat CSS.

CSS menghapus pemformatan gaya dari halaman HTML!

CSS Menghemat Banyak Pekerjaan!

Definisi gaya biasanya disimpan dalam file .css eksternal.

Dengan file stylesheet eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Sintaks CSS

Aturan CSS terdiri dari pemilih dan blok deklarasi.
Pengantar CSS

Pemilih menunjuk ke elemen HTML yang ingin Anda gaya.

Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.

Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.

p {
  color: red;
  text-align: center;
}

Contoh Dijelaskan

p adalah pemilih di CSS (ini menunjuk ke elemen HTML yang ingin Anda beri gaya: <p>).
color adalah properti, dan red adalah nilai properti
text-align adalah properti, dan center adalah nilai properti