Langsung aja lah. CSS itu ada 3 macemnya. Apa aja? Mudah-mudahan bener, nih :
- Internal Script,
- External Script, dan
- Inline Script.
1. Internal Script
Internal script ini terdapat didalam coding halaman web-nya langsung (namanya juga internal, pasti didalam dong. bener ga?). Script ini terdapat di bagian tag <head>
<html>
<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {
color : red;
font-family : "arial";
}
</style>
</head>
<body>
<h1>Ini contoh Internal Script</h1>
</body>
</html>
<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {
color : red;
font-family : "arial";
}
</style>
</head>
<body>
<h1>Ini contoh Internal Script</h1>
</body>
</html>
Cukup jelas kan?
2. External Script
Nah kalau yang ini scriptnya terpisah dengan halaman web-nya. Yang dibutuhkan hanya perintah untuk memanggil si script CSS ini. Intinya sih, script ini terpisah lah. Kata lainnya, script terdapat diluar (inget : External). Sebagai tambahan, script ini yang paling diminati oleh kebanyakan para web designer. Mengapa? Kalau menurut saya sih, script ini memang ok. Jadi bener-bener pure. Untuk CSS, ya script CSS aja. Untuk halaman web, ya bener-bener murni script halaman web aja. Ga campur aduk lah. Selain itu, script ini juga terkesan lebih rapih. Bukankah web yang rapih, terdapat pada script yang rapih juga? (opini saya loh).
Pertama, anda buat dulu file dengan nama file (style.css)
h1 {
color : red;
font-family : "arial";
}
color : red;
font-family : "arial";
}
p {
color : green;
font-family : "arial";
}
color : green;
font-family : "arial";
}
Nah? Terus gimana cara mengintegrasikan file style.css itu ke halaman web yang kita buat? Nih perintahnya:
<link rel="stylesheet" type="text/css" href="style.css" />
Script itu ditambahkan pada bagian header dari script halaman web. Contoh lengkapnya :
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ini contoh Internal Script</h1>
<p>Nah ini bagian paragrafnya</p>
</body>
</html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ini contoh Internal Script</h1>
<p>Nah ini bagian paragrafnya</p>
</body>
</html>
Oh iya, dengan external script ini juga kita dapat menggunakan style CSS yang berasal dari situs web yang lain. Caranya, masukan saja URL pada attribut href-nya. Contoh :
<link rel="stylesheet" type="text/css" href="http://.../style.css" />
Cukup jelas kan external script-nya?
3. Inline Script
Script ini jarang digunakan oleh kebanyakan web designer, karena terkesan rumit dan acak-acakan. Script ini terdapat pada <body>. Langsung aja lah ke contohnya :
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color: red; font-align: justify;">Ini contoh Inline Script</p>
</body>
</html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color: red; font-align: justify;">Ini contoh Inline Script</p>
</body>
</html>
Ribet kan? Mungkin sekian dulu pengenalan tentang CSS. Kalau ada waktu, saya lanjutkan dengan tutorialnya. Thanks. Share the one world now !
nais inpo!!!
BalasHapusnuhun kang
BalasHapus