Apa itu CSS?

CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal seperti warna, ukuran, dan spasi pada element HTML. Gambar disisi kiri hanya terdiri dari HTML saja. Dengan menerapkan CSS, Anda dapat menentukan style seperti tata letak, sesuai contoh yang ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan menentukan "dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. Pada contoh dibawah, CSS diterapkan ke element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah ("bagaimana"). Element HTML yang ditargetkan disebut sebagai Selector.

Warna

Mari kita pelajari property color (warna)!

Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;. Anda tidak perlu menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Sintax CSS

Ada beberapa hal yang harus diingat saat menulis CSS.

Seperti HTML, Anda harus selalu mengindentasi code CSS seperti gambar di bawah. Selain itu, perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS dan titik koma ; diakhir baris seperti gambar dibawah.

Komentar CSS

Seperti di HTML, Anda dapat menulis komentar di file CSS.

Namun di CSS, komentar harus diapit oleh /* */.

Ukuran Font

Ukuran font dapat ditetapkan dengan property font-size.

Satuan umum untuk menentukan font-size adalah px (piksel).

Jenis Font

Dengan property font-family, Anda dapat menentukan jenis font.

Anda dapat melakukan ini dengan menetapkanfont-family: nama font; Jika nama font berisi spasi, Anda harus mengapitnya dengan tanda petik ganda.

Aneka ragam Font

Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font seperti serif dan sans-serif.

Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

Warna Latar Belakang

Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda dapat menetapkan warna latar belakang seperti menetapkan property color. Selain itu, jika huruf yang sama memanjang seperti #dddddd, ini dapat disingkat menjadi #ddd.

Lebar dan Tinggi

Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi). Unit kedua element ini dapat ditentukan dengan px, sama seperti font-size.

Menerapkan CSS ke Elemen Tertentu

Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan mengubah semua element <li> menjadi merah.

Jadi, bagaimana cara mengubah hanya satu element <li> menjadi merah?

Memberi Label pada Tag

Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan menggunakan atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan CSS yang berbeda ke setiap element. Saat menerapkan CSS ke class selector, perhatikan bahwa titik . diperlukan di depan nama class.

Menerapkan CSS ke Beberapa Tag

Seperti gambar diatas, Jika Anda menetapkan nama class yang sama kebeberapa element HTML, CSS yang sama akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa memberikan titik, CSS tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik, tetapi tag tidak demikian.

Kini Saatnya Membuat Situs Pertama Anda

Kini saatnya membuat situs pertama Anda!

Lihat gambar di atas untuk mendapatkan ide tentang apa yang akan Anda ciptakan.