Scribd
Unggah
59 tayangan16 halaman

Pertemuan 4 - CSS (Cascading Style Sheet)

Dokumen tersebut membahas pengertian CSS (Cascading Style Sheet) dan cara penulisan CSS untuk mengatur tampilan halaman website. CSS digunakan untuk mengatur format teks, warna, tata letak, dan lainnya. Terdapat beberapa cara penulisan CSS yaitu eksternal, internal, dan inline CSS. Selector seperti element, class, dan ID digunakan untuk menentukan bagian mana yang akan diatur stylenya.

Diunggah oleh

Jimmi Sitorus
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
59 tayangan16 halaman

Pertemuan 4 - CSS (Cascading Style Sheet)

Dokumen tersebut membahas pengertian CSS (Cascading Style Sheet) dan cara penulisan CSS untuk mengatur tampilan halaman website. CSS digunakan untuk mengatur format teks, warna, tata letak, dan lainnya. Terdapat beberapa cara penulisan CSS yaitu eksternal, internal, dan inline CSS. Selector seperti element, class, dan ID digunakan untuk menentukan bagian mana yang akan diatur stylenya.

Diunggah oleh

Jimmi Sitorus
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/ 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>

Anda mungkin juga menyukai