Scribd
Unggah
15 tayangan

4 CSS

Diunggah oleh

rioferddinansya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
15 tayangan

4 CSS

Diunggah oleh

rioferddinansya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 24

Cascading Style Sheet

(CSS)
Medhanita Dewi Renanti, S.Kom, M.Kom
Apakah itu CSS

● CSS Kepanjangan dari Cascading


Style Sheets
● Styles bertujuan untuk mengatur
bagaimana elemen HTML
ditampilkan.
● Komponen yang mendefinisikan
sytle suatu elemen disimpan
dalam Style Sheets
Apakah itu CSS
● Format Style Sheet mulai diperkenalkan pada
standar HTML 4.0 yang selanjutnya lebih
dikenal sebagai Cascading Style Sheet (CSS).
● Implementasi CSS mempermudah proses
pemformatan dokumen HTML.
● Terdapat dua bagian penting yang
dipisahkan dari sebuah dokumen HTML yaitu:
isi dokumen dan format layout dokumen
Apakah itu CSS

● Penggunaan External Style Sheets


dapat membantu efesiensi coding
● External Style Sheets disimpan dalam
file CSS
● Pendefenisian style lebih dari satu
akan ditumpuk menjadi satu
Keuntungan Menggunakan CSS
● CSS memisahkan style dan layout
file HTML dari isi informasinya.
● Dapat didefinisikan desain situs
pada suatu file terpisah sehingga
dapat mengubah seluruh desain situs
hanya dengan mengubah satu file
saja.
● Kode HTML menjadi lebih sederhana
dan mudah diatur.
Keuntungan Menggunakan CSS
● Lebih mudah untuk menjaga
konsistensi tampilan situs.
● Dapat digunakan sebagai template
desain.
● Dapat dengan mudah
mengelompokkan style sehingga
lebih efisien.
Urutan Penerjemahan Styles
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (didefinisikan
dalam tag <head>)
Inline Style (pendefinisian style
___
4.
dalam HTML langsung)

Nomor 4 memiliki prioritas tertinggi ☺


Sintak

selector {property: value}

• Selector adalah element/tag,atribut

•
___
yang ingin diatur styles nya.
Nilai properti adalah atribut yang
diatur secara terpisah dengan tanda ;
Dua Bagian Utama CSS

● Style

● Penempatan
Style (1)
● Contoh style yang paling umum adalah
warna dan ukuran teks. Kode HTML untuk
membuat teks dengan format H4
berwarna biru dituliskan sebagai
berikut:
<font color="#0000ff"><h4>Perancangan
Web</h4></font>
Yang akan tampak seperti ini:
Perancangan Web
Style (2)
● Dengan cara ini tidak dapat dipastikan bahwa
semua H4 berwarna biru kecuali dengan
mendeklarasikan pada tiap tag <font>.
● Dengan CSS dapat dibuat seluruh H4 berwarna
biru untuk semua halaman dan semua elemen
yang menggunakan style ini akan berwarna biru.
● H4 {Color:#0000ff;}
● <H4> Perancangan Web </H4>
Perancangan Web
CSS Style Rule (1)
● Dua bagian: Selector dan Declaration.
● Selector: nama style
● Declaration: ada dua bagian:
○ Property (misal: font-family)

○ Value (misal: Helvetica)


● Contoh: b{color:red;}
CSS Style Rule (2)
● Pengelompokkan:
b {color:red;}
h1 {color:red;}
h2 {color:red;}
Menjadi
b,h1,h2 {color:red;}
● Untuk sama selector
h3{ font-size:20;
color:orange;
}
Tipe Style CSS (1)

• Custom CSS styles (class styles): membuat style


dengan atribut yang didefinisikan.
• Contoh:
• <style type=“text/css”>
p.biru {background-color:#0000ff;}
___
•
• p.red {background-color:#ff0000;}
• </style>
• Penggunaan
• <p class="biru"> Institut Pertanian Bogor</p>
Tipe Style CSS (2)

Agar dapat digunakan umum:


<style type=“text/css”>
.biru {background-color:#0000ff;}
.red {background-color:#ff0000;}

___
</style>
Contoh
<p class="biru"> Institut Pertanian Bogor</p>
<h2 class="red">Program Diploma </h2>
Tipe Style CSS (3)

• HTML tag styles mendefinisikan kembali suatu


bentuk format untuk suatu tag.
• Misal: h1{font-size:150%}

• ___
Ketika kita membuat atau mengubah style CSS
untuk tag h1, semua teks yang berformat h1
langsung diperbaharui.
Tipe Style CSS (4)

• CSS selector styles mendefinisikan kembali suatu bentuk


format untuk kombinasi tag.
• Contoh:td h2 {color:yellow;}

•
___
berlaku jika header h2 muncul di suatu sel dalam tabel
Atau untuk semua tag yang mengandung atribut ber-id
• #test{color:blue;}
• <p ID=test>Perancangan Web</p>
Penempatan CSS (1)

● <HEAD>

<Head>
<style type="text/css">
h3{ font-size:150%;
color:orange;
}
</style>
</head>
The Rules
● Semua informasi style harus disimpan dalam tag <style>
</style>
● Selalu masukkan atribut TYPE
● Atribut ini mendefinisikan tipe aturan style apa yang akan
digunakan. Misal: CSS.
Penempatan CSS (2)

● External File
○ Link ke Suatu Dokumen
<link rel=“stylesheet” type=“text/css”
href=“stylesheet.css”>

○ Import Suatu Dokumen


<style>
@import URL (http://yoursite.com/stylesheet.css);
</style>
Penempatan CSS (3)

● Individual tag

<h4 style=“text-decoration:none;”>
Perancangan Web </h4>
Alasan untuk tidak menggunakan
eksternal CSS

● Dapat meningkatkan waktu download,


jika file berukuran besar.
● CSS harus di-load sampai selesai untuk
dapat menampilkan halaman
● Jika jumlah style hanya sedikit dan
hanya digunakan pada beberapa halaman
saja, hanya akan menambah
kekompleksan halaman.
Multiple Style Sheets
●Jika terdapat penggunaan beberapa stylesheet pada satu HTML yang sama, maka nilai yang akan
dipergunakan diturunkan dari style sheet yang paling spesifik.
●Contoh :
●Pada eksternal CSS didefinisikan:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
●Pada internal CSS didefinisikan :
h3
{
text-align: right;
font-size: 20pt
}
●Maka pada halaman HTML yang menggunakan keduanya, berlaku:
color: red;
text-align: right;
font-size: 20pt
“Jadilah orang yang banyak
bermanfaat bagi orang lain.”

—Medhanita Dewi Renanti

Anda mungkin juga menyukai