Belajar CSS Profesional

Tak bosan-bosannya penulis menyempatkan waktu luang untuk mengisi blog ini dengan artikel penting guna menambah wawasan pembaca.

Tema yang akan saya bahas hari ini adalah "Mengulas Tuntas Penempatan CSS (style) pada HTML".
Disini telah saya siapkan beberapa css yang telah disatu padukan dan akan saya coba perjelas satu-satu.

Yang pertama adalah atribut body{}

Bagian ini difungsikan kesemua bagian kode HTML Body yang ada secara menyeluruh.

Contoh CSS : body{background:rgb(240, 237, 232)}
Contoh HTML : <body></body>

Yang kedua adalah atribut class

Bagian ini difungsikan untuk memanggil fungsi css dari atribut class tertentu.
Sedikit berbeda dengan body{}, pada class harus ada elemen-elemen berbeda dari setiap kode sumber yang berbeda pula.

Contoh CSS :
.header{padding:10px;background-color:rgb(139, 137, 231);color:rgb(194, 226, 193);text-align:center;margin-bottom:5px;}
.header h2:hover{color:red;}

Contoh HTML :
<div class="header">
<h2>HELLO HEADER</h2>
</div>

Contoh lain dalam penggunaan atribut class.
Anda bisa menambah kode sumber class hingga lebih dari satu buah. Trik ini biasanya hanya dilakukan ketika terdapat beberapa fungsi yang sama pada bagian style, sehingga lebih menghemat kb css.

Contoh CSS :
.footer{background-color:rgb(33, 110, 52);text-align:center;color:#fff;margin-top:5px;padding:10px;}
.cssTambahan {padding:20px;}

Contoh HTML :
<div class="footer cssTambahan">
Powered by: <a href="http://kangsigit.com">Kangsigit</a>
</div>

Yang ketiga adalah menggunakan css link yang tetap sesuai tempat dan keinginan.

Umumnya, penggunaan css seperti dibawah ini sudah benar.
a{color:red;text-decoration:none;}
Css diatas bisa dipanggil menggunakan link anchor biasa, misalnya <a href="http://kangsigit.com/">Link</a>
Namun yang menjadi permasalahan adalah adanya ketidak cocokan dengan bagian template tertentu. Misal kita ingin pada bagian konten Link Anchornya berwarna merah, lalu pada bagian footer berwarna kuning tidak akan bisa.

Nah untuk mengakalinya bisa dengan penambahan atribut a dibelakang class.
Contoh CSS :
.konten a{color:red;text-decoration:none}
.footer a{color:blue;text-decoration:none}

Contoh HTML sama dengan yang biasanya.
Keterangan: Pada contoh diatas, berarti kita hanya menghendaki bahwa warna link anchor merah (red) hanya ditujukan untuk HTML yang terdapat pada class (konten)
Sedangkan untuk link anchor warna biru (blue) hanya ditujukan untuk HTML yang terdapat pada class (footer)

Yang keempat adalah H1,H2,H3,H4 (Heading)

Heading dalam bahasa style biasa ditulis dengan H1,H2,H3,H4 dan seterusnya. Ini kebanyakan digunakan untuk judul posting atau untuk mengawalu sub judul baru pada halaman.

Cara penulisan cssnya sama saja dengan pada penulisan css link anchor. Yaitu h1{isi css} dan dipanggil menggunakan HTML <h1>Teks disini</h1>

Pada dasarnya bukan hanya terbatas pada hal-hal diatas, lain kali akan saya jelaskan lebih detail dengan bagian-bagian yang dapat dikolaborasikan HTML.

Nah, sebagai hasil akhir dari pembelajaran hari ini, silahkan Anda tes kode-kode dibawah.

<html>
<head>
<title>Judul Testing</title>
<style>
body{background:rgb(240, 237, 232)}
.header{padding:10px;background-color:rgb(139, 137, 231);color:rgb(194, 226, 193);text-align:center;margin-bottom:5px;}
.header h2:hover{color:red;}

.konten{width:980px;margin:0 auto;font-size:14px;background-color:#333;color:#fff;padding:10px;font-family:sans-serif}
.konten a{color:red;text-decoration:none}
.konten a:hover{color:yellow}

.footer{background-color:rgb(33, 110, 52);text-align:center;color:#fff;margin-top:5px;padding:10px;}
.cssTambahan {padding:20px;}

a{color:yellow}
a:hover{color:#fff}
a:focus{color:red}
h1{font-size:23px;border-bottom:inset 2px #C8E7E7}
h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}
</style>
</head>
<body>
<div class="header">
<h2>HELLO HEADER</h2>
</div>
<div class="konten">
<h1>Heading 1 Digunakan Untuk Judul Postingan</h1>
<p>Paragraph 1<br/>
Paragraph 2<br />
</p>
<a href="http://kangsigit.com">Link Anchor</a>
</div>
<div class="footer cssTambahan">
Powered by: <a href="http://kangsigit.com">Kangsigit</a>
</div>
</body>
</html>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini