Pengertian, Struktur dan Cara Menggunakan CSS – CSS singkatan dari Cascading Style Sheet, yaitu dokumen yang berisi definisi style untuk sebuah dokumen HTML untuk mengatur tampilan dari dokumen HTML. Meliputi layout dokumen, pewarnaan dan tampilan font dan teks dan lain sebagainya. Penulisan CSS baiknya ditulis terpisah dari konten HTML. Hal ini dilakukan untuk meningkatkan daya akses konten pada web. Serta mengurangi kerumitan dalam penulisan kode dan struktur dari dokumen HTML.
Dengan adanya CSS, konten dan desain web akan mudah dibedakan. Jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web. Sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.
Struktur Penulisan CSS
CSS ditulis dengan format penulisan seperti berikut:
1. selector { property:value }
2. selector { property:value; property:value }
Selector adalah bagian CSS yang berfungsi untuk memilih elemen yang akan dikenai style. Property adalah jenis style yang akan diterapkan pada elemen, dan value adalah nilai dari property yang digunakan. Property dan value CSS ditulis di antara kurung kurawal. Jika property CSS yang digunakan lebih dari satu, maka pisahkan dengan titik koma.
Contoh penulisan CSS:
1. <style>
2. h1 {
3. font-size: 40px;
4. color: orange;
5. }
6. </style>
7. <h1>INI Judul</h1>
Pada contoh di atas, kita menulis h1 sebagai selector yang artinya kita ingin agar elemen <h1> pada HTML dikenai style. Property yang diterapkan adalah font-size untuk mengatur ukuran font, diatur dengan nilai 40px, dan property color untuk mengatur warna teks, diatur dengan nilai orange.
Cara Penggunaan CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu external, internal dan inline.
Inline Style Sheet
Pada teknik ini kita menulis kode CSS di dalam tag HTML, tepatnya di dalam atribut style. Teknik ini akan menerapkan style hanya pada elemen yang dikenai style tersebut.
1. <h1 style=”font-size:40px; color:orange;”>
2. INI Judul
3.</h1>
External Style Sheet
Teknik eksternal stylesheet adalah menuliskan kode untuk style CSS di file terpisah dengan kode HTML.
Style di definisikan di dalam file, misalkan style.css:
1. /* style.css */
2. h1 {
3. font-size: 40px;
4. color: orange;
5. }
Kemudian style.css ditautkan di dalam dokumen HTML menggunakan tag <link>
1. <!– index.html–>
2. <link href=”style.css” rel=”stylesheet” type=”text/css” />
3. <h1>INI Judul</h1>
Ada banyak CSS yang perlu kita ketahui, namun tidak perlu dihapal. Intinya kalian paham dengan CSS tersebut. Untuk lebih detail kalian bisa mengunjungi https://www.w3schools.com/cssref/ . Disitu kalian bisa praktek juga.
Sekian penjelasan mengenai Pengertian, Struktur dan Cara Menggunakan CSS. Semoga dapat membantu sobat nesia yang ingin belajar CSS ya 🙂
