4 Elemen Penting Pada CSS
Apabila anda ingin mempelajari desain Web maka CSS wajib anda kuasai, dengan CSS kita dapat merubah tampilan style dari halaman web dengan mudah.
CSS adalah singkatan dari Cascading Style Sheet yang berarti kompulan kode yang berurutan dan saling berhubungan satu dengan lainya untuk mengatur tampilan style halaman web.
Pada turorial belajar CSS untuk pemula ini kita akan mempelajari pengenalan dan 4 elemen penting yang sahabat harus kuasai didalam belajar CSS.
Fungsi CSS :
Dengan menggunakan CSS kita bisa mengatur dan merubah tampilan web, mulai dari desain, tata letak layout, berbagai fariasi tampilan di berbagai ukuran layar, warna backround, teks, tipe font, dan masih banyak lagi fungsinya.
Keuntungan CSS lainya adalah kita hanya membuat satu file tempat kode CSS, apabila kita ingin merubah misalnya style font judul kita tinggal merubah style halaman web dari satu halaman CSS maka semua akan berubah.
Contoh :
<!DOCTYPE html>
<html>
<title>Belajar CSS</title>
<head>
<style>
body {
background-color: lightgreen;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Contoh Halaman Dengan Style CSS</h1>
<p>Dengan CSS kita dapat dengan mudah merubah tampilan style pada web, seperti tampilan backround ini.</p>
</body>
</html>
Disini kita perhatikan penulisan kode CSS diletakan diantara <head> dan </head>, kode CSS diawali dengan <style> dan diakhiri </style>
4 elemen penting yang wajib anda kuasai didalam penulisan kode CSS yakni :
- Selector
- Declaration
- Property
- Value
Kita ambil contoh pada kode CSS diatas yang kita buat, pada kode diatas terdapat :
h1 {
color: white;
text-align: center;
}
Selector
( h1 )sebagai Selector penanda bagian mana yang akan kita rubah style dengan CSS, maksud dari kode di atas adalah warna judul menjadi warna putih (white), diletakan pada bagian posisi tengah (center)
Declaration
Berisi kompulan style CSS yang berada diantara kurukurawal ( { } ) , yang terdiri dari Property (jenis style) dan Value (Nilai style, bergantung pada Property). Jadi Property dan value harus sama-sama terisi agar bisa digunakan.
Sehingga CSS diawali dengan Selector, yakni bagian mana yang akan ditandai dan dirubah style tampilan.
Kemudian setelah selector diisi dengan ( Declaration ) yang terdiri dari Property dan value di dalam kurukurawal.
Penulisan property dipisah oleh tanda titik dua ( : ) dan di akhiri dengan titik koma ( ; )
Case sentivity, dimana CSS tidak membedakan antara huruf kecil dan besar.
h1 {
Color: white;
Text-Align: center;
}
Kode diatas tetap bisa jalan seperti biasa pada saat kita menggunakan huruf kecil.
Penulisan Komentar didalam CSS
Didalam CSS kita bisa memasukan komentar dengan tanda /* di akhiri dengan */ fungsin dari komentar adalah membantu kita apabila kita membuat kode yang banyak kita akan lupa fungsi dari kode yang kita buat untuk apa, maka dengan membuat sebuah keterangan pada kode program kita dengan mudah mengetahui kode program tersebut untuk apa, dan juga kedepan untuk pengembangan dapat dilakukan dengan mudah.
/* Ini adalah judul paragraph */
h1 {
color: white;
text-align: center;
}
Antara angka dan satuan tidak ada spasi :
Contoh:
p {
font-size: 12px;
}
Salah :
p {
font-size: 12 px;
}
Ada 3 aturan penting didalam membuat kode CSS.
1. Eksternal CSS
Eksternal CSS adalah cara yang disarankan dan sering digunakan karena dengan menuliskan CSS pada satu file bisa di panggil dengan tag <link> dimasukan antara <head> dan </head> sehingga dengan mudah didalam merubah style CSS tinggal merubah syle CSS yang telah kita buat.
Contoh :
Buat file dan simpan file tersebut dengan nama dan format ( style.css ) isikan kode CSS berikut :
body {
background-color: Aqua;
}
h1 {
color: white;
text-align: left;
}
p {
font-family: verdana;
font-size: 12px;
}
Selanjutnya buat file baru dengan nama contohcss.html dan simpan dalam satu folder dengan file ( style.css ).
<!DOCTYPE html> <html> <title>Belajar CSS</title> <head><link href="style.css" rel="stylesheet"></head> <body> <h1>Contoh Eksternal Style CSS</h1> <p>Dengan CSS kita dapat dengan mudah merubah tampilan style pada web, seperti tampilan backround ini, dan warna dan jenis font pada teks .</p> </body> </html>
Hasil tampilan seperti di atas, apabila kita akan merubah tinggal edit file style.css pada bagian property dan value , pada body backround-color sahabat bisa juga merubah warna dingan menggunakan kode warna dengan mengisi : #00FFFF akan sama warna dengan Aqua. Tinggal sesuaikan dengan kebutuhan warna yang diinginkan, misalnya kita akan mengganti dengan warna hijau tinggal ganti : #7FFFD4 atau Aquamarine
2.Internal CSS
Internal CSS adalah kode CSS yang dimasukan langsung ke dalam satu file langsung pada tag syle diantara tag </head> dan </head>
Buatlah file dan simpan dengan nama contohcss1.html, ketikan kode CSS dibawah ini.
Contoh :
<!DOCTYPE html>
<html>
<title>Belajar CSS</title>
<head>
<style>
body {
background-color: Coral;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: timesnewroman;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Contoh Halaman Dengan Style CSS</h1>
<p>Dengan CSS kita dapat dengan mudah merubah tampilan style pada web, seperti tampilan backround ini, dan warna dan jenis font pada teks .</p>
</body>
</html>
Coba tebak dimana perubahan dari CSS di atas?.. yup betul selain warna bacround saya merubah jenis font pada paragraph menjadi font times new roman, jadi selanjutnya biar lebih lancar sahabat coba latihan dengan mengganti jenis font dan backround.
3.Inline CSS
Inline CSS adalah cara yang cepat didalam membuat style dengan langsung menulis CSS langsung ke dalam tag HTML.
Contoh buat file dengan nama contohcss2.html ketik kode berikut, ingat di ketik ya agar melatih menulis kode program
<!DOCTYPE html> <html> <title>Belajar CSS</title> <head> </head> <body> <h1 style="color:blue;margin-left:25px;">Contoh Halaman Dengan Style CSS</h1> <p>Dengan CSS kita dapat dengan mudah merubah tampilan style pada web, kita telah merubah dengan warna biru pada judul diatas.</p> </body> </html>
Dari tiga cara diatas disarankan dengan menggukan eksternal style, karena kita bisa lebih mudah nantinya didalam merubah style pada web, sehingga kita tidak perlu satu persatu halaman web kita rubah kode CSS
Ok sampai disini apa sahabat sudah bisa memahami aturan dasar tata cara penulisan, fungsi dan kegunaan dari CSS? Apabila belum bisa kita saling shering di kolom komentar, dan jangan lupa ikuti blog ini untuk mengikuti tutorial selanjutnya tentang CSS, salam sukses.
