Mengenal Konsep CSS

Mengenal CSS

Apa itu CSS?.. Cascading Style Sheets atau yang lebih di kenal sebagai CSS, adalah salah satu feature dalam HTML yang memungkinkan anda untuk mengatur tampilan halaman website yang anda bangun. Tidak ada sebuah keharusan dalam menggunakan style sheets untuk memformat halaman website, namun menambahkan style sheets, dalam hal ini CSS adalah sebuah kelebihan tersendiri untuk tampilan halaman website nantnya.

Bukan itu saja, CSS memungkinkan anda untuk memberi suatu efek-efek khusus pada isi halaman websiite secara lebih spesifik, dengan lebih sedikit kode yang ditambahkan. Misal, untuk membuat semua text yang di tulis tebal dan miring, memiliki warna merah, hanya perlu melaukan satu baris tambahan kode untuk melakukan semua itu.

CSS dapat digunakan pada satu atau lebih halaman HTML. untuk mendefinisikan Style beberapa halaman HTML, biasanya CSS disimpan di dalam suatu file tersendiri di luar file HTML. Hal ini memudahkan web desainer untuk melakukan perubahan Style, sehingga untuk merubah tampilan beberapa halaman HTML cukup dengan merubah satu file CSS.

Isitlah dasar

Selector

Bila di artikan secara bebas, selector adalah link atau penghubung yang menghubungkan antara style dengan halaman HTML. Secara spesifik, selektor dapat berupa satu atau beberapa tags element HTML maupun nama class suatu element pada halaman website. Selektor inilah yang akan menentukan element apa yang akan diberi pengaturan pada HTML. Selain itu, selektor juga sebagai penanda sebuah rule.

Declaration

Declaration atau deklarasi adalah sebuah bagian dari suatu rule yang berisi satu atau banyak pengaturan yang akan dilakukan untuk sebuah rule tersebut. Dalam pendeklarasiannya, declaration terdiri dari dua komponen utama, yaitu property dan nilai property itu sendiri. Satu propery dengan nilainya disebut sebagai satu pengaturan. Satu declaration dapat terdiri dari satu atau banyak pengaturan, tergantung dari keinginan si pembuat website. bila dalam declaration terdiri dari banyak pengaturan, maka masing-masing pengaturan dipisahkan dengan tanda titik-koma (;).

Rule

Rule adalah bagian dari sebuah stle yang didalamnya terdiri dari selector dan declaration rule yang akan di terapkan pada element halaman website.

Style Sheet

Sedangkan stylesheet merupakan gabungan dari semua itu, yaitu berisi dari rule-rule yang ingin diterapkan pada suatu halaman website.

Aturan Penulisan

Rule

Secara umum, sebuah rule dalam suatu stylesheet dituliskan dengan format sebagai berikut :

Selector { property: nilai }

Dimana :

Selector	:	Dapat berupa tag element HTML yang akan didefinisikan atau dapat berupa apa saja.
Property	:	Merupakan jenis pengaturan dalam CSS yang akan dilakukan.
Nilai	:	Nilai atau masukkan yang sesuai dengan jenis property yang dituliskan.

Contoh dari penulisan sebuah rule adalah :

/* Website Coplete Coding Blogspot - */
H1 { color:green }
H2 {text-align: center }
Body { background-color: rgb (255, 255, 0) }

Dapat juga menjadi :

H1 {
        color: green;
        text-align: center
      } /*Website Coplete Coding Blogspot*/

Property Dan Nilai

Untuk penulisan property pada deklarasinya, harus menyesuaikan dengan daftar property yang disediakan oleh CSS. Karena sifatnya yang non case sensitive, huruf besar dan kecil tidak dibedakan, penulisan menggunakan huruf besar maupun kecil tidak menjadi masalah.

Misal untuk property background-color, maka dapat dituliskan sebagai berkut :

BACKGROUND-COLOR

background-color

Background-Color

Atau bisa juga :

Background-color

background-Color

Sedangkan untuk nilai dari property tersebut, penulisannya diletakkan setelah property dengan pemisah berupa tanda colom (:), dan tidak di apit oleh tanda apaun. Isi nlai disesuaikan dengan jenis property yang dimasukkan.

Misal, warna kuning untuk bacground, dapat ditulis dengan :

background-color : rgb (255, 255, 0)

background-color : yellow

Pengelompokkan

CSS memungkinkan anda untuk melakukkan pengelompokkan beberapa selektor yang memiliki deklarasi yang sama, atau mengelompokkan beberapa aturan untuk sebuah selektor yang sama menjadi sebuah rule.

Untuk mengelompokkan beberapa selektor menjadi satu selektor, digunakan tanda pemisah berupa tanda koma.

Misal untuk rule :

H1 { color : green }

H1 { text-align : center }

H1 { font-style : bold }

Dapat dikelompokkan menjadi :

H1 { 

         color : green;

         text-align : center;

         font-style : bold;

      }

Atau bisa juga menjadi :

H1 { color : green;  text-align : center;  font-style : bold; }

Komentar

Untuk mendefinisikan komentar didalam sebuah stylesheet, Komentar dituliskan diantara tanda :

/* dan */

Contoh :

/* Ini adalah komentar
Tidak akan dibaca oleh CSS */

H1 {
        color: green;
        text-align: center;
        font-style: bold;
    }

Cukup sampai disini pengenalan CSS yang di terapkan di HTML, dan ini baru penjelasan sederhana untuk membangun CSS dan atributnya. Dapat dkatakan ini adalah contoh simpelnya untuk membuat atau mengenal atribut CSS di dalam HTML. Dan jika ada yang kurang paham bisa kalian tinggalkan komentar dibawah artkel ini.

Tweet

Postingan terkait:

— Senin, 20 Juni 2016 — Add Comment — CSS