CSS

A.  Istilah istilah dalam CSS

1. Class selsctor

            Dengan  class selector kita dapat mendefinisikan perbedaan style untuk element htmk yang sama.misalnya 2 style paragraf,paragraf pertama menggunakan align:-lift dan yang paragraf satu nya lagi menggunakan align-center,contoh penggunaan attribut class di dalam html :

<p class :”left”>paragraf ini rata kiri<p> <p calss :”right”>paragraf ini rata kanan<p> Maka penulisan pada file CSS.nya menjadi: .lift{text-align:lift} .right{txt-align:right}

Keterangan :

Ø  Pada penulisan nama class dalam file css diawali dengan tanda ( . )

Ø  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 ( - ) atau ( _ )

2. ID selector

ID selector digunakan dengn tujuan mendefinisikan per elemen dasar.setiap halaman id selector hanya boleh digunakan dengan satu id unik,itulah yang menjadi perbedaan nya dengn class selector kita dapat mendefinisikan perbedaan style untuk teg elemen html yang sama.tetepi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama

Contoh:

<p id : ”table”> Paragraf ini ditulis dengan huruf tebal dan warna merah. </p> <p id :”miring”> Paragraf ini ditulis dengan huruf miring & warna biru.</p> Maka penulisan pada file css nya menjadi : #tabel{font-weight :bold;           Color :red;} #miring {font-style:italyc;          Color :blue;

Keterangan :

·         Pada penulisan nama id dalam file css diawali dengan tanda pagar (#)

·         Nama id dapat ditulis dengan angka,huruf/garis bawah

·         Karakter pertama sebaiknya huruf /garis bawah ( _ )

B. komentar dalam css

    Comments/komentear biasa nya digunakkan oleh programmer untuk memudahkan mengingat kembali script yang sudah ditulis nya,comments di css hampir sama dengan comments di  C /C++ yaitu dengan menggunakan :

/* isi comments */

Contoh :

H1{color:blue;} /*H1 element akan menjadi biru */ Tegs.H1color =”blue “; /*elements akan menjadi bir */

C.pemakaian element style

       Mari kita mulai dengan mengatur warna huruf dan latar belakang anda dapat mengerjakan ini dengan menggunakkan elements style untuk mengatur karakter kode teg dokumen anda.

<Style type =”text /css”> Body{color:black;background :white;}</style>

      Pernyataan yang ditulis antara kode tag <style>dan </style> menunjukkan perintah pengaturan style.

1.    Link ke sheet lainnya

    Apabila anda menginginkan style ke sheet yag sama untuk halaman HTML anada yang lain,disarankan mempergunakan sheet – sheet terpisah namun satu dan lainnya terhubung dengan cara link anda dapat mengikuti cara berikut ini 

<link real=”styles sheet”    href =”style.css”>

            Kode tag untuk link ini dibagian “head“ dokumen anda.perintah rel perlu diatur deng perintah “style sheet” supaya browser dapat menemukan perintah href sebagai menunjukkan ke alamat web (url) sheet ada.

2.    Menagatur tepi halaman (page margin)

    Halaman akan lebih tampil cantik bila ditulis dengan mergin yang lebih lebar.anda dapat mengatur sisi kiri dan kanan memakai karakter “margin-lift” & “margin-right”.

Contoh:

<style type=”text/css”> Body{margin lift :10%;margin-right:10%;}</style>

 Perintah diatas dituliskan dengan tujuan agar tampilan halam WAB

Dialayar monitor memiliki batas halaman kiri 10% & lebar layar monitor.

3.    Menatur indah kiri dan kanan

   Agar tapilan wab lebih cantikbisa juga diberikan inden(spasi)dari margin kiri beberapa huruf sebelum menuliskan awal kalimat.

Contoh:

<style type =”text/css”> Body{margin-lift:10%;margin-right:10%;} H1{margin-lift:-8%;} H2,h3,h4,h5,h6{margin-lift:-4} </style>

4.    Mengatur tepi penulisan dari tepi jarak atas dan bawah halaman program browserbiasanya mengerjakan batas atas & bawah ,program dan lain lain dengan baik namunketika anda ingin membuat ruang disebelah atas atau bawah halaman web anda,/anada ingin membuat spasi yang khusus,barulah disini anda perlu memiliki cara mengaturnya.

     Property”margin-top”manatukan ruanng sebelah atas & property

 “margin-bottom”menentukan ruang sebelah bawah halaman web anda,Bila anda hendak mangatur semuanya dengan heading H2,anda cukup menuliskan dengan perintah HTML sebagai berikut:

H2{margin-top:8 cm ;margin-bottom:3 cm;}

Kode cm merupakan unit penting dalam mengatur ukuran tinggi font ukuran huruf.ini lebih mudah bila dibanding dengan pengaturan pixer/titik(point).unit ini akan sangat berguna pada pembuatan huruf besar.satuan titik(point)umum nya digunakan oleh program word processor misalnya dituskan ukuran huruf

10 pt.sayang nya untuk ukuran titik yang sama,menghasilkan ukuran huruf yang berbeda pada pemakaian program browser yang berbeda pula.untuk mengatur ruang sebelah atas bagian haeding halaman wab,anda sebaiknya mambuat nama style untuk heading tersebut. Dalam penulisan HTML nya anda cukup menggunakan attribut class.

Contoh:

<h2 class =”subsection”>getting started</h2>

Kemudian pengaturan ruang nya ditulskan dengan perintah berikut :

H2. Subsection{margin-top:8 cm ;margin-botton :3 cm;

Pengaturan ini dimualai dengan nama tag,sebuah titik dan kemudian nilai dari attribut class.hati hati dalam menempatkan ruangsebelum/sesudah titik tersebut.bila pengaturan tersebut tidak memberikan hasil.ada cara lain untuk mengatur style elemen tertentu.tapi attribut class tetep bersifat flaksibel.pada saat sebuah ”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 pad baris pertam tiap paragraf.

Contoh:

P{text-indent:20 cm; margin-top:0;margin-bottom:0;}

 Cara tersebut akan membuat indent pada baris pertama paragraf sejauh 2 cm dan memberikan jarak antar paragraf.