nama file: latihan_css.html
<!DOCTYPE html>
<html>
<head>
<title> Latihan CSS</title>
<link rel="stylesheet" type="text/css" href="style_css.css">
<!-- embed atau Internal -->
<style>
p {
text-align:right;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2> contoh selector html </h2>
<p id="p1">pakai kress atau selector id
jklajdskfjk kljkljaskdjfk kjklasjdfkj
lkjadsklfjkljksdlfj kljkjasdkfjlkjklasdjf kljadsklfjksdjf kjsdfkj </p>
<p class="p2"> pakai titik atau selector class </p>
<p style="text-align: center;"><br>paragraph ini dibuat secara inline/menyisip di tag html</p>
<p style="text-align:left;" class="hai"><br>apa kabar?</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<ol>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ol>
</body>
</html>
==========================================================
nama file: style_css.css
/* selector html */
body { font-family:cursive;}
h1,h2 { color:coral;}
/* selector id */
#p1 {color: grey;}
/* selector class */
.p2 { color: chocolate;}
/*pseduo class/kelas semu */
.hai { color: red;}
.hai:hover { font-size: 30px;}
.hai:active { font-style: italic;}
.hai:visited {
font-size: 35px;
font-family: Arial, Helvetica, sans-serif;
}
/* a ada di dalam li, li ada di dalam ul */
ul li a { color: green;}
ol li a { color: red;}
/* ngetes pseduo class yg bwh ul dan ol yg atas di nonaktifkan */
/* anak pertama */
/* li:first-child a{ color:black;} */
/* anak terakhir */
/* li:last-child a{
font: 1em sans-serif;
color:yellow;
} */
/* css carikan a, di dalam li yang merupakan anak genap/even, jika 6n: anak ke 6 dst.*/
/* li:nth-child(even) a {
color:fuchsia;
font-style: italic;
} */
/* li:nth-child(3n) a { color:red;} */
/* css carikan a, di dalam li yang merupakan anak ganjil*/
/* li:nth-child(odd) a {
color: cyan;
} */
Comments