Apa Itu CSS

CSS adalah bahasa yang digunakan untuk menata style, design atau tampilan halaman Web.

Apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheets
CSS menjelaskan bagaimana elemen HTML akan ditampilkan di laptop, dekstop atau mobile
CSS menghemat banyak pekerjaan karena CSS dapat mengontrol tata letak beberapa halaman web sekaligus
CSS dapat disimpan dalam file terpisah dengan pada file berekstensi .css

Mengapa Menggunakan CSS?

CSS digunakan untuk menentukan style halaman web yang akan dibuat, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.

Contoh CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

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

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>Contoh CSS Pertama Saya</h1>
<p>Ini adalah sebuah paragraf.</p>

</body></html>

Jalankan Contoh

CSS Memecahkan Permasalahan Design Web

HTML tidak dibuat untuk untuk memformat atau menentukan design halaman web.

HTML dibuat untuk mendeskripsikan konten halaman web, melalui berbagai tag atau elemen, seperti:

<h1>Ini judulnya</h1>

<p>Ini adalah sebuah paragraf.</p>

Saat tag seperti <font>, dan atribut warna ditambahkan pada spesifikasi HTML 3.2, hal itu mulai menjadi permasalahan bagi pengembang web. Pada pengembangan situs web besar, informasi font dan informasi warna ditambahkan ke setiap halaman, menjadikan proses pengembangan menjadi rumit.

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

CSS menggantikan pemformatan style dari pada setiap halaman HTML sehingga proses pemformatan atau design halaman web menjadi lebih sederhana.

CSS Memudahkan Pengelolaan Kode

Definisi style, design atau tampilan HTML biasanya disimpan dalam format file .css.

Dengan file .css eksternal, maka pengembang dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file, sehingga tidak perlu mengubah kode di setiap halaman untuk mengubah tampilan website.

Sintaks CSS

Aturan penulisan CSS terdiri dari selector dan blok deklarasi. Selector menunjuk ke elemen HTML yang akan diberi style.

Blok deklarasi berisi satu atau beberapa deklarasi yang dipisahkan oleh titik koma. Setiap deklarasi menyertakan nama dan nilai properti CSS, dipisahkan dengan titik dua. Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi diapit oleh kurung kurawal.

Contoh

Dalam contoh ini semua <p> elemen akan rata tengah, dengan warna teks merah:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Halo Dunia!</p>
<p>Paragraf ini ditata dengan CSS.</p>

</body></html>