Mengenal CSS
Apa itu CSS ? CSS (Cascading Style Sheet) adalah dokumen yang digunakan untuk mendukung kode HTML didalam mendesain website. CSS sendiri bukan bahasa pemrograman seperti Delphi, Javascript, atau C+ tetapi CSS sebuah desain yang berbasiskan scriptting yang nantinya bisa disisipkan pada kode HTML.
Prinsip kerja dari CSS adalah mengkelompokkan perintah yang terjadi secara berulang-ulang, CSS membuat blok perintah dengan kategori-kategori sesuai dengan kebutuhan dengan cara ini tentu proses mendesain website bisa menjadi lebih cepat. Dengan adanya kategori-kategori yang dibuat kita tidak perlu mengulang-ulang kode yang sama, karena sebelumnya sudah dikategorikan berdasarkan kelompok masing-masing.
Cara Penulisan CSS
Penulisan CSS diawali dengan tanda “{” dan diakhiri dengan tanda “}” dan setiap deklarasi di dalam suatu sub kategori harus diakhiri dengan tanda “;”. Setiap blok kategori tersebut diawali dengan tanda ‘#’ atau “.” (titik) kecuali kode-kode yang telah umum dalam HTML seperi “p”, “table”, “h1…h6″, “a”, dan lain-lain.
Penulisan kode CSS ada dua cara, yang pertama disisipkan langsung di dalam kode HTML dan yang kedua adalah dengan menulis kode CSS tersebut pada file yang terpisah yang nantinya file CSS tersebut dipanggil dalam HTML. Penulisan kode CSS pada file yang berbeda ini cara menyisipkan (memanggil) file CSS tersebut adalah seperti dua cara di bawah ini :
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”style.css” type=”text/css” />
Style.css adalah nama file CSS yang nantinya harus diupload bersama-sama dengan file index. Penulisan CSS pada file yang terpisah akan lebih sederhana dan lebih memudahkan pembuatan suatu website. Pada saat membuat kode-kode CSS. Setiap blok kategori CSS sebaiknya diberi nama yang sesuai dengan desain website untuk memudahkan pengeditan nantinya, contoh :
Blok kategori header diberi nama #header {……} atau .header {……}
Blok kategori logo diberi nama #logo {……} atau .logo {……}
Blok kategori artikel diberi nama #artikel{……} atau .artikel {……}
Blok kategori footer diberi nama #footer {……} atau .footer {……}
Blok kategori sidebar diberinama #sidebar {…….} atau .sidebar {……}
Dan seterusnya (terserah anda)
Tanda {…….} maksudnya ada beberapa kode di dalam tanda kurung tersebut yang disesuaikan dengan kebutuhan.
Penulisan kode CSS yang diawali dengan tanda pagar (#) nantinya akan disisipkan dalam kode HTML seperti di bawah:
<div id=”header”> ……..</div>,
<div id=”footer”>……</div>,
<div id=”sidebar”>……</div>, dan seterusnya,
Sedangakan kode CSS yang diawali dengan tanda titik(.) akan disisipkan seperti ini :
<div>……</div>,
<div>……</div>,
<div>……</div>, dan seterusnya.
Contoh Penulisan CSS yang disisipkan langsung dalam kode HTML:
Setiap paragraph akan menggunakan huruf arial, warna merah ukuran huruf 12px, align left
Setiap heading h1 akan menggunakan huruf bold, arial, warna biru, ukuran huruf 36px
Penulisan kodenya sebagai berikut :
<html>
<head>
<title>BELAJAR CSS DASAR</title>
<style>
h1 {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
color: #0000ff;
font-weight: bold;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;
}
</style>
</head>
<body>
<h1>Judul 1</h1>
<p>pargraph ke satu</p>
<p>paragraph kedua</p>
<p>pargraph ketiga</p>
<h1>Judul 2 </h1>
<p>pargraph A </p>
<p>paragraph B </p>
<p>pargraph C </p>
<p> </p>
</body>
</html>
Demikian sedikit ulasan mengenai mengenal dasar CSS, selamat mencoba. Dan semoga bermanfaat.
