CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda (Wikipedia)
Sebelum kalian mengenal CSS kalian harus mengenal yang namanya HTML terlebih dahulu, kalian dapat mempelajari HTML dipostingan saya sebelumnya Belajar HTML.
Ada beberapa cara yang digunakan untuk mengunakan css kedalam dokumen HTML yaitu:
Berikut properti-properti dalam css yang saya sajikan didalam tabel :b {
color : #1faced;
}
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #1faced adalah valueAda beberapa cara yang digunakan untuk mengunakan css kedalam dokumen HTML yaitu:
- Inline Style
Dilakukan dengan cara menambahkan atribute style=".." dalam tag HTML yang bersangkutan. - Header Style
Dilakukan dengan cara menambahkan tag <style media="screen" type="text/css"> pada bagian header tag HTML dan kemudian ditutup dengan tag penutup </style> - Exsternal Style Sheet
Membuat file baru dengan ekstensi .css dengan menuliskan Mark Up CSS untuk eksternal CSS yang nantinya ditempatkan di dalam HTML. Untuk menghubungkan HTML dengan CSS cukup menambahkan script <link rel="stylesheet" href="style.css" type="text/css"> pada bagian header tag HTML .
<html> <head> <title>Belajar CSS</title> </head> <body> <p style="color: #dddddd;">Belajar Menggunakan CSS</p> //warna <p style="font-weight: bold;">Belajar Menggunakan CSS</p> //huruf tebal <p style="font-size: 20px;">Belajar Menggunakan CSS</p> //ukuran huruf </body> </html>
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!-- disini script CSS dibuat -->
h4{ color :#1faced; background: black; width :200px; text-align: center; }
h2{ color :#dddddd; }
</style>
</head>
<body>
<h5>Belajar menggunakan CSS</h5>
<h2>Belajar mengunakan CSS</h2>
</body>
</html>
<html> <head> <title>Belajar CSS</title> <link rel="stylesheet" href="style.css" type="text/css"> //Exsternal Style Sheet </head> <body> <table class="latihan" rowspan="0" colspan="0"> <tr> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>Heru Prayogo</td> <td>BK. 4 Buay Madang Timur</td> </tr> </tabel> </body> </html>Buat file baru dengan nama style.css
.latihan {border-collapse: collapse; width: 400px;}
.latihan td {border: 1px solid #ddd ; padding-left: 20px; padding-right:
20px; height: 30px;}
.latihan th {background: #ddd ; height: 30px; border: 1px solid #ddd ;
text-align: center;}
| Properti | Value | Deskripsi |
|---|---|---|
| background | Pemberian Warna latar | |
| border | Pemberian garis tepi | |
| border-collapse | Tipe border single | |
| border-saparate | Tipe border terpisah | |
| border-radius | Membuat lengkungan / rounded corners | |
| box-shadow | Membuat bayangan / Shadow | |
| color | Pemberian Warna | |
| cursor | auto, default, none, context-menu, help, pointer, progress, wait, cell dll | Efek cursor |
| font-color | Pemberian warna font | |
| font-size | Ukuran huruf | |
| font-weight | normal, bold, bolder, lighter | Ketebalan Huruf |
| font-style | normal, italic, oblique | Style untuk huruf |
| Margin | Memberi jarak bagian luar | |
| Opacity | Mengatur kecerahan | |
| Padding | Memberi jarak bagian dalam | |
| Positon | statistic, relative, absolute, fixed, inherit | Pengaturan posisi elemen |
| text-align | left, right, center, justify , inherit | Pengaturan tata letak text |
| text-decoration | none, underline, line through, overline, blink | Menambahkan efek text |
| text-shadow | Memberi efek bayangan pada text | |
| z-index | Pengaturan urutan letak |
Penggunaan Class & Id
Dengan menggunakan class dan id kita dapat mendefinisikan selector secara lebih spesifik . Kemudian juga memiliki keuntungan, dimana kita dapat mengatur agar tag-tag HTML yang sama ditampilkan secara berbeda sesuai dengan class dan id yang digunakan. Nama untuk class selalu diawali dengan tanda titik (.) sedangkan untuk id selalu diawali dengan tanda (#).
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
#kotak {
border: 1px solid #ddd; padding: 20px; background: #dddddd;"
}
.satu { color: #F58634;
}
.dua { color: green;
}
</style>
</head>
<body>
<div id ="kotak">
<h1 class="satu" >Belajar menggunakan CSS</h1>
<h2 class="dua" >Belajar mengunakan CSS</h2>
</div>
</body>
</html>
Hasil :
Pseudo Class
Apa itu pseudo class? pseudo class adalah atribut tambahan yang diberikan pada selector yang dipisahkan dengan tanda titik dua (:) .- Link
- Visited
- Hover
- Aktive
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
a:link { color : blue;
} //kode ini mempunyai arti sebuah link akan berwarna biru
a:visited { color : purple;
} //Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna ungu
a:hover { color : green;
} //Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi hijau
a:aktive { color : red;
} //Sebuah link warna menjadi hijau apabila halam pada link aktive
</style>
</head>
<body>
<a href="#">Belajar CSS LINK</a>
<a href="#">Belajar CSS Visited</a>
<a href="#">Belajar CSS Hover</a>
<a href="#">Belajar CSS Aktive</a>
</body>
</html>
0 komentar:
Posting Komentar