Sebuah dokumen HTML tanpa CSS itu menurut saya ibaratnya sebuah masakan tanpa bumbu, tidak ada variasi rasa yang bisa kita nikmati.
Karena memang betul, apa-apa yang ditampilkan dari elemen HTML adalah konten dasar dari dokumen HTML tersebut. Tidak ada style, layout, pengaturan font, dan sebagainya.
Sekarang anda bisa lihat, misalnya pada dokumen HTML berikut :
<!DOCTYPE html>
< html >
<head>
</head>
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</p>
</body>
</html>
Jalankan script tersebut, maka hasilnya akan seperti ini :
Hello World!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Sekarang coba anda tambahkan script berikut ini ke dalam tag <head> :
<head>
<style>
h1 {
color: lightblue;
text-align: center;
}
</style>
</head>
Anda bisa melihat perubahan pada elemen <h1> seperti ini :
Hello World!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Warna pada elemen <h1> berubah menjadi lightblue dan perataannya menjadi center atau rata tengah.
Inilah yang saya maksud, dengan CSS kita bisa mengatur bagaimana sebuah elemen HTML akan di tampilkan. Jadi antara HTML dengan CSS menjadi semacam satu paket, saat anda mempelajari HTML maka anda pun harus mempelajari CSS.
Lalu apa itu CSS ?
Begini menurut w3schools.com :
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS save a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS file
Saya yakin, dengan melihat contoh diatas anda sudah dapat membayangkan apa itu CSS.
Sebagai penutup pada perkenalan kita dengan CSS ini, berikut saya tulisakan kembali contoh script yang saya ambil dari w3schools.com :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
| Prev. Chapter | Next Chapter |
|---|---|
| Lebih Jauh Tentang CSS |
Tidak ada komentar:
Posting Komentar