CSS (Cascading Style Sheet) merupakan sebuah pengembangan dokumen yang mendukung HTML di dalam mendesain suatu website. CSS bukan merupakan bahasa pemrograman seperi java script, delphi, dan C+ melainkan sebuah desain yang berbasiskan scriptting yang di-embed (disisipkan) pada kode HTML.
CSS digunakan untuk mengelompokkan blok perintah yang terjadi berulang-ulang dengan membuat blok kategori sesuai kebutuhan sehingga akan membantu mempercepat dan mempermudah desain website. Dengan menggunaknan CSS, kita tidak perlu mengulang-ulang kode yang sama karena sebelumnya telah dikategorikan berdasarkan kelompok masing-masing.
Penulisan CSS diawali dengan tanda "{" dan diakhiri dengan tanda "}" dan setiap deklarasi di dalam suatu sub categori 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 code 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" />
- 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)
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,
- <div class="header">......</div>,
- <div class="footer">......</div>,
- <div class="sidebar">......</div>, dan seterusnya.
- 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 16px
<html>
<head><title>BELAJAR CSS DASAR</title>
<style type="text/css">
.style1 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #0000ff;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;
}
</style>
</head>
<body>
<h1 class="style1">Judul 1</h1>
<p class="style2">pargraph ke satu</p>
<p class="style2">paragraph kedua</p>
<p class="style2">pargraph ketiga</p>
<h1 class="style1">Judul 2 </h1>
<p class="style2">pargraph A </p>
<p class="style2">paragraph B </p>
<p class="style2">pargraph C </p>
<p class="style2"> </p>
</body>
</html>
Tampilan setelah diposting :
Judul 1
pargraph ke satu
paragraph kedua
pargraph ketiga
Judul 2
pargraph A
paragraph B
pargraph C
Contoh lain :
<html>
<head><title>DASAR-DASAR CSS</title>
<style type="text/css">
.header {
font-size: 18px;
color: #FF0000;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.artikelatas {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #009900;
}
.artikelbawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0033FF;
font-style: italic;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00000;
font-weight:bold;
}
</style>
</head><body>
<p class="header">PENULISAN CSS</p>
<p class="artikelatas">Paragraph ini mengunakan font arial dengan warna hijau </p>
<p class="artikelatas">Ukuran font untuk pargraph ini 12 px</p>
<p class="artikelatas">Font Family pada paragraph ini adalah arial, </p>
<p class="artikelatas">Sedagkan judul heading1 (h1) menggunakan huruf tebal</p>
<p class="artikelatas">Dengan font arial warna merah dan ukuranya 18px. </p>
<p class="artikelbawah">Paragraph ini mengunakan font arial dengan warna biru </p>
<p class="artikelbawah">Ukuran font untuk pargraph ini 14 px italic (miring) </p>
<p class="artikelbawah">Font Family pada paragraph iniadalah arial, </p>
<div id="footer">
<p>Tulisan ini adalah terletak pada blok kategori Footer</p>
<p>dengan Font-Family arial ukuran 8px warna hitam </p>
</div>
</body>
</html>
Tampilan setelah diposting :
PENULISAN CSS
Paragraph ini mengunakan font arial dengan warna hijau
Ukuran font untuk pargraph ini 12 px
Font Family pada paragraph iniadalah arial,
Sedagkan judul heding1 (h1) menggunakan huruf tebal
Dengan font arial warna merah dan ukuranya 18px.
Paragraph ini mengunakan font arial dengan warna biru
Ukuran font untuk pargraph ini 14 px italic (miring)
Font Family pada paragraph ini adalah arial,
Istilah Blok kategori adalah istilah saya sendiri untuk memudahkan pengertian khususnya bagi pemula yang baru atau sedang belajar CSS.
Tambahan :
- #00000 : Kode warna hitam
- #ff0000 : Kode warna merah
- #0000ff : Kode warna biru
- #0033FF : Kode Warna Hijau
Semoga Bermanfaat.
