Pengenalan CSS
CSS adalah singkatan dari Cascading Style Sheet, berfungsi untuk meningkatkan kemampuan XHTML dan berperan dalam desain tampilan.
CSS menggunakan pasangan tag <style type="text/css"> dan </style>. Dalam tag CSS antar atribut dipisahkan tanda ; (titik koma) dan pemberian nilai atribut menggunakan tanda :(titik dua).
1. Mengatur warna teks
Pewarnaan warna teks dapat ditulis di dalam tag style, contoh sintaks :
<style type="text/css">
h1{color : red;}
p{color : blue;}
</style>
Dan dalam tag body nya :
<body>
<h1>Berwarna merah</h1>
<p>Berwarna Biru</p>
</body>
2. Mengatur Perataan teks
Perataan teks tersedia dalam beberapa jenis, yaitu left, right, center, dan justify.
contoh sintaks:
<style type="text/css">
h1{text-align : center;}
p{text-align : left;}
</style>
3. Membuat Garis pada teks
Untuk membuat garis pada teks, digunakan sintaks text-decoration. Jenis text-decoration adalah :
-overline
untuk garis diatas teks
-underline
untuk garis dibawah teks
-linethrough
untuk coretan tengah
-blink
untuk modifikasi garis
contoh sintaks :
<style type="text/css">
h1{text-decoration : underline;}
p{text-decoration : overline;}
</style>
4. Mengatur Indentasi teks
Dilakukan dengan mengatur nilai atribut text-indent dengan satuan cm dan px.
contoh sintaks :
<style type="text/css">
p{text-indent : 2cm;}
</style>
5. Mengatur penggunaan Huruf Kapital
Tag yang digunakan untuk mengatur huruf kapital adalah tag text-transform. Jenis-jenis text-transform:
-uppercase
untuk penggunaan huruf besar semua
-lowercase
penggunaan huruf kecil
-capitalize
penggunaan huruf kapital di setiap awal kata
contoh sintaks :
<style type="text/css">
h1{text-transform : uppercase;}
</style>
6. Mengatur Ukuran dan jenis huruf
Untuk pengaturan ukuran huruf, digunakan tag font-size, sedangkan untuk pengaturan jenis huruf yaitu tag font-family.
contoh sintaks :
<style type="text/css">
p{font-family : arial;
font-size : 18pt;}
</style>
7. Menagtur Cetak tebal dan Cetak miring
Untuk pengaturan cetak tebal digunakan tag font-weight, dan pengaturan cetak miring menggunakan tag font-style.
contoh sintaks :
<style type="text/css">
p{font-weight : bold;
font-style : italic;}
</style>
8. Mengatur tipe border/garis tepi dan warna border
Jenis tag border-style:
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset
Untuk pengaturan warna border digunakan tag border-color.
9. Mengatur Ketebalan border
Tag yang digunakan untuk mengatur ketebalan border adalah tag border-width.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
border-width : 16px;}
</style>
10. Mengatur padding dan margin
padding digunakan untuk mengatur jarak teks dan border.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
padding-left : 1cm;
padding-top : 1cm;
padding-bottom : 1.5cm;
padding-right : 1.5cm;}
</style>
Margin diatur untuk memberi jarak antara border dengan layar.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
margin-left : 2cm;
margin-right : 3cm;}
</style>
11. CSS pada UnOrdered List dan Ordered List
contoh sintaks UnOrdered list :
<style type="text/css">
ul{list-style-type : disc}
</style>
contoh sintaks Ordered list :
<style type="text/css">
ol{list-style-type : lower-roman}
</style>
12. Membuat list dengan gambar
contoh sintaks :
<style type="text/css">
ul{list-style-image : url('contoh.jpg')}
</style>
13. Mengatur Warna dan Gambar Latar
contoh sintaks untuk mengatur warna latar:
<style type="text/css">
body{background-color : blue;}
h1{background-color : red;}
</style>
contoh sintaks untuk mengatur gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');}
</style>
14. Mengatur posisi gambar latar
contoh sintaks untuk mengatur posisi gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : norepeat;
background-position : top-right;}
</style>
15. Mengatur Perulangan dan membekukan Gambar latar
contoh sintaks untuk mengatur perulangan gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : repeat-x;}
</style>
contoh sintaks untuk membekukan gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : norepeat;
background-position : top-right;
background-attachment : fixed;}
</style>
16. ID dalam CSS
ID digunakan untuk meningkatkan kemampuan dari CSS. Lambang ID dalam CSS adalah #.
contoh sintaks :
<style type="text/css">
#satu{font-style : italic;
background-color : aqua;
color : red;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 Style 1</h1>
</body>
17. Class dalam CSS
Simbol yang digunakan oleh class adalah .(titik). Class dapat digabungkan dengan ID.
contoh sintaks :
<style type="text/css">
#satu{font-style : italic;
background-color : aqua;
color : red;}
.dua{text-decoration : underline;
font-family : arial;
border-style : dotted;
border-color : blue;}
h2.satu{font-family : arial;
color : aqua;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 ID 1</h1>
<h1 class="dua">Header 1 Class 2</h1>
<h2 class="satu">Header 2 class 1</h2>
</body>
18. In line CSS
Pendefinisian CSS ditulis sebagai nilai dari atribut style pada tag XHTML. Ditulis dalam tag body.
contoh sintaks :
<body>
<h1 style="color : pink;
background-color : blue;
text-decoration : underline;">Menggunakan model pendefinisian In line</h1>
</body>
19. External CSS
Pendefinisian CSS ditulis dalam file yang terpisah dari dokumen XHTML. Digunakan tag <link rel="stylesheet" type="text/css" href="file1.css"> dalam tag body dokumen XHTML. Sedangkan dalam file1.css dibuat ID atau Class yang akan digunakan.
Tidak ada komentar:
Posting Komentar