Cascading Style Sheets
Pertemuan 2
CSS
Cascading Style Sheets (CSS) adalah merupakan aturan
untuk mengendalikan beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam.
CSS bukan merupakan bahasa pemograman. Dengan CSS kita
dapat dengan mudah mengubah keseluruhan warna dan
tampilan yg ada di situs kita sekaligus memformat ulang situs
kita.
Dengan adanya CSS memungkinkan kita untuk menampilkan
halaman yang sama dengan format yang berbeda
Menggunakan tag:
<style> ...... </style>
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.
Elemen, Tag, dan Atribut
Elemen & Tag
Elemen HTML merupakan komponen yang menetapkan
peran sebuah objek dalam dokumen, termasuk struktur dan
konten dari objek tersebut. Contoh dari sebuah elemen HTML
ialah p ataupun b yang telah dicontohkan pada bagian-bagian
sebelumnya. Elemen-elemen populer lain dalam HTML
misalnya a, h1, div, span, em, ataupun strong.
Setiap Elemen ditulis dalam bentuk tag <elemen> dan
ditutup dengan </elemen>
Contoh elemen :
<a> </a>
Elemen, Tag, dan Atribut
Atribut
Atribut merupakan informasi tambahan yang
dapat kita berikan untuk sebuah elemen.
Atribut Value Keterang
Setiap elemen memiliki atribut yang berbeda- an
beda, meskipun terdapat beberapa atribut
downloa Filename Html5
standar yang dapat digunakan oleh semua d only
elemen. href url Link
halaman
html lain
Atribut standar yang dimiliki oleh semua
elemen sendiri merupakan atribut yang target _blank Spesifik
umumnya dapat diimplementasikan oleh _parent
_self
lokasi
semua elemen, misalnya atribut “id” untuk _top
framena
identifikasi elemen, atau “class” untuk me
klasifikasi elemen.
Contoh elemen a dengan attribut href :
<a href=“https://www.kahuripan.ac.id”>Ini
link Kahuripan</a>
Struktur HTML
• Elemen DOCTYPE
<!DOCTYPE html> Digunakan untuk memberikan informasi
<html lang="en"> kepada browser mengenai versi HTML yang
digunakan oleh dokumen. Pada
<head> listing~ref{code:struktur-html}, versi HTML
<title>...</title> yang digunakan adalah HTML5.
</head>
<body> • Elemen HTML
... Elemen ini mengandung keseluruhan
</body> dokumen HTML, yang berarti tag pembuka
</html> elemen HTML merupakan tanda awal
dokumen HTML, dan tag penutup adalah
tanda akhir dokumen.
Struktur HTML
• Elemen head
<!DOCTYPE html> Elemen head pada dokumen digunakan
<html lang="en"> untuk menguraikan berbagai meta data
(informasi yang berkaitan dengan
<head> dokumen), judul dokumen, dan tautan
<title>...</title> dokumen ke berkas-berkas eksternal.
</head> Berbagai data yang ada di dalam elemen
<body> head tidak akan nampak pada halaman web
hasil tampilan browser.
...
• Elemen title
</body> Memberikan judul dokumen.
</html> • Elemen body
Elemen ini merupakan penampung dari isi
konten dokumen yang akan ditampilkan
kepada pengguna.
Format CSS
Sebuah style sheet terdiri dari beberapa aturan (rules).
Masing-masing aturan terdiri dari satu atau lebih selektor
(selector) dan sebuah blok deklarasi (declaration block).
Sebuah blok deklarasi terdiri dari beberapa deklarasi yang
dipisahkan oleh titik koma (;). Masing-masing deklarasi
terdiri dari property, titik dua (:) dan nilai (value).
Selector
Selektor dapat ditulis secara kelompok, dipisahkan
dengan tanda koma. (GROUPING)
contoh:
Semua elemen header akan ditampilkan dalam teks
berwarna hijau
…
Mendefinisikan style yang berbeda untuk type elemen
HTML yang sama (Class Selector)
contoh:
Terdapat dua type paragraph dalam suatu dokumen: satu
paragraf rata kanan, dan paragraf yang lain rata tengah.
Selection ID
Pendefinisian style untuk elemen HTML dapat dilakukan
dengan selector id. Selektor ID didefinisikan sebagai #.
Contoh:
Aturan style berikut akan menyesuaikan elemen yang
mempunyai sebuah atribut id dengan nilai “hijau”.
<font id=“green”>Warna Hijau</font>
Value
Value merupakan nilai dari property yang ingin kita berikan.
Nilai yang dapat diberikan sendiri berbeda-beda, tergantung
dengan jenis property-nya.
Utk warna : #RRGGBB (kombinasi nilai heksa merah-hijau-
biru yang biasa digunakan pada program pengolah grafis
seperti Photoshop).
Ukuran : dalam format nilai px atau nilai em.
Contoh value :
p{
color: #FFFF00;
font-size: 50px; }
CSS
Dapat digunakan secara internal, eksternal
maupun inline (langsung ditulis dalam tag
HTML).
CSS eksternal menggunakan ekstensi *.css
Dianjurkan untuk menggunakan CSS eksternal.
CSS Internal
<!DOCSTYLE html> .merah {color:red}
<html> </style>
<head> </head>
<title> css Internal </title> <body>
<style> <h1> ini heading </h1>
/* Ini komentar tidak perlu <a
diproses */ href="http://www.kahuripan.ac
h1 {color:blue;} /* warna biru*/ .id"> kahuripan web site </a>
a {color:blue;text- <br /><font id="tebal"> Tulisan
decoration:none; } /* warna Tebal </font>
biru */ <br /><font class="merah">
a:hover {color:red;text- Berwarna Merah </font>
decoration:underline; } /* </body>
warna merah */ </html>
#tebal {font-weight:bold;}
CSS Inline
<!DOCSTYLE html>
<html>
<head>
<title> CSS Inline </title>
</head>
<body>
<h1 style="color:#00ff00;"> ini heading </h1>
<a style="color:blue;text-decoration:none;”
hover=“color:red;text-decoration:underline;"
href="http://www.kahuripan.ac.id"> UKK web site </a>
<br /><font style = "font-weight:bold;"> Tulisan Tebal </font>
<br /><font style = "color:red"> Berwarna Merah </font>
</body>
CSS EKSTERNAL – SIMPAN DENGAN
NAMA GAYA.CSS
/* Ini komentar tidak perlu diproses */
h1 {color:green;} /* warna hijau */
a {color:blue;text-decoration:none; } /* warna biru */
a:hover {color:red;text-decoration:underline; } /* warna merah
*/
#tebal {font-weight:bold;}
.merah{color:red}
CSS EKSTERNAL – HTML (SIMPAN DENGAN NAMA
HALAMAN.HTML) – SIMPAN DALAM 1 FOLDER DENGAN
GAYA.CSS
<!DOCSTYLE html>
<html>
<head>
<title> CSS Eksternal </title>
<link type="text/css" href="gaya.css" rel="stylesheet">
</head>
<body>
<h1> ini heading </h1>
<a href="http://www.kahuripan.ac.id"> UKK web site </a>
<br /><font id="tebal"> Tulisan Tebal </font>
<br /><font class="merah"> Berwarna Merah </font>
</body>
CSS Eksternal
TERIMA KASIH
