Belajar CSS Internal

Hai semua, udah lama gak nulis di blog, dikarenakan banyaknya tugas sekolah dan urusan organisasi yang tiada henti-hentinya.
Alhamdulillah, aku dapat ilmu baru yang bermanfaat dari guru yang bisa di share disini, salah satunya adalah CSS atau Cascading Style Sheet, biasanya digunakan untuk memperindah tampilan website.
Nah kan kalau kita membuat kode HTMLhttp://raditiamadya.com/wp-includes/js/tinymce/plugins/wordpress/img/trans.giftanpa CSS agak banyak kodenya, semisal kita ingin membuat tulisan "SELAMAT DATANG" dengan font Arial berwarna merah dengan size 12, agak susah juga kalau kita menuliskannya begini :
<font face="Arial size=12 color="red">SELAMAT DATANG</font>
Agak panjang kan? nah kalau kita gunakan CSS lebih mudah dan kode HTMLnya tidak terlalu banyak.
CSS itu ada 3 :
§  CSS Internal
§  CSS Eksternal
§  CSS Inline
Nah kali ini aku mau share tentang CSS Internal atau kode CSSnya jadi satu dengan kode HTMLnya.
Oke jadi gini
biasanya kode HTML diawali dengan <html> dan diakhiri dengan </html>, untuk CSS diawali dengan tanda <!- - dan diakhiri dengan tanda - ->
Untuk CSS internal, kodenya diletakkan di bagian <head> , sebelum tanda <!- - diawali dengan <style type="text/css"> baru mulai kode CSSnya, dan nanti ditutup dengan </style>
dalam HTML biasanya menggunakan kurung "<" dalam CSS menggunakan kurung "{"
coba kita lihat contoh kode CSS
p1{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
text-decoration: underline;
text-align: center;
color: red;
}
untuk kode p1 itu jika dalam kode membuat kode HTML kita mengetikkan kode <p1> maka HTML akan memanggil fungsi kode diatas. Kode HTML ditulis di dalam <body> Contoh
<p1>Selamat Datang</p1> maka hasil tulisan "Selamat Datang" tersebut akan menampilkan apa yang kita ketikkan di CSS. Maka nanti tulisan Selamat Datang tersebut akan berjenis font Arial, Helvetica, sans-serif dengan ukuran teks 12pt, tulisan bergaris bawah, rata tengah dan berwarna merah.
kode p1 di CSS bisa diganti dengan A, B, C atau terserah.
untuk contoh CSS internalnya :
<html>
<head>
<title>LATIHAN DENGAN CSS INTERNAL</title>
<style type="text/css">
<!--
h1{font-family: Verdana, Geneva, sans-serif;
font-size: 20pt;
font-style: italic;
text-align: center;
color: #F00;
}
p1{font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
text-decoration: underline;
text-align: center;
color: #00F;
}
-->
</style>
</head>
<body>
<h1>LATIHAN DENGAN CSS INTERNAL</h1>
<p1>Dalam versi dokumen ini, file HTML dan File CSS digabung dalam 1 file, berbeda dengan CSS Eksternal yang membutuhkan 2 file yang digabungkan agar dapat berfungsi.</p1>
</body>
</html>
Mungkin sekian dasar dari CSS internal, semoga dapat membantu :-)

Posting Komentar