CSS (Cascading Style Sheet)

Oleh ; Tubagus Purworusmiardi

 CSS (Cascading style sheet)
• Adalah bahasa pemrograman yang digunakan untuk
membantu menata tata letak sebuah halaman web.
• Terkadang element yang terpasang di html hanya
mempunyai satu propertis saja, maka dengan bantuan
CSS setiap element di dalam html bisa dimodifikasi.
• Oleh karena itu setiap element yang dibuat dengan CSS
bisa mempunyai sifat inheritance (turunan).
• Pendeklarasian sebuah CSS berada pada hirarki head
pada hirarki HTML.
• Setiap element di dalam CSS mempunyai atribut
masing-masing, misal font-size:10px
 Selectors

• Penulisan element (selector) CSS dalam

HTML ada 3 kelompok :
1.CSS Tag HTML
2.CSS Element id
3.CSS Element class
 Penulisan CSS
1. Embedded style sheet = CSS bisa langsung dituliskan di dalam
head dengan memberikan MIME Type (text/css)
• Contoh :
• <style type=“text/css”>
• ...Content....
• </style
1. External style sheet = CSS juga bisa dibuat diluar file HTML,
dengan (external link).
• Contoh :
• <link rel=“stylesheet” type=“text/css” href=“style.css”>
1. Inline style sheet = CSS juga bisa dibuat satu baris di
• dalam element html.
• Contoh :
• <h1 style=“color:#000000;” >
 FORMAT PENULISAN ELEMENT

• contoh : (selector) dan atribut css

– Body { background:#FFFFF;}
– #wrapper { margin : 0 auto;}
• Dalam setiap penulisan Element diikuti dengan
tanda kurung kurawal.
• Dalam penulisan setiap atribut, cara
penulisannya adalah nama atribut diikuti oleh
tanda titik dua ( : ) kemudian properti atributnya
dan diakhiri dengan semikolon ( ; )
• Penulisan css tag html
• Dalam penulisan CSS tag HTML, adalah cukup
dengan memberikan element pada setiap
element HTML yang akan diberi atribut pada
CSS.
• Contoh :
Body { background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 Penulisan css ELEMENT ID
• Dalam penulisan CSS element div, adalah dengan menambahkan
karakter # (cross) pada setiap pembuatan element.
• Pada pemanggilan di HTML dengan menggunakan id,
<div id=“header”>content</div>
Contoh :
#header {
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 Penulisan css ELEMENT class
• Dalam penulisan CSS element div, adalah dengan
menambahkan karakter . (titik) pada setiap pembuatan
element.
• Pada pemanggilan di HTML dengan menggunakan id,
<div class=“header”>content</div>
Contoh :
.header{
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
 GROUP SELECTOR
• Terkadang di dalam penulisan element
• biasanya mempunyai atribut yang sama pada
setiap element.
• CSS memperbolehkan penulisan atribut secara
bersama-sama pada sebuah grup element.
• Contoh :
– h1, h2, h3, h4 { border:solid red
– 1px; }
 ELEMENT CLASS PADA TABEL
• Dalam pembuatan sebuah tabel, kontruksi dari bentuk
tabel yang terdiri dari kolom-kolom bisa kita modifikasi
dengan menggunakan CSS.

<table class=“aturtabel”>
<tr>
<td>Satu</td> <td>Dua</td>
</tr>
</table>
Dalam CSS:
. aturtabel{ border-collaps:collaps; }
. aturtabel td{ border:red solid 1px; }
 INHERITANCE PADA ELEMENT
(SELECTOR) CSS
• Dalam selector CSS mendukung juga Fungsi inheritance
(turunan), dimana setiap atribut
• element dari sebuah element turunan tidak akan
mempengaruhi sebuah element yang lain.
• Contoh :
• #header h1{color:#000000;}
• h1{color:#123456;}
• Pada baris pertama terdapat element h1yang
merupakan turunan dari id#header .
• Sedangkan h1 pada baris kedua memiliki attribut sendiri
sehingga ketika dijalankan akan menghasilkan 2 element
yang berbeda.
 Atribut padding dan margin
Padding adalah properti yang digunakan untuk membuat jarak antar objek dan isi
objek
Contoh :
padding : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
padding : 2px 2px 2px 2px: ( padding : 2px; )
Border adalah properti yang digunakan untuk memberikan garis pada sebuah konten.
Contoh :
border: 1px solid red; (membuat garis setebal 1px dengan garis penuh dan berwarna
merah)
Margin adalah properti yang digunakan untuk membuat jarak (margin) objek dari layar

Contoh :
margin : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
margin : 2px 2px 2px 2px;
margin : 0 auto; (membuat objek di tengah)
 MODEL KOTAK (BOX model)
• Di dalam pengaturan tata letak sebuah halaman
web site agar terlihat menarik seringkali dikotak-
kotak/di blok dan diletakkan di beberapa bagian
halaman website.
• Pengkotak-kotakan tersebut tidak lepas dari
beberapa blok (blok kotak) yang berisi tentang
bagian-bagian yang akan ditampilkan di
halaman web browser, kotak-kotak tersebut
secara virtual digambarkan ke dalam tata letak
halaman web site.
• Misalnya : kotak untuk header, kotak footer,
kotak isi halaman, kotak kanan atau kotak kiri.
MODEL kotak (BOX MODEL)
 Example

• div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• background-color: lightgrey;
• width: 300px;
• padding: 25px;
• border: 25px solid navy;
• margin: 25px;
• }
• </style>
• </head>
• <body>
• <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
• </body>
• </html>
Pengenalan CSS
 CSS
CSS adalah kumpulan kode program yang digunakan
mendesain atau mempercantik tampilan halaman HTML.
Dengan CSS kita bisa mengubah desain dari text, warna,
gambar dan latar belakang dari (hampir) semua kode tag
HTML.

“HTML for content (struktur), CSS for Presentation

(tampilan)”.
Fungsi CSS
CSS diperlukan karena kebutuhan akan halaman web
yang semakin kompleks. Pada awalnya bisa membuat suatu
paragraf bewarna merah dengan menulis langsung kode
tersebut didalam tag HTML, atau membuat latar belakang
sebuah halaman dengan warna biru. Contoh kode HTML untuk
hal itu adalah sebagai berikut:
Kasus diatas menggunakan tag <font> untuk membuat beberapa kata di dalam
paragraf tersebut berwarna merah. Untuk paragraf dengan jumlah sedikit, tinggal
copy-paste tag <font color=”red”> pada kata-kata tertentu.
Namun jika website tersebut memiliki katakanlah 50 artikel seperti diatas, dan
karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka
akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per
halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk
paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
Dalam contoh CSS diatas, tag <font> diubah menjadi tag <span>. Tag <span> sendiri
merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag
span ditambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk
memasukkan kode CSS pada tag <style> di bagian head.

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS
color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan
otomatis berubah menjadi biru.
 PERTEMUAN CSS

Cara Memasang Kode CSS ke

Halaman HTML
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi
dari halaman.
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam
HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style
Sheets.

1. Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag
HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline
Style CSS adalah sebagai berikut:
 Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari
atribut style ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak
disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak
memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.
2. Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style

Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun
tetap dalam satu halaman HTML. Atribut style yang sebelumnya
berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag
style ini harus berada pada bagian <head> dari halaman HTML.

Contoh penggunaan metode internal style sheets CSS:

 Contoh metode internal style sheets diatas sudah jauh
lebih baik daripada inline style, karena kita sudah memisahkan CSS
dari HTML. Seluruh kode CSS akan berada pada tag head dari
HTML.

Namun kekurangan menggunakan internal style sheets,

jika kita memiliki beberapa halaman dengan style yang sama, maka
kita harus membuat kode CSS pada masing-masing halaman
tersebut. Hal ini dapat diatasi dengan menggunakan metode external
style sheets.
3. Metode External Style Sheets
Metode External Style Sheets digunakan untuk membuat kode CSS
kedalam sebuah file tersendiri yang terpisah dari halaman HTML.
Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file
CSS tersebut.

Simpan dengan nama belajar.css :

Simpan lah pada folder yang sama dengan halaman HTML berikut :
<link rel="stylesheet" href="css/style.css" type="text/css">

keterangan :

<LINK merupakan tag pembuka yang diakhiri dengan tanda kurang dari ">
REL="STYLESHEET", fungsi ini menerangkan bahwa halaman akan di kenal efek
style sheet.
HREF="nama_file.css", di dalam tag ini kita meletakan alamat file dokumen style
sheet yang akan kita panggil.
TYPE="text/css", Menerangkan bahwa file yang akan kita panggil berupa file css
Hasil Output exterstylesheet.html
 PERTEMUAN CSS

Pengertian Selector, Property

dan Value pada CSS
Pengertian Selector CSS

Karena kode CSS digunakan untuk mengubah/memanipulasi

tampilan dari tag HTML, CSS membutuhkan suatu cara untuk
‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML
yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Sesuai dengan namanya, selector digunakan untuk mencari
bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya :
“cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki
atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag
<p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu
sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat
menjadi kompleks tergantung kebutuhannya. Mengenai selector, akan
kita bahas secara lebih detail dalam tutorial-turorial CSS selanjutnya.
Pengertian Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan
diubah dari sebuah tag HTML. CSS memiliki puluhan property
yang dapat digunakan agar menampilkan hasil akhir yang kita
inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag
<p>“, maka property adalah “efek apa yang ingin dimanipulasi
dari tag p tersebut“, seperti ukuran text, warna text, jenis
fontnya, dll.

Pengertian Value CSS

Value CSS adalah nilai dari property. Misalkan untuk property
background-color yang digunakan untuk mengubah warna latar
belakang dari sebuah selector, value atau nilainya dapat berupa
red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada
CSS, dapat dilihat pada gambar dibawah ini:
Selector, Property dan Value ini adalah elemen inti dari CSS
PERTEMUAN CSS

Aturan dan Cara Penulisan

Kode CSS
Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara
lebih mendalam:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan CSS</title>
<style type="text/css">
body {
font-size: 14px;
color: navy;
}
p{
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
</style>

</head>
<body>
<h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>

<h2>Lorem ipsum dolor sit amet</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla erat dolor,.</p>

<h2>Lorem ipsum dolor sit amet</h2>

<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor.</p>

</body>
</html>
Kode HTML di atas memiliki kode CSS pada bagian head yang diinput
menggunakan motode Metode Internal Style Sheets.
body {
font-size: 14px;
color: navy;
}
p{
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}

Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2
adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada contoh selector
terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara
kurung kurawal “{“ dan “}”.
Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-),
contohnya: background-color dan border-left.
Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai
tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa
menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property
tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.
 PERTEMUAN CSS

Part 5: Mengenal Jenis-jenis

Selector Dasar CSS
Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di
dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau
mencari seluruh tag h1 yang memiliki atribut class=judul.

Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini
bertujuan untuk ‘mencari’ semua tag yang ada.
Contoh Universal Selector CSS:

*{
color: blue;
background-color: white;}
}

Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan
background berwarna putih.
Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang
nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan
sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:

h1 {
text-decoration: underline;
}

p{
font-size:14px;
}

Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris
bawah, dan seluruh tag <p> akan berukuran 14pixel.
Efek dari element 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>.
Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling
sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut
class dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang
mempunyai atribut class. Contohnya:

<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class
dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat
dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih
dari 1 class.

Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki atribut

class=”judul penting berwarna”. Tag ini teridiri dari 3 class, yaitu judul, penting,
dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama {
color: red;
}

.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda
titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna
text akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
ID Selector

ID Selector bersama-sama dengan class selector merupakan selector paling

umum dan juga sering dipakai (walau tidak sesering class selector).
Penggunaan ID selector hampir sama dengan class selector, dengan
perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag
HTML, untuk ID selector, kita menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML

<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>

<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk
masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal
tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata
lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak
boleh sama.