Bagaimana cara CSS bekerja?
Dalam pelajaran ini anda akan belajar bagaimana membuat style sheet pertama Anda. Anda akan mengenal tentang model CSS dasar dan kode yang diperlukan untuk menggunakan CSS dalam dokumen HTML.
Banyak sifat yang digunakan dalam Cascading Style Sheets (CSS) yang mirip dengan HTML. Jadi, jika Anda terbiasa menggunakan HTML untuk tata letak, Anda kemungkinan besar akan banyak mengenali kode. Mari kita lihat contoh konkret.
Sintaks dasar CSS
Katakanlah kita ingin warna merah yang bagus sebagai latar belakang halaman Web:
Menggunakan HTML kita bisa melakukannya seperti ini:
<body bgcolor="#FF0000">
Dengan CSS hasil yang sama dapat dicapai seperti ini:
body {background-color: #FF0000;}
Seperti yang akan Anda perhatikan, kode ini kurang lebih sama untuk HTML dan CSS. Contoh di atas juga menunjukkan model CSS mendasar.
Tapi mana Anda meletakkan kode CSS? Ini adalah apa yang kita akan pergi ke sekarang.
Menerapkan CSS untuk suatu dokumen HTML
Ada tiga cara yang dapat diterapkan CSS untuk suatu dokumen HTML. Metode ini semua dijelaskan di bawah ini. Kami sarankan Anda fokus pada Metode ketiga yaitu eksternal.
Metode 1: In-line (gaya atribut)
Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan gaya atribut HTML. Bangunan pada contoh di atas dengan warna latar belakang merah, dapat diterapkan seperti ini: <html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Metode 2: Internal (gaya tag)
Cara lain adalah dengan memasukkan kode CSS menggunakan <style> tag HTML. Sebagai contoh seperti ini: <html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Metode 3: Eksternal (link ke style sheet)
Metode yang disarankan adalah link ke style sheet disebut eksternal. Sepanjang tutorial ini kita akan menggunakan metode ini dalam semua contoh kami.
Sebuah style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Seperti file lain, Anda dapat menempatkan style sheet pada server Web Anda atau hard disk.
Sebagai contoh, katakanlah style sheet Anda bernama style.css dan terletak dalam folder bernama gaya.
Caranya adalah dengan membuat link dari dokumen HTML (default.htm) ke style sheet (style.css). link tersebut dapat dibuat dengan satu baris kode HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Perhatikan bagaimana jalan untuk style sheet kita diindikasikan menggunakan atribut href.
Baris kode harus dimasukkan di bagian header dari kode HTML yaitu antara <head> dan tag </ head>. Seperti ini:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Link ini memberitahu browser bahwa itu harus menggunakan tata letak dari file CSS ketika menampilkan file HTML.
Hal yang benar-benar cerdas adalah bahwa beberapa dokumen HTML dapat dihubungkan dengan style sheet yang sama. Dengan kata lain, satu file CSS dapat digunakan untuk mengontrol tata letak dokumen HTML banyak.
Teknik ini dapat menghemat banyak pekerjaan. Jika Anda, misalnya, ingin mengubah warna latar belakang dari sebuah website dengan 100 halaman, sebuah style sheet dapat menyelamatkan Anda dari keharusan untuk mengubah secara manual semua 100 dokumen HTML. Menggunakan CSS, perubahan dapat dibuat dalam beberapa detik hanya dengan mengubah satu kode pada style sheet pusat.
Mari kita menaruh apa yang baru saja kita pelajari ke dalam praktek.
Coba sendiri
Buka Notepad (atau editor teks apapun yang Anda gunakan) dan menciptakan dua file - file HTML dan file CSS - dengan isi sebagai berikut:default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Sekarang tempat dua file dalam folder yang sama. Ingatlah untuk menyimpan file dengan ekstensi yang tepat (masing-masing "htm." Dan ". Css")
default.htm Buka dengan browser Anda dan lihat bagaimana halaman tersebut memiliki latar belakang merah. Selamat! Anda telah membuat style sheet pertama Anda!
Cepat ke pelajaran berikutnya di mana kita akan melihat beberapa properti di CSS.
Tidak ada komentar:
Posting Komentar