Belajar CSS Dasar

CSS3 - Belajar CSS Dasar

CSS adalah singkatan dari Cascading Style Sheets yang merupakan sebuah tata cara dalam mengatur komponen yang ada pada sebuah web sehingga menjadi berbentuk dan berpenampilan baik klasik atau modern. Css adalah sebuah bahasa yang tidak digolongkan sebagai bahasa pemrograman akan tetapi hanya sebatas gaya atau style untuk html, css tidak bisa berdiri sendiri tanpa html/xhtml.

CSS hampir sama fungsinya dengan aplikasi pengolahan kata tingkat tinggi seperti Microsoft Word, LibreOffice Writer, OpenOffice Writer, Kingsoft Office Writer dan Corel WordPerfect yaitu dalam hal membuat style atau gaya sebuah dokumen baik heading, title, text, body text, bab, sub bab, header/footer, gambar dan lain-lain. Satu file css bisa digunakan untuk beberapa atau setiap file html.

Sejarah CSS

CSS merupakan sebuah teknologi baru yang disarankan oleh W3C (World Wide Web Consortium) pada tahun 1996, pada saat css distandarisasikan, Netscape Navigator (Sekarang Mozilla Firefox) dan Internet Explorer membuat browser baru untuk disesuaikan dengan mendukung standar css sehingga bisa berjalan bersamaan dengan html pada suatu browser. ada 3 versi css yaitu CSS1 dikembangkan untuk penekanan hanya pada format dokumen html (seperti word/writer) saja. CSS2 dikembangkan untuk berbagai format seperti menentukan posisi konten, format huruf font, tampilan layout, table, form dan media dan sangat dikhususkan untuk bisa dicetak dengan printer, sedangkan CSS3 adalah pengebangan dari CSS2 yang lebih ditekankan kepada desain website modern seperti mendukung animasi, transisi, 3d serta dengan cross platform yaitu bisa berjalan pada desktop, mobile dan table hanya dengan satu file, fitur baru pada CSS3 adalah media query, box-shadow, css math, border-image, css object model dan lain-lain.

Penulisan CSS

CSS bisa ditulis dengan 3 cara atau 3 tempat yaitu pada internal, inline dan eksternal yang akan kita bahas dibawah ini, sekarang kita akan membahas format penulisan css seperti dibawah ini.

p { color : royalblue ; }

Penjelasan: p adalah tag selector atau panggilan dari tag p pada dokumen html, {} adalah selector untuk tag, color adalah property untuk tag p, sedangkan royalblue adalah value (nilai) untuk property color. : adalah sama dengan atau nilai hasilnya sedangkan ; adalah tutup hasil value atau pemisah antara satu property dengan property lainnya.

Tag Selector tidak mesti harus menggunakan nama tag saja akan tetapi bisa juga dengan memanggil nilai atribut class dan id, untuk class biasanya awalannya adalah titik (.) sedangkan id adalah awalannya tanda pagar (#) sebagai contoh:

Class: .paragraf{color:royalblue;}
ID: #paragraf{color:royalblue;}

Inline Style Sheet

Inline style sheet adalah gaya penulisan css dalam tag html atau bisa dibilang menggunakan atribut style=”color:royalblue;” atau lebih jelas lihat contoh dibawah ini.

<p style="color:royalblue;">Ini adalah teks untuk paragraf</p>

Internal Style Sheet

Internal style sheet adalah gaya penulisan css di antara tag head (<head>… disini …</head>) dengan adanya tag <style> … disini sintaks css … </style> untuk lebih jelas silahkan lihat contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<style type="text/css">
body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}
</style>
</head>
<body>
<h1 id="title" class="title">Judul Web</h1>
<p class="paragraf" id="paragraf">Ini adalah artikel</p>
</body>
</html>

Eksternal Style Sheet

Eksternal style sheet adalah gaya penulisan css yang terpisah antara file css dengan file html yang hanya dihubungkan dengan tag <link href=”style.css” rel=”stylesheet”/> pada tag <head>, dengan cara ini bisa dengan hanya 1 file css bisa buat banyak file html sebagai contoh

File style.css

body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}

File index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1 id="title">Judul Web</h1>
<p class="paragraf">Ini adalah artikel</p>
</body>
</html>

Sekian tutorial kali ini semoga bermanfaat dan bisa menjadi ilmu baru bagi pelajar baru pemrograman web, terima kasih banyak karena telah mengunjungi blog saya ini.