Pengenalan CSS
2. CSS (Cascading Style Sheet)
Apa itu CSS ?- CSS adalah singkatan dari Cascading Style Sheets
- CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau di media lain
- CSS menghemat banyak pekerjaan. Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus
- File CSS disimpan dengan format ekstensi (.css)
- CSS digunakan untuk menentukan gaya suatu halaman WEB, termasuk desain/template, tata letak/layout dan variasi tampilan untuk memperindah halaman WEB yang disesuaikan dengan ukuran/resolusi layar suatu browser.
Scripts CSS biasanya disimpan dalam file css eksternal (file tersendiri).
Dengan file stylesheet eksternal, kalian dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file yang ber-format-kan file (.css).
Contoh sederhana scripts CSS :
p {
text-align: left;
color: black;
background-color: yellow;
}
scripts CSS di atas menjelaskan bahwa semua element <p> atau paragraf pada tag html, yaitu :
- rata text : kiri
- warna text : hitam
- warna background text: kuning
Jika kalian ingin mencoba nya melihat hasilnya seperti apa, yaitu
Caranya :
- seperti biasa buka Notepad
- ketik scripts di atas (text yang ber-warna merah terserah mau kalian ganti apa)
- lalu save dengan ekstensi (.css) ga usah pake tanda kurung nya. contoh : style.css
Nah, sekarang tinggal kalian modifikasi sedikit lagi file HTML yang telah kalian buat pada postingan sebelumnya, jadinya seperti ini :
<!DOCTYPE html> <html> <head>
<link rel="stylesheet" href="style.css">
<title>Judul halaman</title> </head> <body> <h1>Judul konten 1</h1> <p>Paragraph 1</p> </body> </html>
Ketik yang di blok dengan warna pada ruang lingkup/antara tag <head> dan </head>.
Jika sudah kalian save lagi file HTML nya, dengan ekstensi (.html) inget ga pake tanda kurung nya.
Nah, kalian juga bisa me-modifikasi lagi file CSS nya sesuai keinginan kalian.
Sedangkan untuk file HTML nya tidak perlu cukup seperti itu, dirubah jika ada pergantian lokasi folder, dan nama file nya.
Sekian penjelasan untuk Pengenalan CSS.
Sampai bertemu dengan pembelajaran di postingan berikutnya.
Semoga bermanfaat !
Comments
Post a Comment