CSS - E-learning Amikom
advertisement
CSS
1. SUMMARY
Pendahuluan
CSS
o Apa itu CSS?
o Bagaimana menggunakannya?
o Bagaimana Sintak CSS itu?
o Bagaimana penerapannya? Apa itu Selector?
Basic Styling
o Background
o Font
o Text
o Links
o Lists
o Table
Box Model
o Margin
o Padding
o Border
o Layout
2. PENDAHULUAN
Sebelum mulai mempelajari CSS maka terlebih dahulu kita harus mengenal HTML / XHTML
terutama pada pengenalan elemen HTML beserta attributnya.
Pada awalnya tampilan halaman web diatur oleh HTML beserta dengan pengaturan stylenya, tetapi
hal tersebut menjadi cukup bermasalah karena untuk web dengan skala yang besar dan dengan
pengaturan style untuk setiap elemen akan membutuhkan waktu dan pengelolaan yang cukup
lama.
Untuk memecahkan masalah ini, World Wide Web Consortium (W3C) menciptakan CSS.
Dalam HTML 4.0, semua format bisa dihapus dari dokumen HTML, dan disimpan dalam file CSS
yang terpisah.
3. CSS
3.1. Apa itu HTML?
CSS singkatan dari Cascading Style Sheets
Style mendefinisikan bagaimana gaya tampilan elemen HTML
Style ditambahkan pada dan setelah HTML 4.0 untuk memecahkan masalah pengelolaan gaya
tampilan halaman web untuk setiap elemennya.
Style Sheets Eksternal dapat menyimpan banyak pengaturan untuk elemen – elemen HTML
Style Sheets Eksternal disimpan dalam file CSS secara terpisah dan dapat digunakan oleh
halaman web yang membutuhkannya.
3.2. Bagaimana menggunakannya?
Ketika browser membaca sebuah style sheets, maka browser akan memformat dokumen tersebut
sesuai dengan pengaturan yang tertulis pada style sheets tersebut.
Terdapat 3 (tiga) cara untuk memasukkan CSS kedalam dokumen HTML :
External style sheet
Internal style sheet
Inline style
External Style Sheet
External style sheet merupakan style yang dipisahkan dari dokumen HTML dengan tujuan untuk
mempermudah pengelolaannya.
External style sheet disimpan dalam bentuk file dengan ekstensi .css dan dapat di kelola dengan
menggunakan text editor apa saja.
Setiap dokumen HTML yang menggunakan external style sheet wajib menggunakan tag <link>
yang dimasukkan kedalam elemen <head>.
Sintak :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
Internal style sheet merupakan style yang dituliskan didalam dokumen HTML.
Sebuah style sheet internal harus digunakan ketika dokumen tunggal memiliki style yang unik.
Style internal didefinisikan dan disarankan pada bagian head halaman HTML, dengan
menggunakan tag <style>
Sintak :
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
Inline Style
Inline style merupakan style yang digunakan secara langsung untuk mengatur tampilan elemen
HTML yang dikehendaki.
Contoh :
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheet
Jika terdapat pengaturan style untuk sebuah elemen maka pengaturannya akan digabungkan,
contoh :
Style 1 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Style 2 :
h3
{
text-align:right;
font-size:20pt;
}
Hasil yang diterapkan :
h3
{
color:red;
text-align:right;
font-size:20pt;
}
Secara umum kita dapat mengatakan bahwa semua style akan "cascade" menjadi lembaran baru
"virtual" style oleh aturan berikut, di mana point yang keempat memiliki prioritas tertinggi:
browser default
Eksternal style sheet
Internal style sheet (di bagian head)
Inline style (di dalam elemen HTML)
3.3. Bagaimana Sintak CSS itu?
Aturan penulisan pada CSS terdiri dari selector dan style declaration :
Selector pada umumnya adalah sebuah element HTML.
Setiap deklarasi (declaration) terdiri dari sebuah property dan nilai (value).
Property adalah style attribute yang ingin anda ubah dan setiap property selalu memiliki nilai
(value).
Komentar menggunakan tanda awalan /* dan tanda penutup */
Contoh :
3.4. Bagaimana penerapannya? Apa itu Selector?
Sebagai tambahan untuk mengatur style pada element HTML, CSS memungkinkan kita untuk
membuat spesifikasi selector sendiri dengan menggunakan attribute class dan id selain dengan
menggunakan nama elemen itu sendiri.
Selector “class” :
Selector
class digunakan untuk mendefinisikan style pada sekelompok element dan bisa
digunakan pada lebih dari satu element.
Selector class menggunakan attribute HTML : class, dan didefinisikan dengan tanda . (titik)
Contoh :
<html>
<head>
<style type="text/css">
.center
{
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Selector “id” :
Selector Id digunakan untuk mendefinisikan style pada element yang unik (single).
Selector Id menggunakan attribute Id pada element HTML, dan didefinisikan dengan tanda “#”
(pagar).
Contoh :
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
4. Basic Styling
4.1. Background
Properti css background digunakan untuk memberikan background efek pada suatu element.
Fungsi css yang digunakan untuk background efek adalah :
background-color, digunakan untuk memberikan warna background.
background-image, digunakan untuk memberikan background dasar gambar.
background-repeat, digunakan untuk mengatur perulangan background gambar pada
posisi horisontal atau vertikal
background-attachment, digunakan untuk mengatur lebar dan tinggi background gambar
apakah fit pada container atau menyesuaikan
background-position, digunakan untuk mengatur posisi background gambar
Catatan tambahan, biasanya didalam pengaturan warna menggunakan
-
nilai HEX, contoh : #ff0000
-
nilai RGB, contoh : rgb(255,0,)
-
nilai warna, contoh : red
4.2. Font
Properti css font digunakan untuk mengatur gaya tampilan font didalam suatu elemen.
Fungsi css yang digunakan untuk mengatur font pada umumnya adalah sebagai berikut :
font-family, digunakan untuk menerapkan jenis font yang akan dipakai
font-style, digunakan untuk menerapkan gaya font yang digunakan (italic, normal, oblique)
font-size, digunakan untuk menerapkan ukuran font
font-weight, digunakan untuk menerapkan tebal font
Catatan tambahan mengenai font-size :
-
ukuran dengan satuan pixel (px)
-
ukuran dengan satuan emsaat (em) (16px = 1em)
-
ukuran dengan prosentase (%)
4.3. Text
Properti css text digunakan untuk mengatur gaya tampilan teks didalam suatu elemen.
Fungsi css yang digunakan untuk mengatur teks pada umumnya adalah sebagai berikut :
color, digunakan untuk mengatur warna teks
text-align, digunakan untuk mengatur posisi teks dalam containernya
text-decoration, digunakan untuk mengatur dekorasi teks (none, blink, underline, overline)
text-transform, digunakan untuk mengatur teks menjadi huruf besar atau kecil atau kapital
(uppercase, lowercase, capitalize)
4.4. Links <a>
Event yang dapat diatur pada links secara umum adalah sebagai berikut :
a:link - a normal, belum dikunjungi
a:visited – link pengguna telah dikunjungi
a:hover – event ketika mouse berada diatas link
a:active – link saat itu diklik
Event yang dimaksudkan diatas adalah pada saat terjadi hal – hal diatas maka style pada link dapat
diatur sesuai dengan eventnya.
Misalnya :
a:hover
{
background-color:#FF704D;
}
Pengaturan css diatas memungkinkan perubahan saat mouse berada diatas link maka style akan
merubah warna background link sesuai dengan yang ditentukan.
4.5. Lists
Daftar item juga dapat diatur menggunakan property css yang umum sebagai berikut :
list-style-type, digunakan untuk mengatur penanda item
list-style-image, digunakan untuk mengatur gambar penanda
list-style-position, digunakan untuk mengatur posisi item (inside, outside)
Contoh :
ul
{
list-style-image: url('sqpurple.gif');
}
4.6. Table
Pengaturan style tabel secara umum meliputi elemen – elemen berikut ini :
table, pengaturan pada elemen tabel secara keseluruhan
tr, pengaturan pada setiap barisnya
th, pengaturan pada setiap header column
td, pengaturan pada setiap kolomnya
Contoh :
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
5. Box Model
Box model digunakan untuk membuat layout – layout halaman web, atau dengan kata lain sebagai
container dari elemen – elemen yang lainnya.
Dalam mengatur sebuah container maka secara umum digunakan property css sebagai berikut :
5.1. Margin
Property margin digunakan untuk memberikan ukuran jarak antara box terhadap elemen /
lingkungan diluarnya.
Contoh :
margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;
Penjelasan :
Jarak atas : 100px
BOX
Jarak kanan : 50px
Jarak kiri
: 100px
Jarak bawah : 100px
5.2. Padding
Property padding digunakan untuk memberikan ukuran jarak antara box terhadap elemen /
lingkungan didalamnya.
Contoh :
padding-top: 100px;
padding -bottom: 100px;
padding -right: 50px;
padding -left: 50px;
Penjelasan :
Jarak atas : 100px
Text / content didalam box
Jarak kanan : 50px
Jarak kiri
: 100px
Jarak bawah : 100px
5.3. Border
Garis batas sebuah container juga dapat diatur menggunakan property css yang umum sebagai
berikut :
border-color, digunakan untuk mengatur warna border
border-style, digunakan untuk mengatur jenis border
border-width, digunakan untuk mengatur lebar border
Contoh :
<html>
<head>
<style type=”text/css”>
p.one
{
border-style : solidl
border-width : 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class=”one”> This is text </p>
<p class=”two”> This is text</p>
<p class=”three”> This is text</p>
<p><b> Note : </b> ”border-width” property tidak akan dapat berjalan sendiri. Menggunakan
“border-style” property untuk mengatur nilai border nya terlebih dahulu.</p>
</body>
</html>
5.4. Layout
Layouting sebuah halaman web akan dibahas lebih lanjut dalam materi web desain.
