Sunday, June 19, 2016

Konsep Dasar CSS

CSS
CSS (Cascading Style Sheets)
Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai Bahasa pemrograman guna mengatur desain layout web.
CSS (Cascading Style Sheets) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan template yang berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang dirancang. Hal ini sangat penting karena halaman yang menggunakan CSS dapat dibaca secara bolak-balik dan isinya dapat dilihat oleh pengunjung dari manapun.
CSS dapat menciptakan halaman yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa memerlukan suatu tabel. Dengan CSS, akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dalam situs yang dibuat.
Cara kerja CSS
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap style mempunyai dua buah elemen dasar, yaitu “selector” dan “declaration”. Sebuah selector adalah tag HTML, sementara declaration adalah satu atau beberapa perintah atau nilai dari CSS yang menunjukkan tipe bentuk yang diaplikasikan pada selector. Declaration ini biasanya ditandai dengan tanda kurung kurawal {}. Perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan tanda titik-koma (;) seperti pada contoh berikut :
<style>
h1 {color:blue; font-size:12px;}
</style>

Dapat dilihat bahwa :

.h1 adalah selector, dan {color:blue; font-size:12px} adalah declaration.
selector

Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau dibuat di luar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML.
Hal yang paling umum dalam memukan kode Style Sheet dengan menggunkan tag <style>. Tag ini selalu dalam bagian <head> dan sebelum </head> dari dokumen. Secara garis besar perhatikan contoh berikut :
<!DOCTYPE html>
<html>
                      <head>
                                          <style>
                                          . . . aturan-aturan css . . .
                                          </style>
                      </head>
<body>
                      . . . Dokumen HTML yang akan diberikan aturan CSS
</body>
</html>

Rules dalam penulisan selector style pada CSS
Selector digunakan untuk memilih elemen-elemen HTML berdasarkan nama, id, class, atribut dan lain-lain. Berikut ini merupakan beberapa teknik penulisan selector dalam CSS.
Element selector merupakan cara penulisan syntax css berdasarkan elemen-elemen yang sudah disediakan pada bahasa HTML. Anda dapat memlihi semua elemen dari tag <p> pada sebuah halaman seperti contoh dari elemen selector adalah sebagai berikut:
p {
         color: red;
         text-align: center;
   }

Class Selector digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.
Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id. Berikut ini adalah penulisan class selector:
.center {
       Text-align: center;
        Color: red;
}

Contoh script pemanggilannya adalah sebagai berikut :
<p class=”center”>contoh pemanggilan class
Selector</p>

Id Selector Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen. Contoh penulisannya adalah sebagai berikut:
#paral {
        Text-align: center;
         color: red;
}

Contoh script pemanggilannya adalah sebagai berikut :
<p id=”paral”>>contoh pemanggilan style menggunakan id
Selector</p>

Grouping Selector Digunakan jika anda memiliki beberapa elemen dengan deklarasi style yang sama. Misalnya contoh berikut ini:
h1 {
       text-align: center;
       center: red;
      }
h2 {
       text-align: center;
       color: red;
      }
p   {
       text-align: center;
       color: red;
      }

Jika kita lihat pada contoh di atas, terdapat tiga elemen dengan deklarasi style yang sama. Penulisan selector tersebut sangat tidak efektif. Maka dari itu agar penulisan style lebih efektif maka akan lebih baik untuk mengelompokkan selector-selector. Untuk mengemlompokkan atau grouping selector, gunakan tanda koma untuk setiap selector. contoh di bawah ini adalah cara untuk mengelompokan beberapa selector dengan deklarasi style yang sama.
h1, h2, p {
       text-align: center;
       color: red;
}


No comments:

Post a Comment