Dasar CSS ~ Info sharing tekno

Pada artikel ini saya akan membagikan tips dasar belajar CSS, walaupun sudah banyak yang tau mungkin tidak sedikit diantara kita yang ingin belajar CSS namun tidak tau mulainya dari mana.
walaupun saya juga masih belajaran tidak ada salahnya kan berbagi ilmu :)

Langsung saja
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Selector : adalah tag HTML yang akan dibuat stylenya
Declaration : terdiri 2 unsur yaitu property dan value dimulai dengan { dan diakhiri dengan }
Penggunaan nilai property diakhiri dengan tanda : sedangkan value diakhiri dengan tanda ;

Contoh CSS

Sebuah deklarasi CSS diakhiri dengan semicolon ( ; ) sedangan sekelompok deklarasi diapit oleh kurung kurawal ( {} )

Contoh penggunaan CSS dalam mengatur Style tag h2 :

h2 {color:blue; font-size:12px; text-align:center;}

Dalam contoh diatas akan dihasilkan teks yang menggunakan h2 akan berwarna biru, memiliki ukuran huruf sebesar 12 px dan membuat tesk berada ditengah.

Komentar CSS

Komentar dalam CSS digunakan untuk mempermudah saat pengeditan ulang barisan script yang sudah dibuat sebelumnya.

Sebuah komentar CSS diawali dengan /* dan diakhiri dengan */

/* Ini adalah komentar */h2 {color:blue; font-size:12px; text-align:center;}

ID SELECTOR CSS
Semua elemen HTML yang dideklarasikan dengan ID Style yang sama akan menghasilkan style yang sama dengan deklarasi yang sudah dibuat. ID selector didefinisikan dengan tanda "#".

#ist {color:red; text-align:left}

Dan untuk pemanggilan ID yang sudah dibuat silahan lihat contoh code dibawah :

<!DOCTYPE html>
<head>
<title>Info Sharing Tekno</title>
<style>
#ist {color:red; text-align:center}
body { background-color:black; }
</style>
<body>
<h2 id="ist">Info Sharing Tekno</h2>
</body>
<html>

CLASS SELECTOR CSS

Perbedaan utama dengan id selector adalah bila id selector digunakan untuk mendefinisikan satu elemen HTML sedangkan class selector umumnya digunakan untuk mendefinisikan style satu kelompok dari banya elemen. Class selector didefinisikan dengan tanda titik ".".

.ist {color:blue; text-align: center;}

Dan untuk pemanggilan CLASS yang sudah dibuat silahan lihat contoh code dibawah ini:

<!DOCTYPE html>
<head>
<title>Info Sharing Tekno</title>
<style>
#ist {color:red; text-align:center}
body { background-color:black; }
</style>
<body>
<h2 class="ist">Info Sharing Tekno</h2>
</body>
<html>

Penulisan CSS

Penulisan CSS ada 3 macam yaitu :

Inline Style Sheet

Internal Style Sheet

External Style Sheel

1. Inline Style Sheet



Untuk penulisan jenis ini terbilang rumit dan tidak banyak 
menguntungkan, penggunaan CSS type ini adalah dengan memasukan Style 
Sheet pada setiap atribut element HTML secara langsung, contoh :

<h2 style="color:red; text-align:center;" > Info Sharing Tekno </h2>

2. Internal Style Sheet

CSS type ini lebih baik digunakan jika hanya membuat 1 dokumen saja, penggunaan type ini dideklarasikan diantara <head> dengan </head>. Internal Style Sheet akan mempengaruhi semua elemen dibawahnya sesuai dengan isi dari deklarasi style-nya.

<head> <style type="text/css"> /* ini adalah deklarasi internal CSS */ h2{ color:red; text-align:right; } </style> </head>

3. External Style Sheet

CSS type ini digunakan dalam dokumen yang lebih dari satu, susunan deklarasi ditaruh pada file yang berbeda dengan ekstensi .css dan dipanggil dengan :