Menggunakan CSS Untuk Tampilan Website


CSS atau Cascading Style Sheet adalah sebuah bahasa pemrograman dalam pembuatan sebuah website yang tujuan utamanya adalah untuk mengendalikan tampilan elemen-elemen dalam sebuah halaman website yang ditulis dalam kode HTML.

Kode CSS itu sendiri bisa ditulis dalam file terpisah, jadi satu dalam file HTML atau ditulis di dalam tag. Bila ditulis dalam file terpisah, maka file disimpan dalam sebuah file dengan ekstensi .css sementara nama file boleh bebas, umumnya nama file adalah style.css.

Penulisan kode CSS dalam file terpisah digunakan bila kode tersebut akan digunakan secara luas pada satu atau beberapa halaman, misalnya bila kita ingin font yang digunakan dalam semua halaman website kita menggunakan jenis font yang sama. Sementara penulisan dalam HTML sering kali digunakan bila kode CSS itu hanya dibutuhkan oleh satu halaman website saja. Untuk kode CSS yang hanya digunakan satu kali atau hanya untuk digunakan oleh satu elemen saja pada satu halaman website, kodenya bisa ditulis di dalam kode tag element yang ingin di ubah stylenya.

Menghubungkan file CSS dengan HTML

Untuk bisa menggunakan kode CSS yang ditulis dalam file terpisah tentunya kita harus menghubungkan file CSS dengan HTML supaya kode CSS dalam file tersebut bisa dibaca oleh browser. Untuk menghubungkan file CSS dengan HTML tuliskan kode berikut di dalam tag <head> boleh di bawah atau di atas judul ( <title></title> ).

<link rel=”stylesheet” href=”style.css”>

atau

<link rel=”stylesheet” href=”http://www.alamatwebsite.com/style.css”>

Penulisan kedua lebih efektif bila kita memiliki sub-directory atau menggunakan sub-domain.

Menggunakan kode di atas berarti kita membuat link atau hubungan antara file HTML tempat kode tersebut tertulis dengan file berupa stylesheet yang terletak di dalam directory http://www.alamatwebsite.com/ dengan nama file style.css.

Untuk menggunakan kode CSS di dalam file HTML kita tidak perlu menggunakan link tetapi cukup menggunakan tag style di dalam bagian body file html kita, misalnya mengganti font seluruh teks di dalam tag <p> dalam sebuah halaman :

<body>
<style>
p {
    font-family: monospace;
}
</style>

<p>Isi paragraf yang diubah fontnya.</p>
<p>Teks dalam paragraf ini juga akan berubah fontnya.</p>

</body>

Sementara penulisan di dalam tag, misalnya untuk mengubah font dari teks di dalam salah satu tag <p> (paragraf) adalah :

<p style=”font-family: monospace;”>Teks yang akan diubah fontnya.</p>
<p>Teks ini tidak berubah fontnya.</p>

bile kode CSS ditulis dalam sebuah file eksternal, maka kode di atas dalam file style.css hanya perlu di tulis :

p {
    font-family: monospace;
}

dan akan mempengaruhi seluruh teks atau elemen di dalam tag <p> di semua halaman website yang terhubung pada file .css.

Untuk beberapa kode CSS yang bisa kita gunakan bisa dibaca DI SINI

Untuk menggunakan kode CSS pada elemen berbeda kita perlu memisahkan dua elemen tersebut dengan <div> dan diberi identitas ( ID )atau dengan tag lain yang mendukung stylesheet, dan menggunakan tanda ‘#’ dalam kode CSS sebagai peng-identifikasi elemen yang akan diubah style-nya. Penggunaan div tag ini sangat berguna untuk membuat layout template menggunakan CSS.

Contoh (style di tulis dalam HTML) :

kode HTML dan CSS dalam satu file .html

<body>

<div id=’elemensatu’>
Elemen pertama yang akan diubah stylenya.
</div>

<div id=’elemendua’>
Elemen kedua yang akan diubah stylenya.
</div>

<style>
#elemensatu {
    font-family: sans, sans-serif;
    color: red;
}
#elemendua {
    font-family: monospace;
    color: blue;
}
</style>

</body>

bila kode CSS ditulis di dalam HTML, tag style bisa ditulis di mana saja baik itu di dalam tag head maupun body

Setelah mengerti penggunaan HTML dan CSS dalam sebuah website, berikutnya kita akan membuat sebuah layout website sederhana yang terdiri dari header, konten, dan footer menggunakan penerapan HTML dan CSS yang sudah dibahas.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Jan 28, 2016
Tags : , ,


www.000webhost.com