HTML dan Css
CSS atau Cascading Style Sheets
A.pengertian CSS:
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian
instruksi yang menentukan bagiamana suatu text akan tertampil di halaman
web. Perancangan desain text dapat dilakukan dengan mendefinisikan
fonts (huruf) , colors (warna), margins (ukuran), latar belakang
(background), ukuran font (font sizes) dan lain-lain. Elemen-elemen
seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing
(jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti
meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS
terdiri dari style sheet yang memberitahukan browser bagaimana suatu
dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat
ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda
tidak perlu menulis font, color atau size pada setiap paragraf, atau
pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat
menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya
bila diperlukan.
1.CSS digunakan untuk memberikan berbagai macam style pada elemen HTML.
2. CSS bisa dideklarasikan dengan tiga cara :*Inline : Di deklarasikan ke dalam attribut elemen HTML.
*Internal : Di deklarasikan menggunakan elemen <style> di dalam elemen <head>.
*External : Di deklarasikan pada sebuah file terpisah.
Contoh CSS di HTML:
<p style="color:#FF33FF; text-decoration:underline; font-size:13px;">Pada paragraf ini terdapat inline CSS.</p><p style="font-size:16px; font-family:cursive">Pada paragraf menggunakan font family 'cursive'.</p><p style="font-size:19px; font-family:monospace">Pada paragraf menggunakan font family 'monospace'.</p><p style="font-size:19px; color:#FF3333; font-family:sans-serif">Pada paragraf menggunakan font family 'sans-serif'.</p>
Pada paragraf ini terdapat inline CSS.
Pada paragraf menggunakan font family 'cursive'.
Pada paragraf menggunakan font family 'monospace'.
Pada paragraf menggunakan font family 'sans-serif'.
<html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
TAMPILAN DI BWORSER:
Style heading ini dibuat dengan internal CSS.
Style paragraf ini dibuat dengan internal CSS.
catatan :
bila anda sudah menguasai dasar dari CSS, maka sebaiknya hindarilah
penggunaan elemen <strike>, <font> maupun <center>.
Pada paragraf ini terdapat inline CSS.
Pada paragraf menggunakan font family 'cursive'.
Pada paragraf menggunakan font family 'monospace'.
Pada paragraf menggunakan font family 'sans-serif'.
<html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
TAMPILAN DI BWORSER:
Style heading ini dibuat dengan internal CSS.
Style paragraf ini dibuat dengan internal CSS.catatan :
bila anda sudah menguasai dasar dari CSS, maka sebaiknya hindarilah penggunaan elemen <strike>, <font> maupun <center>.