CSS digunakan untuk membuat tampilan sebuah web menjadi lebih menarik, dengan menggunakan CSS kita dapat mengatur ukuran teks, mengatur gambar, mengatur warna dan masih banyak lagi. Ada 3 cara yang bisa Anda gunakan untuk mengimplementasikan CSS pada halaman web Anda. Yaitu Inline CSS, Embedded CSS dan External CSS.
Menggunakan CSS Dengan Inline CSS
Menggunakan CSS dengan cara ini adalah dengan menambahkan langsung CSS nya pada baris kode HTML. Sebenarnya cara pertama ini sudah saya sampaikan pada artikel Pengenalan Dasar CSS, Akan tetapi akan saya berikan contoh kembali agar lebih paham.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan CSS Dengan Inline CSS</title>
</head>
<body>
<p style="color:green">Membuat tulisan warna hijau</p>
<p style="text-align:center;">Membuat tulisan rata tengah</p>
</body>
</html>
Cara penulisan dengan Inline CSS harus di awali dengan menuliskan kata style lalu di ikuti dengan syntax property:value.
Menggunakan CSS Dengan Embedded CSS
Cara menggunakan CSS dengan embedded css dapat Anda lakukan dengan menyisipkan kode CSS di dalam tag <style>...</style>. Anda harus meletakkan tag tersebut di antara tag <head>...</head>, Berikut ini adalah contohnya.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar CSS Dari Clocarius</p>
<p>Mengatur paragraf dengan menggunakan CSS Embedded CSS yang diletakkan di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara tag paragraf akan memiliki format yang sama</p>
</body>
</html>
Menggunakan CSS Dengan External CSS
Cara yang ketiga ini Anda harus menuliskan CSS secara terpisah dari dokemn HTML nya. Anda harus membuat file CSS nya terlebih dahulu. Keuntungan menggunakan cara ini adalah dengan satu file CSS saja Anda dapat menggunakannya untuk semua halaman web Anda. Akan tetapi ada 2 tahap yang harus Anda lakukan terlebih dahulu untuk menggunakan external css ini.
Pertama Anda perlu membuat file css nya terlebih dahulu dengan menggunakan code editor apa saja, bisa menggunakan notepad, disini saya menggunakan sublime text 3. Anda dapat membuat file nya dengan nama Style.css setelah itu Anda buat kode css nya di dalam file tersebut. contohnya seperti dibawah ini.
p{
font-family: arial;
font-size: small;
}
h1{
color: blue;
}
Setelah menuliskan kode nya lalu Anda simpan, bisa di dalam folder yang sama pada halaman HTML Anda atau bisa juga di folder yang berbeda.
Langkah kedua adalah Anda harus memanggil file css yang sudah Anda buat yaitu dengan cara menyisipkan kode seperti dibawah ini yang diletakkan di dalam tag <head>...</head>. Contohnya seperti ini.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan CSS Dengan External CSS File</title>
<link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
<h1>Belajar External CSS</h1>
<p>Belajar External CSS dari Clocarius, mudah sekali belajar External File CSS</p>
</body>
</html>
Itulah 3 cara yang bisa Anda gunakan untuk mengimplementasikan CSS pada halaman web Anda, silahkan di coba langsung pada code editor Anda masing-masing agar Anda bisa lebih memahami perbedaan cara dari ketiganya.
Baca juga : Pengenalan Dasar CSS
EmoticonEmoticon