Halo teman-teman, kali ini saya akan membagikan informasi mengenai materi CSS nih. CSS itu singkatan dari Cascading Style Sheet, yang merupakan salah satu bahasa pemrograman berbasis web. Oke deh, untuk info lebih lanjutnya, silakan dibaca materi dibawah ini ya
I. KONSEP CSS
Apa itu CSS :
- Feature untuk membuat dynamic HTML.
- Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
- Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru)
- Support ke semua browser.
Aturan penulisan :
- Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
- Nama property bersifat case sensitive.
color : green;
property : color
value : green
Rumus :
Selector {Declaration}
Declaration dijabarkan kembali menjadi :
Selector {Property : Value}
Contoh :
<html>
<head>
<title> Pengaturan Margin </title>
<style=”text/css”>
body {margin-top:1cm;margin-right:2cm;margin-bottom:1cm;margin-left:2cm;}
</style>
</head>
<body>
Pengtauran margin halaman.
(1 cm, 2 cm, 1 cm, 2 cm)
</body>
</html>
Aturan penuliasan CSS :
1. Inline style sheets.
2. Embedded style sheets / Internal style sheets.
3. External style sheets.
· Contoh Inline Style :
<html>
<head>
<title> Inline Style Sheets </title>
</head>
<body>
<p style=”color:blue”;> CSS </p>
<p> Saya sedang belajar format Inline Style Sheet dalam CSS </p>
</body>
</html>
· Contoh Embedded Style Sheet :
<html>
<head>
<title> Embedded Style Sheets </title>
<title> Embedded Style Sheets </title>
<style>
H2{color:yellow;}
p{font-family:Arial;font-size:14pt;}
</style>
</head>
<body>
<h2> Saya siswa kelas X RPL 3 </h2>
<p> Saya sedang belajar format Embedded Style Sheet dalam CSS </p>
</body>
</html>
</html>
· Contoh External Style Sheets :
File berextensi .html :
<html>
<head>
<title> External Style Sheets </title>
<title> External Style Sheets </title>
<link rel=”stylesheet” type=”text/css” href=”(namafile).css”>
</head>
<body>
<H2> CSS </H2>
</body>
</html>
</html>
File berextensi .css:
H2{color:grey;}
p{font-size:14 pt;}
A. Istilah –Istilah Dalam CSS
1. Class Selector
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya 2 tipe paragraf, paragraf pertama menggunakan align-left & yang paragraf 1 lagi menggunakan align-center. Contoh penggunaan atribut class didalam HTML :
<p class=”left”> Paragraf ini rata kiri </p>
<p class=”center”> Paragraf ini rata tengah </p>
Maka penulisan pada file CSS-nya menjadi :
.left{text-align:left}
.center{text-align:center}
Ketentuan Nama Class :
Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.).
Tidak dianjurkan memberi nama class dengan angka.
Nama class tidak boleh menggunakan spasi, jika nama class lebih dari 2 suku kata maka berikan tanda hubung (-) / (_).
2. ID Selector
Digunakan dengan tujuan mendefinisikan per-elemen dasar. Setiap halam ID Selector hanya boleh digunakan dengan 1 ID unik, itulah yang menjadi perbedaannya dengan class selector.
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag element HTML yang sama. Tetapi dengan ID Selector kita hanya diperbolehkan memanggil 1 ID untuk 1 element yang sama.
Contoh :
<p ID=”tebal”> Paragraf ini ditulis dengan huruf tebal & warna merah. </p>
<p ID=”miring”> Paragraf ini ditulis dengan huruf miring & warna biru. </p>
Maka penulisan pada file CSS-nya menjadi :
#tebal{font-weight:bold;color:red;}
#miring{font-style:Italic;color:blue;}
Ketentuan Nama ID:
Pada penulisan nama ID dalam file CSS diawali dengan tanda pagar (#).
Nama ID dapat ditulis dengan angka, huruf / garis bawah.
Karakter pertama sebaiknya huruf / underline (_).
B. Komentar Dalam CSS
Comments / komentar biasanya digunakan oleh programmer untuk memudahkan mengingat kembali script yang telah ditulisnya, comments di CSS hamper sama dengan comment di C++ yaitu dengan menggunakan :
/*Isi Komentar*/
Contoh :
H1{color:blue;}/*H1 elements akan menjadi biru*/
Tags.H1.color=”blue”;/*elements akan menjadi biru*/
C. Pemakaian Elemenet Style
Dimulai dengan mengatur warna huruf & latar belakang, dapat menggunaka element style untuk mengatur karakter kode tag dokumen.
<style type=”text/css”>
body{color:black;background:white;}
</style>
Pernyataan yang ditulis antara kode tag <style> & </style> menunjukkan perintah pengaturan style.
1. Link ke sheet lainnya.
Apabila menginginkan style yang sama untuk halaman HTML yang lain, disarankan mempergunakan sheet-sheet terpisah namun 1 & lainnya terhubung dengan cara link.
Caranya :
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Kode tag untuk link ini dibagian “head” dokumen. Perintah rel perlu diatur dengan pernyataan “stylesheet” supaya browser dapat menemukan perintah href sebagai penunjukkan ke alamat web (URL) sheet anda.
2. Mengatur Tepi Halaman (Page Margin)
Halaman web akan tampil cantik bila dituliskan dalam margin yang lebih lebar. Anda dapat mengatur sisi kiri & kanan memakai karakter “margin-left” & “margin-right”.
Contoh :
<style type=”text/css”>
body{margin-left:10%;margin-right:10%;}
</style>
Perintah diatas dituliskan dengan tujuan agar tampilan halaman web di layar monitor memiliki batas halaman kiri 10% dari lebar layar monitor.
3. Mengatur Inden Kiri & Kanan
Agar halaman web tampil lebih cantik bisa juga diberikan inden (spasi) dari margin kiri beberapa huruf sebelum menuliskan awal kalimat.
Contoh :
<style type=”text/css”>
body{margin-left:10%;margin-right:10%;}
h1{margin-left:-8%;}
h2,h3,h4,h5,h6{margin-left:-4;}
</style>
4. Mengatur Jarak Penulisan Dari Tepi Atas & Bawah Halaman.
Program browser biasanya mengerjakan batas atas & bawah, paragraf & lain-lain dengan baik. Namun ketika anda ingin membuat ruang disebelah atas / bawah halamn web anda, / anda ingin membuat spasi yang khusus, barulah disini anda perlu memiliki cara mengaturnya.
Property “margin-top” menentukan ruang sebelah atas & property “margin-bottom” menentukan ruang sebelah bawah halaman web anda. Bila anda hendak mengatur semuanya denga heading h2, anda cukup menuliskan dnegan perintah HTML sebagai berikut :
h2{margin-top:8 cm; margin-bottom:3 cm; }
Kode cm merupakan unit penting dalam mengatur ukuran tinggi font (huruf). Ini lebih mudah bila dibandingkan dengan pengaturan pixel / titik (point). Unit ini akan sangat berguna pada pembuatan huruf besar. Satuan titik (point) umumnya digunakan oleh program word processor misalnya dituliskan ukuran huruf 10 pt.
Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran huruf yang berbeda pada pemakaian program browser yang berbeda pula. Untuk mengatur ruang sebelah atas bagian heading tersebut. Dalam penulisan HTML-nya anda cukup menggunakan atribut class.
Contoh :
<h2 class=”subsection”> Getting Started </h2>
Kemudian pengaturan ruangnya ditulis dengan perintah berikut :
h2.subsection{margin-top:8 cm;margin-bottom:3 cm;}
Pengaturan ini dimulai dengan nama tag sebuah titik & kemudian nilai dari atribut class. Hati-hati dalam menempatkan ruang sebelum /sesudah titik tersebut. Bila pengaturan tersebut tidak memberikan hasil, ada cara lain untuk mengtur style elemen tertentu.
Tapi atribut class tetap bersifat fleksibel. Pada saat sebuat heading diikuti dengan sebuah paragraf, nilai untuk batas bawah (margin-bottom) untuk heading tersebut tidak ditambahkan dengan nilai batas atas (margin-top) paragraf.
5. Inden Pada Baris Pertama.
Kadang-kadang anda ingin membuat inden pada baris pertama tiap paragraph.
Contoh :
p{text-indent:2 cm;margin-top:0;margin-bottom:0;}
Cara tersebut akan membuat inden pada baris pertama paragraph sejauh 2 cm & memberikan jarak antar paragraph.
0 komentar:
Posting Komentar