Mengenal CSS

Hallo, pada artikel kali ini saya ingin memperkenalkan CSS. Sebuah teknologi yang sangat penting di dunia persilatan, eh dunia web.

CSS (Cascading Style Sheets) adalah bukan bahasa pemograman, melainkan aturan untuk mengatur komponen-komponen halaman web. Kalau di microsoft word ada menu home, yang di dalamnya terdapat Font untuk mengatur jenis huruf, ukuran huruf, warna huruf, bold, italic, underline. Kemudian ada Styles untuk mengatur stile dari tulisan. Nah CSS pada web bisa di ibaratkan menu Font atau Styles pada microsoft Word. Bedanya, kalau menu Font atau Styles di microsoft word itu tinggal di klik, kalau CSS harus di ketik.

CSS digunakan untuk mengendalikan warna tag html, warna tulisan, ukuran gambar, ukuran tulisan, posisi tag, tebal border tabel, dan lain sebagainya. Bisa di bilang CSS adalah teknologi yang mempercantik halaman web.

Untuk penulisan kode CSS, bisa dengan Inline Style Sheet, bisa juga dengan Embedded Style Sheet. Untuk penulisan dengan Inline Style Sheet berarti kode CSS di tulis dalam tag html sebagai atribut, sedangkan untuk Embedded Style Sheet kode CSS di tulis dalam tag style yang di simpan di dalam tag head atau di simpan dalam file yang terpisah kemudian nanti di panggil oleh head html.

Contoh penulisan kode css:

h1{
color: red;
}

artinya, semua tulisan yang ada didalam tag h1 akan berwarna merah.

Contoh 1, penulisan kode CSS dengan Inline Style Sheet:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body <span class="webkit-html-attribute-name">bgcolor</span>="<span class="webkit-html-attribute-value">#dfdfdf</span>">

<h1 <span class="webkit-html-attribute-name">style</span>="<span class="webkit-html-attribute-value">background:#444;color:#fff;padding:5px;</span>">Ini adalah judul</h1>
<p <span class="webkit-html-attribute-name">style</span>="<span class="webkit-html-attribute-value">border:1px solid #111;padding:5px;</span>">Ini adalah isi dari sebuah paragraf.</p>

</body>
</html></blockquote>
Contoh 2, penulisan kode CSS dengan Embedded Style Sheet:
<blockquote><!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
body{ background:#dfdfdf  }
#judul{ background:#444; color:#fff; padding:5px; }
#paragraf{ <span class="webkit-html-attribute-name">style</span>="<span class="webkit-html-attribute-value">border:1px solid #111;padding:5px;</span>" }
</style>
</head>
<body>

<h1 id="judul">Ini adalah judul</h1>
<p id="paragraf">Ini adalah isi dari sebuah paragraf.</p>

</body>
</html>

Contoh 1 dan Contoh 2 akan menghasilkan tampilan web sebagai berikut:

Untuk mengetahui bagaimana cara melihat hasil contoh 1 dan contoh 2, silahkan buka halaman Mengenal HTML.

Share this via , , Google+ and LinkedIn.

Leave a Reply

Your email address will not be published. Required fields are marked *