Anda di halaman 1dari 16

Pengenalan

CSS (Cascading Style Sheet)


Topik Pembahasan
• Sejarah CSS
• Penulisan CSS
• Class Selector
• Element Selector
• id Selector
• Inline CSS
• Eksternal CSS
• Internal CSS
CSS (Cascading Style Sheet)
• CSS singkatan dari Cascading Style Sheet.
• CSS Bahasa yang digunakan untuk mengatur tampilan halaman website
agar terlihat lebih menarik
• Dengan CSS, tampilan yang tadinya sederhana, mennjadi lebih bagus dan
lebih menarik,
• Tag-tag HTML dapat diubah format nya dari format standar HTML
menjadi format terbaru yang dapat diatur sendiri berdasarkan atribut
dan nilainya masing-masing
• CSS dapat mengatur tata letak (Layout), warna huruf (Font), garis dan
lain-lain
• Pertama kali di perkenalkan oleh Hakon Wium Lie pada tahun 1994
Versi CSS
• Saat ini terdapat 3 (tiga) versi CSS, yaitu CSS1, CSS2, dan CSS3.
• CSS1 dikembangkan dengan berpusat pada Pemformatan dokumen
HTML
• CSS2 dikembangkan untuk memenuhi kebuthan terhadap format
dokuman agar dapat di tampilkan di Printer
• CSS3 dikembangkan untuk mampu melakukan banyak hal pada halaman
website, termasuk sudah bisa melakukan animasi pada objek
• CSS Bersifat Case Sensitive  Huruf Besar dan Huruf Kecil berbeda karena
penting pada saat menulis kelas atau nama ID
• Misal:
.nim {
……
}
• nim akan berbeda dengan Nim ataupun NIM
• Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama
ID, agar mudah dipahami gunakan penamaan yang mengandung makna dan
mudah di pahami oleh orang
• Semua elemen CSS di buatkan di dalam tag
<Style> Elemen CSS </style>
Penulisan CSS

• Selektor  Menyatakan bagian HTML yang akan diatur stylenya.


• Property  Memberikan atau menentukan tipe style
• Value  Memberikan nilai pada Property
Misal : Artinya  Semua tag HTML
h1 { <h1> akan diberikan warna
color: red; Merah

}
Selector
• Berisi tag HTML yang akan di ubah Stylenya
• Beberapa Kategori Selector
• Simple Selector (Memilih elemen berdasarkan nama, id, dan class)
• Gabungan Selector (Memilih elemen tag yang berhubungan)
• Selector pseudo-class (Memilih elemen berdasarkan status tertentu)
• Selecter emelen pseudo (Memilih dan menata bagian elemen)
• Selector Atribut (Memilih elemen berdasarkan nilai atribut)
Element Selector
• Memilih elemen tag
HTML yang akan
diubah stylenya
id Selector
• Selector id digunakan untuk menentukan style bagian unik dari html.
• Unik disini artinya satu nama id hanya bisa digunakan satu kali pada
sebuah halaman web.
• Apabila satu nama ID digunakan lebih dari satu kali pada sebuah
halaman, maka style hanya akan berlaku pada ID yang pertama saja.
• Penggunaan selector ID akan diawali dengan tanda pagar ( # ).
• Untuk menggunakan ID CSS yang sudah dibuat, dapat dipanggil langsung
pada tag HTML yang akan di format pada atribut class.
id Selector
Class Selector
• Selector class digunakan untuk menentukan style dari sebuah group
elemen.
• Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah
dokumen web.
• Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-
elemen yang ada pada sebuah halaman web.
• Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal
penulisannya, kemudian pada tag HTML ditambahkan class = (nama
kelas).
• Elemen Tag HTML tertentu juga dapat dibuatkan stylenya pada Class
yang dibuat
class Selector
Penempatan CSS
• Kode Perintah-perintah CSS dapat diletakkan dengan 3 cara, yaitu:
• Eksternal CSS  Kode perintah CSS dibuatkan dalam satu file terpisah dari
dokumen HTML yang akan diformat. Dokumen HTML dan Dokumen CSS di
hubungkan dengan tag <link rel=“stylesheet” href=“nama_file.css”>
• Internal CSS  Kode Perinttah CSS dibuatkan dalam satu file yang sama dengan
dokumen HTML yang akan diformat. Dibuatkan di dalam tag <Stlye>……</style>
• Inline CSS  Kode Perintah CSS dibuatkan di dalam atribut tag HTML yang akan di
format. Misal, <p style=“font-color: red; font-size: 14pt; background-color:red;”>
Isi Teks </p>
Eksternal CSS
• Menggunakan Eksternal CSS,
kode program CSS dipisah
dengan dokumen HTML.
• Kode CSS dibuat dalam satu
file terpisah dan diberikan
ekstensi .Css (Misal,
filecss.css)
• Pada Dokumen HTML,
dilakukan pemanggilan file
Css pada bagian head dengan
menggunakan Tag <link> …
</link>
• Selanjutnya, kode CSS siap
untuk dipakai di dokumen
HTML dengan memanggil ID,
Class, atau elemen
Internal CSS
• Kode CSS digabungkan
dengan dokumen HTML
yang akan diatur format
nya.
• Kode CSS di letakkan di
bagian tag <head> …
</head> dengan di apit
oleh tag <style>….
<style>
Inline CSS
• Pada model Inline CSS, kode CSS langsung di pasangkan pada atribut
elemen tag HTML yang akan dibuah formatnya
• Kode Css di letakkan pada Atribut style

<p style="font-size: 14; font-family: Verdana; text-align: right; border-


width: 2px; border-style: solid; border-color:black; border-radius: 5px
5px 5px 5px;"> Ini Menggunakan Inline Style CSS</p>