Assalamu'alaikum.. wr.. wb..
Pada kesempatan kali ini, saya
akan membahas mengenai materi perkuliahan pertemuan kelima di tanggal 16 Maret
2015 Mata Kuliah Web 2.0 Technology.
Pada pertemuan ini, kami membahas mengenai “CSS (Cascading Style Sheet)" .
CSS merupakan salah satu kode
pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout
halaman web supaya lebih elegan dan menarik. CSS digunakan oleh web programmer
dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain
dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web
yang dibangun tanpa kode css.
PENGENALAN DASAR
Cascading Style Sheet terdiri
dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa
pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :
Body {background-color: white;}
‘Body’ adalah Selektor, ‘{ }’
adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai.
Maksud dari kode diatas adalah mengatur warna latar belakang (background color)
dari tag ‘Body’ sebuah halaman web.
Untuk mempermudah dalam penulisan
kode css tersebut, yuk langsung praktek penggunaan css tersebut !!
Kode CSS terpisah
Contoh 1
(File Html) :
<html>
<head>
<title>Latihan</title>
<link rel="stylesheet"
href="style1.css"/>
</head>
<body>
<div
class = "box"> I feel like
i'm floating </div>
<section
class = "afterbox">
I feel like i'm floating I feel like i'm
floating I feel like i'm floating
I feel like i'm floating I feel like i'm
floating I feel like i'm floating
I feel like i'm floating I feel like i'm
floating I feel like i'm floating
I feel like i'm floating I
feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm
floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating </section>
<nav>
Home <nav>
<section>
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating </section>
<section>
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
I feel like i'm floating I feel like i'm floating I feel like i'm floating
</section>
</body>
</html>
(File CSS) :
.box{
float : left;
width : 200px;
height : 100px;
margin : 1cm;
}
.afterbox {
clear : left;
border: 2px solid
}
nav{
float : left;
width : 350px;
}
section{
margin-left : 100px;
}
Output :
(File Html) :
<!DOCTYPE html>
<html>
<head>
<title>Latihan CSS</title>
<link rel="stylesheet"
href="style.css"/>
</head>
<body>
<table>
<tbody>
<tr>
<th>Header Kolom
1</th>
<th>Header Kolom
2</th>
<th>Header Kolom
3</th>
<th>Header Kolom
4</th>
</tr>
<tr>
<td>Baris 1 - Kolom
1</td>
<td>Baris 1 - Kolom
2</td>
<td>Baris 1 - Kolom 3</td>
<td>Baris 1 - Kolom
4</td>
</tr>
<tr>
<td>Baris 2 - Kolom
1</td>
<td>Baris 2 - Kolom
2</td>
<td>Baris 2 - Kolom 3</td>
<td>Baris 2 - Kolom
4</td>
</tr>
<tr>
<td>Baris 3 - Kolom
1</td>
<td>Baris 3 - Kolom
2</td>
<td>Baris 3 - Kolom
3</td>
<td>Baris 3 - Kolom
4</td>
</tr>
<tr>
<td>Baris 4 - Kolom
1</td>
<td>Baris 4 - Kolom
2</td>
<td>Baris 4 - Kolom
3</td>
<td>Baris 4 - Kolom
4</td>
</tr>
<tr>
<td>Baris 5 - Kolom
1</td>
<td>Baris 5 - Kolom
2</td>
<td>Baris 5 - Kolom
3</td>
<td>Baris 5 - Kolom
4</td>
</tr>
<tr>
<td>Baris 6 - Kolom
1</td>
<td>Baris 6 - Kolom
2</td>
<td>Baris 6 - Kolom
3</td>
<td>Baris 6 - Kolom
4</td>
</tr>
</tbody>
</table>
</body>
</html>
(File CSS) :
tbody{
color: black;
th{
color : blue;
padding: 5px 10px;
border: 2px solid #EEF7FB;
background: white;
text-shadow: 1px 1px 0 #1F627F;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15)
inset;
}
td {
padding: 5px 10px;
border:
2px solid #EEF7FB;
-webkit-transition:
all 0.7s ease-in-out 0s;
-moz-transition: all 0.7s ease-in-out 0s;
-o-transition: all 0.7s ease-in-out 0s;
transition: all 0.7s ease-in-out 0s;
}
tr{
background: white;
}
table
tr:nth-child(2n+0):hover {
background: blue;
}
table td:hover, table
td:nth-child(2n+0):hover {
background: blue;
}
table{
padding: 5px 10px;
width: 550px;
border-collapse: collapse;
box-shadow: 5px 3px 5px #000;
background: #ECBE04;
margin: 0 auto;
-webkit-transition: all 0.7s ease-in-out 0s;
-moz-transition: all 0.7s ease-in-out 0s;
-o-transition: all 0.7s ease-in-out 0s;
transition: all 0.7s ease-in-out 0s;
}
Output :
Saya rasa cukup sekian pembahasan
saya mengenai CSS secara sederhana.. semoga bisa bermanfaat dan nantikan
pembahasan saya di kesempatan lainnya..
Wassalamu'alaikum.. wr.. wb..
Referensi : http://www.syakirurohman.net/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html
[040415 - 17:46]
0 komentar:
Posting Komentar