Selector (Property: Value) : P (Font-Family: "Sans Serif")
Selector (Property: Value) : P (Font-Family: "Sans Serif")
NAMA :
KELAS :
TANGGAL PRAKTIKUM :
A. TUJUAN
1. Siswa dapat mengenal, memahami penggunaan groupping, class dan id pada CSS.
2. Siswa dapat mengimplementasikan groupping, class dan id pada halaman web.
B. PENDAHULUAN
1). Syntax CSS
Syntax pada CSS terdiri dari tiga bagian, yaitu selector, property dan value.
Bagian selector untuk menentukan pada elemen/tag HTML apa style tersebut diterapkan. Selector
dapat berupa nama id elemen atau nama class. Property dapat diisi dengan jenis warna, ukuran,
perataan margin dll, sedangkan value diisi dengan nilai dari property nya, misalnya red untuk warna dll.
Setiap akhir penulisan property dan value diakhiri dengan tanda titik koma (semicolon). Tanda ini juga
digunakan sebagai pemisah antar satu property dengan property lain.
Selector
h1 {color:red;}
Property Value
Jika value lebih dari sebuah kata, maka harus diapit dengan tanda kutip ganda diantara value:
Jika Anda ingin menetapkan lebih dari satu property, maka property harus dipisahkan dengan titik
koma (semicolon). Berikut ini adalah contoh yang menampilkan pendefinisian elemen paragraph agar
rata tengah serta warna text nya adalah merah:
p{text-align:center;color:red}
Agar definisi style lebih mudah dibaca, maka kita dapat menuliskannya dengan bentuk berikut:
p{
text-align: center;
color: black;
font-family: arial
}
2). Groupping
Kita dapat mengelompokkan selector, pisahkan tiap selector dengan sebuah koma. Berikut ini adalah
contoh pengelompokkan element header yang memiliki style warna text yang sama:
h1,h2,h3,h4,h5,h6 {
color: green;
}
Praktikum Dasar Web
.namaKelas{
Property1: value1;
Property2: value2;
.
.
}
Misalnya kita ingin mendefinisikan dua buah tipe paragraph yaitu paragraph dengan rata kanan,
sedang yang lainnya adalah rata tengah. Berikut bentuk penulisannya:
Pada contoh dibawah ini, semua elemen HTML dengan class="center", akan menjadikan rata tengah.
Pada dokumen HTML dibawah, elemen h1 dan elemen p menggunakan class "center", artinya kedua
elemen tersebut akan mengikuti aturan pada selector “center”:
Note: Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
Misalnya, dalam HTML terdapat empat buah <div>, tetapi hanya <div> pertama hendak dibuat berbeda
dari ketiga <div> yang lain, Implementasinya sebagai berikut :
<html>
<head>
<title>Jangan Menyerah</title>
<style type=”text/css”>
.judul {
background-color : green;
color : yellow;
}
.tubuh{
background-color : blue;
color : white;
}
<style>
</head>
<body>
<div> class=”judul”>
<p>Penggalan lirik : Jangan Menyerah</p>
<p>(D’Masiv)</p>
</div>
<div> class=”tubuh”>
<p>Tak ada manusia </p>
<p>Yang terlahir sempurna</p>
<p>Jangan kau sesali</p>
<p>Segala yang telah terjadi</p>
</div>
<div> class=”tubuh”>
<p>Kita pasti pernah </p>
<p>Dapatkan cobaan yang berat</p>
<p>Seakan hidup ini</p>
<p>Takada artinya lagi</p>
</div>
<div> class=”tubuh”>
<p>Reff. 1: </p>
<p>Syukuri apa yang ada</p>
<p>Hidup adalah anugerah</p>
<p>Tetap jalani hidup ini</p>
<p>Melakukanyang terbaik</p>
<p>……</p>
</div>
</body>
</html>
Perhatikan, tag <div> pertama menyertakan atribut class yang diisi dengan “judul”, sedangkan tiga <div> yang
lain menggunakan nilai berupa “tubuh” untuk atribut class. Hal inilah yang membedakan antara <div> pertama
dengan tiga <div> yang lain.
Selektor kelas diawali dengan tanda titik (.)
Perhatikan bahwa hanya “divisi 2” yang diberi latar belakang, ini karena kode div.liga { background-color : blue;}
Selektor div.liga berarti div yang mengandung kelas”liga”
Dengan demikian yang tidak terletak dalam elemen div tidak ikut diberi latar belakang
Namun efek .liga { color : gray; } berlaku untuk semua yang berkelas “liga”
Sebuah elemen bisa mempunyai lebih dari satu kelas, didalam atribut class, nama-nama kelas dipisahkan oleh
spasi, contoh :
<html>
<head>
<title>Selektor 2 Kelas</title>
<style type=”text/css”>
.umum {
color : yellow;
}
.khusus {
background-color : blue;
}
<style>
</head>
<body>
<div class = “umum khusus”>Umum, ya. Khusus, ya.</div>
</body>
</html>
pada contoh diatas bahwa elemen div tersebut mempunyai dua buah kelas, yaitu “umum” dan “khusus”, kedua
nama kelas dipisahkan dengan spasi
4). Id Selector
Kita juga dapat mendefinisikan style dengan menggunakan id selector. Id selector didefiniskan dengan
menggunakan karakter #. Berikut adalah contoh penggunaan id selector:
#green {color: green}
Aturan style dibawah ini akan diterapkan pada elemen p yang menggunakan id dengan value adalah
“para1”:
p#para1 {
text-align: center;
color: red
}
Selektor ID berguna untuk mengatur elemen yang mempunyai ID tertentu. Atribut ID bisa dikenakan pada
suatu elemen dengan bentuk seperti berikut
Sebuah ID dapat dipakai untuk mendapatkan sebuah elemen secara unik, hal ini berbeda dengan class,
sebagaimana diketahui, beberapa elemen boleh memiliki kelas yang sama
<html>
<head>
<style type="text/css">
#green{
color:green
}
p#para1{
text-align:center;
color:red
}
</style>
</head>
<body>
<h2 id="green">Ini heading 2</h2>
<p>Ini paragraph 1 yang tidak menggunakan id "para1". Ini paragraph 1 yang tidak menggunakan id "para1".
Ini paragraph 1 yang tidak menggunakan id "para1".</p>
<p id="para1">Ini paragraph 2 yang menggunakan id "para1". Ini paragraph 2 yang menggunakan id "para1".
Ini paragraph 2 yang menggunakan id "para1".</p>
</body>
</html>
<html>
<head>
<title>Selektor ID</title>
<style type=”text/css”>
.isi {
background-color : green;
}
#bagian1 {
text-align : left ;
color : white ;
}
#bagian2 {
text-align : right ;
color : yellow ;
}
<style>
</head>
<body>
<h1>Pantun</h1>
<div id = “bagian1” class = “isi”>
<p>Jalan-jalan ke hutan purba</p>
<p>Dapat buah enak rasanya</p>
<p>Pelan-pelan selalu mencoba</p>
<p>Pengetahuan pun bertambah tanpa terasa</p>
</div>
<div id = “bagian2” class = “isi”>
<p>Semangka erat diikat</p>
<p>Memang bisa banyak membawanya</p>
<p>Semangat yang kuat</p>
<p>membawa hasil yang sangat berharga</p>
</div>
</body>
</html>
<html>
<head>
<title>Selektor Universal</title>
<style type=”text/css”>
*{
color : blue ;
}
<style>
</head>
<body>
<h1>Selektor Universal</h1>
<p>Paragraf</p>
<div>Divisi</div>
</body>
</html>
Bila dokumen tersebut dipanggil, semua teks baik dalam <h1>, <p> maupun <div> berwarna biru
Contoh kode diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tah <p> akan
berukuran 14 pixel
Efek dari elemen type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag
<i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>
C. PRAKTIKUM
Ketentuan Praktikum:
1. Ketik dokumen halaman web pada Notepad
2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan.
h1,h2,h3{
font-family:verdana;
color:green
h4,h5,h6{
font-family:arial;
color:red
}
</style>
</head>
<body>
<h1>Ini adalah Heading 1</h1>
<h2>Ini adalah Heading 2</h2>
<h3>Ini adalah Heading 3</h3>
<h4>Ini adalah Heading 4</h4>
<h5>Ini adalah Heading 5</h5>
<h6>Ini adalah Heading 6</h6>
</body>
</html>
p.kanan{
text-align: right;
}
p.kiri{
text-align: left;
}
</style>
</head>
<body>
<p class="kanan">Paragraf ini memakai right alignment </p>
<p class="kiri">Paragraf ini memakai left alignment </p>
</body>
</html>
<body>
<h1 id=”kanan”>Judul ini memakai right alignment</h1>
<p id=”kanan”>Paragraf ini memakai right alignment</p>
</body>
</html>
B. <html>
<head>
<title>Belajar CSS-Menggunakan ID[2]</title>
<style type="text/css">
p{
color: #FFFFFF;
font-family: arial;
background: #00FF00;
font-size:"16pt";
font-weight: bold
}
p.group{
color: yellow;
font-family: verdana;
font-size:"12pt";
font-weight: normal;
background: #0000FF
}
p#one{
color: #00FF00;
background: #FFFFFF
}
</style>
</head>
<body>
<p class="group" >Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
</p>
<p id="one" >Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
</p>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 8
Praktikum Dasar Web
SOAL LATIHAN
1. Perhatikan dokumen berikut
<html>
<head>
<title>Selektor</title>
<style type=”text/css”>
.biru {
Color : green ;
}
</head>
<body>
<div>Biarkan aku seperti ini</div>
<div class=”hijau”>
Hijaulah negeriku. Ijo royo-royo !
</div>
</body>
</html>
Sebenarnya dokumen tersebut dimaksudkan untuk menampilkan semua tulisan yang berada dalam <div class=”hijau”> agar
berwarna hijau. Namun, kalau kalian mencoba menjalankannya maka warnanya tetap hitam. Di mana kesalahannya ? Cobalah
untuk memperbaikinya supaya sesuai dengan yang dikehendaki
Diberi warna biru, sedangkan yang lain hijau? Cobalah dengan menuliskan dokumen HTML beserta kode CSS-nya