›

Mengenal CSS Dasar (Bagian 2)

anaksmanda.com - Di pembahasan sebelumnya kita pernah membahas tentang pengenalan CSS baik itu pengertian, manfaat dan syntaks dasar dari css atau untuk lebih jelasnya bisa dilihat kembali pada artikel Mengenal Css Dasar (Bagian 1) . kali ini kita akan lanjut membahas lanjutan Mengenal CSS Dasar Bagian 2. Didalam topik kali ini kita akan membahas tentang Inline Selector, Penempatan CSS dalam HTML dan Contextual Selector.

ID Selector

Aturan penamaan ID:
  1. Dapat mengandung huruf, angka, atau karakter garis bawah,
  2.  Karakter pertama harus berupa huruf atau karakter garis bawah,
  3. Diawali dengan tanda #,
  4. Jangan memberi nama id sama dengan value,
  5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.

contoh :
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold; color : blue; }
#miring { font-style : italic; color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
Selamat Belajar CSS
</h2>
<h3 id = "tebal">
Saya baru pertama kali belajar CSS
</h3>
</body>
</html>

Penempatan kode CSS dalam HTML

Ada tiga cara penempatan kode CSS dalam HTML:

1. Internal CSS

Metode penulisan kode CSS langsung dalam file HTML.
contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html>

2. Eksternal CSS

Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css.
contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css”href=”
test.css
”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html>

3. Inline CSS

Penulisan kode CSS dalam tag HTML.
contoh:
nama File  : inline.html
<html>
<head>
</head>
<p style=”background: red; color: black;”>
Menguak Rahasia CSS</p>
</body>
</html>

Contextual Selectors

Contextual Selectors digunakan jika style akan digunakan dalam situasi tertentu,  misalnya saja jika elemen HTML yang digunakan merupakan sebuah kombinasi.  Misalnya saja jika kita akan membuat semua table data mempunyai align center ,  font arial, dan huruf berwarna orange.
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Maka digunakan contextual selectors
Table tr td{ color: orange;
font-family: arial;
Text-align:center;}
Contoh :
<html>
<head>
<style type="text/css">
table tr td{color:orange; font-family:arial;text-align:center;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Cinta</td>
<td>Bahagia</td>
</tr>
<tr>
<td colspan=2 align=center>Sedih</td></tr></table>
</body>
</html> 
Baiklah Sekian Pembahasan dari Mengenal CSS Dasar yang kita pelajari saat ini, nantikan pembahasan lainnya dari Edukasi Website.