Karena Anda baru mengenal html, berikut adalah tiga contoh siap pakai tentang cara menggunakan CSS bersama-sama dengan html. Anda cukup memasukkannya ke dalam file, menyimpannya dan membukanya dengan browser pilihan Anda:
Yang ini langsung menyematkan gaya CSS Anda ke tag / elemen Anda. Secara umum ini bukan pendekatan yang sangat bagus, karena Anda harus selalu memisahkan konten / html dari desain.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
</head>
<body>
<p style="font-weight:bold;">Hi, I'm very bold!</p>
</body>
</html>
Yang berikutnya adalah pendekatan yang lebih umum dan bekerja pada semua tag "p" (singkatan dari paragraf) dalam dokumen Anda dan selanjutnya membuatnya menjadi BESAR. Btw. Google menggunakan pendekatan ini pada pencariannya:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<style type="text/css">
p {
font-weight:bold;
font-size:26px;
}
</style>
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Anda mungkin perlu beberapa hari untuk bermain-main dengan contoh-contoh pertama, namun di sini adalah yang terakhir. Dalam hal ini Anda akhirnya sepenuhnya memisahkan desain (css) dan konten (html) dari satu sama lain dalam dua file berbeda. stackoverflow mengambil pendekatan ini.
Dalam satu file Anda meletakkan semua CSS (sebut saja 'hello_world.css'):
p {
font-weight:bold;
font-size:26px;
}
Di file lain Anda harus meletakkan html (sebut saja 'hello_world.html'):
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" />
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Semoga ini bisa membantu sedikit. Untuk mengatasi elemen tertentu dalam dokumen Anda dan tidak semua tag, Anda harus membuat diri Anda terbiasa dengan class, iddan nameatribut. Selamat bersenang-senang!