Pemrograman Web : Cascading Style Sheet (CSS)
Praktikum Pemrograman Web || Modul 3 : Cascading Style Sheet (CSS)
1.
Jelaskan apa yang dimaksud dengan CSS!
CSS (Cascading Style Sheet) adalah
sebuah bahasa yang digunakan untuk mengatur tampilan
elemen yang tertulis dalam bahasa markup, seperti HTML.
2.
Jelaskan 3 cara pemanggilan CSS serta
tuliskan bentuk penggunaannya!
1.
Internal
Internal
CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga
dikenal dengan sebutan Embeded CSS. Tag <style> bisa ditulis di dalam tag
<head>, bisa juga ditulis di dalam tag <body>. Namun kebanyakan
orang menulisnya di dalam <head>.
2.
Eksternal
Eksternal
CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS
ditulis di dalam file khusus yang berekstensi .css.
Untuk
menggunakan CSS ini, kita harus menghubungkannya dengan HTML.
Ada
dua cara yang bisa kita lakukan: Menggunakan tag <link> dan menggunakan
@import
3.
Inline
Inline
CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen
HTML.Kode CSS ditulis langsung tanpa menggunakan kurung kurawal{ ... }.
Kemudian perintah tetap dipisah dengan titik koma. Inline CSS biasanya
digunakan untuk memberikan style pada satu elemen saja.
3.
Jelaskan apa yang dimaksud dengan
selector, declaration, property dan value pada CSS!
-
Selector
Selector adalah bagian dari aturan CSS
yang menentukan elemen HTML mana yang akan diberi gaya. Selector dibagi jadi 3 yaitu
selector Tag, Id, dan Class.
-
Declaration
Declaration terdiri dari dua bagian
yaitu property dan value. Declaration digunakan untuk mendefinisikan gaya yang
akan diterapkan pada elemen yang dipilih oleh selector. biasanya ditandai
dengan kurung kurawal buka ({) dan kurung kurawal tutup (}).
-
Property
Property pada CSS digunakan untuk menambahkan atau mengatur ukuran teks,
jenis font, warna teks, warna background, padding, margin
dan sebagainya.
-
Value
Value adalah nilai yang diberikan kepada
property. Value menentukan bagaimana property akan diterapkan pada elemen yang
telah dipilih.
4.
Jelaskan perbedaan selector tag, class
dan id pada CSS serta berikan contoh penggunaannya!
· Selector
tag, selector yang akan memilih elemen berdasarkan nama tagnya.
Contoh
:
Pada
file html :
<h1>Jenis-Jenis
Selector</h1>
<p>Ini adalah Selector tag<p>
Pada
file CSS :
p
{
color
: red;
}
·
Selector Id, selector yang memilih
berdasarkan id-nya biasanya ditandai dengan (#) didepannya.
Contoh :
Pada file html :
<h1
id="judul">Jenis-Jenis Selector</h1>
<p>Kedua ada selector Id</p>
Pada file CSS :
#judul{
color:
blue;
font-size: 20px;
}
Tampilannya :
· Selector
Class, selector yang memilih elemen berdasarkan nama class yang diberikan.
Selector ini dibuat dengan tanda titik di depannya.
Pada file html :
<h1>Jenis-Jenis
Selector</h1>
<p class="isi">Ketiga dan terakhir ada selector
Class</p>
Pada file CSS :
.isi{
color: blueviolet;
}
Komentar
Posting Komentar