Belajar CSS (Cascading Style Sheets) untuk tingkat Pemula
Untuk Teman-teman yang ingin belajar membuat web, mau gak mau pasti juga akan butuh mempelajari CSS , karena CSS (Cascading Style Sheets) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
Contoh Penulisan CSS pada file .css :
[css]h1 {
color: #0789de;
}[/css]
Contoh Penulisan CSS juga bisa menggunakan metode Inline Style Sheet, maksudnya CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. contoh penerapannya sebagai berikut :
[html]<html>
<head>
<title>Css – Inline Style Sheet </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpa diformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>[/html]
Contoh Penulisan CSS lainnya Menggunakan Embedded Style Sheet, maksudnya CSS didefinisikan terlebih dahulu dalam tag. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML. contoh penerapannya sebagai berikut :
[html]
<html>
<head>
<title>CSS – Embedded Style Sheet</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
[/html]
Apakah Anda Ingin mempelajari CSS lebih dalam, silahkan mengikuti Private Training yang diadakan PHPmu di https://phpmu.com/?p=173 atau anda ingin belajar Otodidak (online) silahkan untuk mengunjungi w3schools di alamat : http://www.w3schools.com/css/
Semoga Artikel ini bermanfaat,.. 🙂
Related Posts
About The Author
Robby Prihandaya
Robby is an Engineer, Entrepreneur, Thinker and Founder of phpmu.com programming blog. a very popular web development site, Lives in Padang - Indonesia