CSS – Cascading Style Sheet adalah bahasa pemograman web yang digunakan untuk mendesain tampilan web agar lebih menarik. CSS juga menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau di media lain.
CSS menghemat banyak pekerjaan. dapat mengontrol tata letak beberapa halaman web sekaligus.
Stylesheet eksternal disimpan dalam file bertipe CSS
Mengapa kita perlu menggunakan CSS?
CSS digunakan untuk menentukan gaya halaman web Anda, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.
CSS dapat menyelesaikan masalah pada tampilan web
HTML TIDAK PERNAH dimaksudkan untuk memuat tag untuk memformat halaman web!
HTML dibuat untuk mendeskripsikan konten halaman web, seperti:
<h1> INI ADALAH JUDUL </h1>
<p>ini adalah sebuah paragraf <p>Saat tag seperti , <font> dan atribut warna ditambahkan ke spesifikasi HTML , ini menjadi 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!
Syntax
CSS terdiri dari 2 bagian aturan yaitu Selector dan Declaration Block
Selector merupakan bagian dari elemen HTML sedangkan declaration adalah perintah untuk mendklarasikan elemen tersebut kedalam style tertetntu yang dipisahkan menggunakan tanda titik koma.
Ada 3 langkah menambahkan kode CSS :
- External CSS
- Internal CSS
- Inline CSS
External CSS
Dengan Eksternal CSS, kamu dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!
Setiap halaman HTML harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link> , di dalam bagian head.
Internal CSS
Lembar gaya internal dapat digunakan jika satu halaman HTML tunggal memiliki gaya yang unik.
Gaya internal didefinisikan di dalam elemen <style> di dalam bagian head
Inline CSS
ditulis pada satu baris dengan elemen HTML
berikut ini contoh syntax CSS
CSS Comments
CSS comment digunakan untuk menjelaskan baris code yang ditulis. dan mungkin dapat membantu kamu ketika mengedit code program padaa hari berikutnya. contoh penulisannya :
/* This is a single-line comment */
p {
color: red;
}CSS Color
Warna dapat digunakan secara lebih spesifik, dapat menggunakan langsung nama warnanya, RGB, HEX, HSL, RBA, maupun HSLA
contoh penulisan tag color warna :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>