Scribd
Unggah
17 tayangan

Pengantar Cascading Style Sheet (CSS)

Diunggah oleh

Yesi Yesi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
17 tayangan

Pengantar Cascading Style Sheet (CSS)

Diunggah oleh

Yesi Yesi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

PENGANTAR CASCADING STYLE SHEET (CSS)

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :


1. Pengertian CSS
2. Memahami Konsep CSS
3. Memahasi Aturan Penulisan CSS
4. Memahami Manipulasi Font, Teks, Image, Background, Border
5. Memahami Manipulasi Tabel, Link dan Kursor Mouse.

1. Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yaitu kumpulan kode-kode yang
berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halaman
HTML. Dengan CSS kita dapat mengatur tampilan dan melakukan perubahan
struktur, huruf, warna, gambar, latar belakang halaman web dan lainnya secara
sakaligus tanpa mesti merubah satu persatu. Misalnya, Anda ingin merubah jenis
huruf yang digunakan dari Arial ke Helvetica, maka bayangkan jika halaman web
Anda lebih dari 100 halaman, tentu akan sulit memperbaikinya satu persatu,
namun dengan CSS, Anda cukup mengubahnya di CSS saja, maka akan berubah
ke seluruh halaman web Anda.

CSS lahir pada bulan Desember 1996 dengan diluncurkan CSS versi 1, tahun
1998 dirilis CSS versi 2 dan sekarang sudah mencapai CSS versi 3 dengan
perbaikan yang sangat signifikan.

Tata penulisan CSS mempunyai aturan-aturan tertentu agar di kenal oleh browser.
Secara umum penulisan CSS terdiri atas :

 Selector, yaitu tag HTML yang akan diberikan perintah CSS, seperti tag
<h1>, <img>, <table> dan lainnya.
 Property, yaitu atribut dari tag HTML yang dikonversi menjadi property
CSS, misalnya color, align dan laiinya.
 Value, adalah nilai yang diberikan ke property.
Sintaknya :

Selector { property: value }

Contoh : Anda dapat menentukan bingkai dari sebuah table seperti berikut :

table{ border :1px solid #C00; }

artinya, jika perintah table anda gunakan pada HTML, maka otomatis akan
diberikan atribut border dengan nila 1, solid dan berwarna #C00.

Satu selector dapat diberikan banyak property sekaligus, perhatikan contoh


berikut :

h1 {
border: 1px;
color: #ccc;
background-color: #000080;
}

Anda juga dapat memberikan CSS pada selector secara bertingkat seperti berikut :
ul em { color: #000; }
Artinya, CSS tersebut hanya berlaku untuk tag <em> yang berada setelah tag
<ul>.
Jika Anda ingin membuat class selector sendiri (bukan dari tag HTML), maka
dapat dilakukan dengan cara :
.black { color: black; }
Implementasinya pada kode HTML seperti berikut :
<p class=black>Tulisan akan berwarna hitam</p>
Namun, jika Anda ingin mengacu kepada id (attribute id), maka penulisannya :
#black { color: black; }
jika dibuat bertingkat, maka :
h1#black { color: black; }
ini akan memberikan efek hanya pada tag <h1> yang atribut idnya sama dengan
black. Jika Anda ingin semua tag <h1> akan berwarna black, maka :
#black h1 { color: black; }
Implementasinya pada kode HTML seperti berikut :
<p id=black>Tulisan akan berwarna hitam</p>

Selector group :
Kita dapat membuat selector ini berdasarkan sekelompok tag, dengan cara
memisahkan antara satu selector dengan selector lainnya dengan tanda koma (,).
Contoh :
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

2. Manfaat CSS
Beberapa kelebihan dari penggunaan CSS ini adalah :
1. Lebih hemat waktu, karena kode yang yang dibuat dengan CSS dapat
digunakan untuk banyak halaman secara sekaligus.
2. Loading halaman lebih cepat, dengan memanfaatkan CSS, Anda tidak
akan menulis kode HTML yang banyak, sehingga ini membuat loading
halaman web lebih cepat.
3. Mudah dalam mengelolanya, dengan CSS, jika bagian yang salah atau
ingin diperbaiki, maka cukup dilakukan pada file CSSnya saja.
4. Kompatibilitas, CSS dapat dikenal oleh berbagai browser dan device.
5. Standard Web, kedepannya CSS akan terus dikembangkan dan menjadi
bagian yang tak terpisahkan dari sebuah web.
3. Cara Menggunakan CSS
Terdapat 3 cara memanfaatkan CSS ini untuk diterapkan pada HTML :
1. Embedded/Internal CSS, yaitu kode CSS langsung disisipkan pada file
HTML (halaman web) dengan terlebih dahulu menambahkan element
style. Tag ini diletakkan pada tag <head> … </head>. Dengan sintak :
<head>
<style type="text/css">
Style Rules
............
</style>
</head>

Contoh :
<head>
<style type="text/css" >
h1{
color: #36C;
}
</style>
</head>
Artinya, setiap Anda menggunakan tag <h1> pada halaman web ini, maka
otomatis akan berwarna #36C.
2. Inline CSS, yaitu kode CSS langsung disisipkan pada tag HTML, dan
hanya memberikan efek pada tag HTML itu saja. Sintaknya :
<element style="...style rules....">
Contoh :
<h1 style="color:#36C;">Inline CSS </h1>
Maka tulisan “Inline CSS akan berwarna #36C dan akan memberikan efek
hingga tag <h1> di tutup (</h1>). Secara default, tag <h1> hanya memiliki
atribut align, namun dengan inline CSS anda dapat memberikan atribut
lainnya dengan style, sehingga keberadaan elemen style ini mampu
memperkaya kemampuan sebuah tag.
3. External CSS, yaitu file CSS diletakkan secara terpisah dengan file
HTMLnya. Artinya Anda harus membuat sebuah file khusus untuk
mengumpulkan semua script CSS dan menyimpannya dengan ekstensi
.css. Kemudian pada setiap file HTML yang akan memanggil file css
tersebut harus disisip perintah :
<head>
<link href=" css file " rel="stylesheet"
type="text/css">
</head>
Type=”text/css” merupakan atribut yang wajib diberikan.
href diisi dengan lokasi dan nama file css-nya.
Perhatikan contoh berikut :
1. Buat file baru dengan nama style.css, isi dengan kode berikut :
body {
color: green;
background: cyan;
font-family : arial;
}

h1, h2, h3 {
color: efabcd;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Perintah diatas akan memberikan efek pada setiap file HTML


menggunakan tag <h1>, <h2> dan <h3>, maka otomatis akan
berwarna #36C, font weight = normal, spasi 4em, margin bottom=1em
dan hurufnya kecil.
2. Buat file HTML dengan css.html, lalu isi dengan kode berikut :

Jika file html ini dijalankan, maka tampilannya akan seperti gambar
berikut :
LATIHAN
Untuk lebih memahami CSS ini, silahkan Anda praktek latihan dibawah ini dan
ambil kesimpulannya.
1. Background

Hasilnya :

2. Variasi huruf
Hasilnya :

3. Manipulasi Teks
Hasilnya :
4. Manipulasi Teks Lanjutan :

Hasilnya :

5. Image Properti, pastikan Anda telah memiliki sebuah gambar untuk


mencoba latihan ini.

Hasilnya :
6. Manipulasi Link

Hasilnya :

7. Bordel style

Hasilnya :
8. Border

Lanjutan :

9. Margin
Hasilnya :

10. Kursor Mouse

Hasilnya :

Anda mungkin juga menyukai