CSS?
CSS singkatan dari Cascading Style Sheets. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup.
<html>
<head>
<title> Pertemuan 6 </title>
<!-- Bagian CSS-->
<style type="text/css">
h1.judul {
color : blue;
text-align : center;
font-family : Arial;
}
pre {
font-family : mistral;
font-size : 20pt;
}
body {
color : white;
background : black;
margin-left : 10;
margin-right : 20;
}
div.box1 {
border : solid;
border-width : strong;
border-radius : 10px;
padding-top : 10;
padding-left : 10;
padding-bottom : 10;
width : 100%;
}
div.box2 {
border : solid;
border-width : strong;
border-bottom-left-radius : 10px;
border-bottom-right-radius : 10px;
padding-top : 10;
padding-left : 10;
padding-bottom : 10;
width : 100%;
}
.img1 {
width : 45%;
}
.img1:hover {
opacity : 0.3;
filter:alpha(opacity=30);
}
.img2 {
width : 10%;
}
.img2:hover {
width : 45%;
}
.table1 {
font-family : sans-serif;
background-color : #fff;
color : #000;
width : 50%;
border : 1px solid #f2f5f7;
}
.table1 tr th{
background : #35a9db;
color : #fff;
font-weight : normal;
}
.table1 th td{
padding : 8px 20px;
text-align : center;
}
.table1 tr:hover {
background-color : hotpink;
}
.table1 tr:nth-child(even) {
background-color : #f2f2f2;
}
.nav1 {
font-family : sans-serif;
color : #444;
background-color : #fff;
border-width : thin;
width : 50%;
border : 1px solid #f2f5f7;
border-radius : 10px;
}
.nav1 td {
width : 50%;
height : 30;
text-align : center;
}
.nav1 td:hover {
background-color : hotpink;
}
</style>
</head>
<body>
<h1 class="judul"> Pengenalan CSS </h1>
<table class="nav1" align="center">
<tr>
<td>
<a href="#"> Home </a>
</td>
<td>
<a href="#"> Galery </a>
</td>
</tr>
</table>
<br>
<div class="box1">
<h1> PENGENALAN CSS </h1>
<pre>
Ini adalah contoh
halaman menggunakan CSS
</pre>
</div>
<br>
<div class="box2" align="center">
<table class="table1">
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
</tr>
<tr>
<td> Row 2</td>
<td> Row 2</td>
</tr>
<tr>
<td> Row 3</td>
<td> Row 3</td>
</tr>
</table>
</div>
<br>
<div class="box2">
<img class="img1" src="gambar1.jpg">   <img class="img2" src="gambar1.jpg">
</div>
</body>
</html>
<html>
<head>
<title> Pertemuan 6 </title>
<!-- Bagian CSS-->
<style type="text/css">
h1.judul {
color : blue;
text-align : center;
font-family : Arial;
}
pre {
font-family : mistral;
font-size : 20pt;
}
body {
color : white;
background : black;
margin-left : 10;
margin-right : 20;
}
div.box1 {
border : solid;
border-width : strong;
border-radius : 10px;
padding-top : 10;
padding-left : 10;
padding-bottom : 10;
width : 100%;
}
div.box2 {
border : solid;
border-width : strong;
border-bottom-left-radius : 10px;
border-bottom-right-radius : 10px;
padding-top : 10;
padding-left : 10;
padding-bottom : 10;
width : 100%;
}
.img1 {
width : 45%;
}
.img1:hover {
opacity : 0.3;
filter:alpha(opacity=30);
}
.img2 {
width : 10%;
}
.img2:hover {
width : 45%;
}
.table1 {
font-family : sans-serif;
background-color : #fff;
color : #000;
width : 50%;
border : 1px solid #f2f5f7;
}
.table1 tr th{
background : #35a9db;
color : #fff;
font-weight : normal;
}
.table1 th td{
padding : 8px 20px;
text-align : center;
}
.table1 tr:hover {
background-color : hotpink;
}
.table1 tr:nth-child(even) {
background-color : #f2f2f2;
}
.nav1 {
font-family : sans-serif;
color : #444;
background-color : #fff;
border-width : thin;
width : 50%;
border : 1px solid #f2f5f7;
border-radius : 10px;
}
.nav1 td {
width : 50%;
height : 30;
text-align : center;
}
.nav1 td:hover {
background-color : hotpink;
}
</style>
</head>
<body>
<h1 class="judul"> Pengenalan CSS </h1>
<table class="nav1" align="center">
<tr>
<td>
<a href="#"> Home </a>
</td>
<td>
<a href="#"> Galery </a>
</td>
</tr>
</table>
<br>
<div class="box1">
<h1> PENGENALAN CSS </h1>
<pre>
Ini adalah contoh
halaman menggunakan CSS
</pre>
</div>
<br>
<div class="box2" align="center">
<table class="table1">
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
</tr>
<tr>
<td> Row 2</td>
<td> Row 2</td>
</tr>
<tr>
<td> Row 3</td>
<td> Row 3</td>
</tr>
</table>
</div>
<br>
<div class="box2">
<img class="img1" src="gambar1.jpg">   <img class="img2" src="gambar1.jpg">
</div>
</body>
</html>
Komentar
Posting Komentar