CSS pada List
Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya adalah:
list-style-type: contoh tipe; adalah untuk mengubah bentuk bullet yang ada di depan dari list menu.
list-style-type: contoh tipe; adalah untuk mengubah bentuk bullet yang ada di depan dari list menu.
list-style-image: url(contoh.jpg); adalah untuk mengubah bentuk bullet dengan gambar .
list-style-position: posisi; adalah untuk memposisikan list menu: inside dan outside.
Untuk lebih jelasnya, coba ketik kode dibawah ini dan save dengan nama file style.css
H1{Font-family:"comic sans ms";font-size:16pt;font-weight:bold;Color:blue}
P{Font-family:"monotype corsiva";font-size:12pt;font-weight:bold;Color:red;text-align:justify}
body{font-family: verdana; font-size: 12px; background-color:#00FFFF}
ul.c {list-style-type: square;}
ol.a {list-style-type: upper-roman;}
ol.b {list-style-type: lower-alpha;}
Setelah itu, ketikkan kode dibawah ini dengan nama file ini_contoh.html
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>ini adalah heading 1 yang sudah memakai css</h1>
<p> Style Sheet external adalah style sheet yang didefinisikan
secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file
terpisah, maka harus diberikan ekstensi penyimpanannya dengan
diakhiri .css ( contoh : external.css ) dan tidak perlu didefinisikan di
dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus dihubungkan menggunakan sebuah link untuk mengakses atau memanggilnya.</p>
<ul class="c">
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
<ol class="a">
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ol>
<ol class="b">
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ol>
</body>
</html>
