Saturday, 23 April 2016

Penjelasan singkat dan contoh CSS

Penjelasan singkat dan contoh CSS

Pengertian CSS

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, danstyle lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian body pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa Style Sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.


Aturan Penulisan CSS

Selector
Terdiri dari tag,class,ID

Declaration 
Mendeskripsikan property dan value
Contoh

H1 

Color : #0000FF 

Keterangan : 
Selector : H1
Properti : Color
Value : #0000FF

Macam-macam Selector

Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector

Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
style1.css

h1
{
color:red;
}
.isiteks
{
font-family:arial,halvetica;
font-size:24px;
color:#6699FF;
}


contoh script
<html> 
<head> 
<link href='style1.css' rel="stylesheet" type='text/css'> 
</head> 
<body> 
<p class='isiteks'>Contoh Class</p> 
</body> </html>


Contoh Class

ID 
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID berbeda. 
Misal.

style1.css
h1 

color:red; 

.isiteks 

font-family:arial,halvetica; 
font-size:24px; 
color:#6699FF; } 
.judul1 { font-family:arial,halvetica; 
font-size:12px; color:#6699FF; 
}


contoh script

<html> 
<head> 
<link href='style1.css' rel="stylesheet" type='text/css'> 
</head> <body> 
<p id='judul1'>Contoh ID</p> 
</body> </html>