Hosting Unlimited Indonesia
Go Blogging!Panduan membuat blog hingga menghasilkan uang!

Mengenal Dasar-Dasar Cascading Style Sheet (CSS)

Mengenal Dasar-Dasar Cascading Style Sheet (CSS) | juraganblog.com – CSS atau Cascading Style Sheet merupakan aturan-aturan untuk menentukan bagaimana sebuah halaman web akan ditampilkan.

CSS saat ini dikembangkan oleh World Wide Web Consortium (W3C) dan telah menjadi bahasa standar dalam pembuatan web.

Pengaturan pada CSS ini akan disimpan dalam sebuah file tersendiri dengan format .css. Tujuannya adalah untuk memisahkan antara HTML dan style bagaimana halaman akan ditampilkan.

Walaupun sebenarnya bisa disatukan ke dalam HTML (internal CSS), tapi cara ini sangat tidak dianjurkan, karena selain sangat merepotkan developer, juga tidak SEO friendly.

Baca Juga : Cara Menambahkan Custom CSS di Blogger dan WordPress.

Mengapa harus dipisah? Tentunya untuk mempermudah pengaturan style tampilan sebuah website. Dengan adanya CSS ini, maka sangat menghemat waktu bagi para developer website, dimana dengan hanya mengubah satu file css saja, dapat langsung berpengaruh pada semua halaman website.

Baik, langsung saja kita bahas..

Mengenal Dasar-Dasar Cascading Style Sheet (CSS)

Contoh HTML

<p>Ini adalah sebuah paragraph.</p>
<h1>Ini adalah sebuah Heading 1.</h1>

Penulisan Dasar CSS

Secara umum, penulisan dasar CSS terdiri dari selector, id, class, dan value. Lihat format penulisan berikut:

selector  {
    property: value;
}

Contohnya sebagai berikut:

p {
    color: red;
}

Keterangan :
Selector = p, property = color, value = red

Contoh Lainnya

body {
    background-color: lightblue;
}
h2 {
    color: white;
    text-align: center;
    font-size: 18px;
}
p {
    font-family: verdana;
    font-size: 20px;
}

Contoh aturan-aturan ini adalah mengatur tampilan HTML untuk body akan diberikan warna background biru muda.

Setiap heading h2 akan diatur dengan warna huruf putih, rata tengah dan ukuran huruf 18px.

Sedangkan untuk paragraph p akan diberikan aturan font verdana dengan ukuran 20px.

Untuk tingkat yang lebih advance, CSS memiliki selector ID dan Class. Selector ID ditandai dengan tanda #, sementara Class ditandai dengan tanda . “titik”.

Selector ID

Selector ID digunakan untuk satu bagian unik dari HTML.

Mengapa unik?

Karena selector ID hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti identitas pribadi yang hanya dapat dimiliki oleh satu orang saja.

Berikut ini syarat menggunakan selector ID :

  1. Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja;
  2. Tidak boleh ada ID lebih dari satu;
  3. Tidak boleh diawali oleh angka;
  4. Tidak boleh mengandung special characters (~ ! @ # $ %).

Format Penulisannya :

#namaID {
property : value;
}

Contoh Penggunaan ID :

#namaID {
font-size:25px;
color:red;
text-align:center;
}

Contoh Penerapannya Pada HTML :

<div id="namaID">Ini adalah sebuah section.</div>
<p id="namaID">Ini adalah sebuah paragraph.</p>

Hasilnya :

Ini adalah sebuah section.

Ini adalah sebuah paragraph.

Selector Class

Tidak seperti selector ID, selector Class digunakan untuk satu grup elemen atau penamaan yang bisa digunakan lebih dari satu elemen.

Berikut ini syarat menggunakan selector Class :

  1. Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja;
  2. Class bisa digunakan dilebih dari satu elemen;
  3. Bisa menggunakan lebih dari satu nama Class pada satu elemen;
  4. Tidak boleh diawali oleh angka;
  5. Tidak boleh mengandung special characters (~ ! @ # $ %).

Format Penulisannya :

selector.namaClass {
property : value;
}

Contoh Penggunaan Class :

p.coba {
font-size:25px;
color:orange;
padding:10px;
text-align:center;
}

p.hitam {
background:black;
}

Contoh Penerapan Pada HTML :

<p class="coba">Ini adalah sebuah paragraph.</p>
<p class="coba hitam">Ini adalah sebuah paragraph background hitam.</p>

Hasilnya :

Ini adalah sebuah paragraph.

Ini adalah sebuah paragraph background hitam.

Gimana sob?

Udah sudah paham sekarang kan ya..

Ayo explorasi kreatifitasmu dengan CSS, agar tampilan blog kamu tambah kereen.

Demikian artikel Mengenal Dasar-Dasar Cascading Style Sheet (CSS),

Semoga bermanfaat..

Happy blogging Guys..

Tags:,

Add a Comment

Your email address will not be published. Required fields are marked *