PEMROGRAMAN BERBASIS WEB

STRUKTUR &
ATURAN PENULISAN CSS
M. ADNAN NUR, S.KOM., MT.
Cascading Style Sheet (CSS)
 Digunakan untuk mendeskripsikan dan mengontrol style dari
elemen HTML
 CSS ini telah distandarkan oleh World Wide Web Consortium
(W3C) untuk digunakan di web browser
 CSS bukanlah keharusan dalam membuat web, namun
menggunakan CSS akan membuat tampilan web jauh lebih
menarik
Struktur CSS
 Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration

 Selector berfungsi untuk memberi tahu browser bahwa pada elemen

mana rule CSS diterapkan
 Selector dapat berupa elemen HTML, selector class dan selector id
 Declaration merupakan aturan CSS yang diterapkan, terdiri atas property
dan value
 Untuk Inline Style, declaration langsung ditempatkan pada tag HTMLnya
tanpa menggunakan Selector
 Untuk Komentar /* ….. */
Satuan Untuk Value Property berupa Angka

 em atau rem (root em), satuan nilai terhadap teks. Satuan ini dihitung berdasarkan
ukuran teks umum (tag Body). Standar ukuran 1 em jika tidak terdapat ukuran umum
adalah 16px. em bergantung pada font-size dari elemen induk sedangkan rem tidak.
 %, digunakan untuk menentukan ukuran berdasarkan persentase terhadap ukuran
elemen induknya.
 px (pixel), menentukan ukuran yang bersifat pixel (layar monitor).
 vw atau vh satuan ini biasa disebut dengan view port yang responsif. Penggunaannya
mirip dengan %. Satuan ini bergantung pada induk elemennya, jika induk lemen
misalnya mempunyai ukuran 240px x 320px maka 10vh adalah 240*10/100 = 24px.
 vmin atau vmax, satuan ini mirip dengan vw dan vh, bedanya jika ditentukan 100vmin
maka satuan ini akan bergantung pada induk ukuran terendah. Misalnya ukuran elemen
induknya 240px x 320px, kemudian ditentukan height = 100vmin, maka height=240px.
Sebaliknya jika height=100vmax maka height=320px.
 ex atau ch, satuan ini mirip dengan em namun1ex/ch = 8px dan satuan ini tidak hanya
bergantung pada font-size namun bergantung juga pada font-family agar ukurannya
lebih spesifik.
Font & Text Property
Terdapat beberapa property untuk mengatur font/text diantaranya:
 font-style, nilainya: normal | italic | oblique
 font-variant, nilainya: normal | small-caps
 font-weight, nilainya: normal | bold | bolder | lighter | 100 | 200 | 300 | .. | 900
 font-size, nilainya: angka dalam satuan px atau em
 font-family, nilainya: jenis font
 font, nilainya terdiri atas : [font-style] [font-variant] [font-weight] [font-style]/[line-
height] [font-family]
 text-align, nilainya : left | right | center | justify | initial | inherit
 text-decotation-line, nilainya : none | underline | overline | line-trought | initial |
inherit
 text-transform, nilainya : none|capitalize|uppercase|lowercase|initial|inherit
 text-shadow, nilainya: h-shadow v-shadow blur-radius color|none|initial|inherit
Color & Background Property
Berikut beberapa property untuk mengatur color & background:
 color, digunakan untuk memberi warna pada text. terdapat 4 cara untuk
menuliskan warna dalam RGB yaitu :
a. Dalam 6 nilai hexadecimal #RRGGBB, contoh warna merah : #FF0000
b. Dalam 3 nilai hexadecimal #RGB, contoh warna biru : #0000FF
c. rgb(X,X,X) dimana X bernilai 0 hingga 255, contoh warna merah rgb(255,0,0)
d. rgb(Y%,Y%,Y%) dimana Y dalam range 0-100
 background-color, berisi nilai warna
 background-image, nilainya: url(“lokasi gambar”)
 background-repeat, nilainya: repeat | repeat-x | repeat-y | no-repeat | initial |
inherit
 background-attachment, nilainya: scroll | fixed | local | initial | inherit
 background-position, nilainya : [left|right|center] [top|center|bottom] | x% y% |
initial | inherit
 background-size, nilainya : auto | [width height] | cover | contain | initial | inherit
 background, nilainya : [background-color] [background-image] [background-
repeat] [background-attachment] [background-position]
 Border, Padding & Margin Property
Terdapat beberapa property untuk mengatur border, paddig dan margin diantaranya:
 border-[top|bottom|left|right]-style, nilainya: none | hidden | dotted | dashed |
solid | double | groove | ridge | inset | outset | initial | inherit
 border-color, nilainya: [color] | transparent | initial | inherit
 border-width, nilainya: medium | thin | thick| [value] | initial | inherit
 border-[top-left|top-rigt|bottom-left|bottom-right]-radius, nilainya: [nilai radius
dalam px/%] | initial | inherit
 border, nilainya: [border-width] [border-style] [border-color|initial|inherit]
 margin-[top|bottom|left|right], nilainya: [angka dalam satuan px atau %] | auto |
initial | inherit
 padding-[top|bottom|left|right], nilainya: [angka dalam satuan px atau %] | auto
| initial | inherit
Property Lainnya
Terdapat banyak property lainnya untuk mengatur style pada halaman web. Berikut
beberapa referensi property CSS :
https://www.w3schools.com/cssref/default.asp
https://www.w3bai.com/id/cssref/default.html
Struktur Penulisan CSS
 Inline Style
Dengan menambahkan langsung declaration CSS ke dalam elemen HTML melalui
attibut style
Contoh: Hasil :

Menuliskan secara langsung deklarasi CSS pada

Tag <P>
 Internal Style
Menggunakan tag <style>. Kode CSS diletakkan diantara tag <head> dari
dokumen HTML.
Contoh: Hasil :

Menempatkan perintah CSS pada tag <head>

 External Style
Perintah CSS ditempatkan pada file terpisah yang disimpan menggunakan
extension css. Untuk menghubungkannya dengan file HTML menggunakan tag
<link>
Contoh:
Contoh.html Style.css

Hasil :
Pemanggilan file style.css
Selector Class
 Penamaan Class Selector dapat ditentukan sendiri dengan mengikuti
aturan nama class yaitu hanya bisa ditulis dengan huruf, angka, tanda
penghubung (-) dan garis bawah (_). Nama Class tidak boleh diawali angka
 Penamaan Class Selector diawali dengan menambahkan tanda ‘ . ’ (titik)
pada selector
 Pada elemen HTML yang ingin menerapkan perintah css maka
ditambahkan property ‘class’ untuk memanggil selector tersebut.
 Satu elemen HTML dapat memanggil lebih dari satu class
Contoh: Hasil :

Class Selector

Pada tag ini menggunakan

2 selector class
Selector ID
 Penamaan ID Selector dapat ditentukan sendiri dengan mengikuti aturan
nama ID yang hanya bisa ditulis dengan huruf, angka, tanda penghubung (-
) dan garis bawah (_). Nama ID tidak boleh diawali angka
 Diawali dengan menambahkan tanda ‘#’ pada selector
 Pada elemen HTML ditambahkan property ‘id‘ untuk memanggil selector
tersebut
 Satu elemen HTML hanya boleh menggunakan satu ID
 ID selector dapat juga digunakan sebagai link untuk menuju ke elemen
html yang memiliki ID tersebut
Contoh: Hasil :

Pada tag ini menggunakan

ID Selector 2 selector ID, namun ketika
ditampilkan pada browser hasilnya
tidak sesuai karena 1 tag hanya
boleh menggunakan 1 ID selector
Grouping Selector
Untuk mempersingkat penulisan, CSS juga memungkinkan untuk melakukan grouping pada
selector yang memiliki property yang sama dengan menggunakan simbol koma ‘,’ sebagai
pemisah selector

Contoh : Hasil :

Grouping selector dengan

declaration CSS yang sama
Selector Bersarang
Selector bersarang memungkinkan penentuan style pada sebuah elemen secara spesifik dengan
menuliskan urutan selector dari induk elemen hingga ke elemen yang diberikan style
menggunakan pemisah ‘>’

Contoh : Hasil :

Tag ‘Link 1’ memenuhi ketentuan

selector bersarang ‘p>a’ karena berada dalam
Tag <p><a> sehingga menampilkan style
yang berbeda dengan ‘Link 2’
Selector Kombinasi
Selain menggunakan simbol ‘>’, terdapat pula kombinasi selector lain yaitu:

Selector Contoh Keterangan

Elemen [spasi] elemen pa Berlaku untuk semua elemen <a> dalam elemen <p>
Elemen > elemen p>a Berlaku untuk semua elemen <a> yang induk elemennya
adalah <p>
Elemen + elemen p+a Berlaku untuk 1 elemen <a> yang ditempatkan langsung
setelah elemen <p>. Contoh: <p>text 1</p><a>link 1</a>
Elemen ~ elemen p~a Berlaku untuk semua elemen <a> yang ditempatkan setelah
elemen <p>.
Contoh: <p>text 1</p><a>link 1</a><a>link 2</a>…
Pseudo Classes
Digunakan untuk memberikan style terhadap keadaan tertentu suatu elemen misalkan style
untuk link yang disorot oleh mouse, style untuk input dalam keadaan focus dan lain-lain. Berikut
beberapa pseudo classes yang umum digunakan:

Selector Keterangan
elemen:link Keadaan Link Awal
elemen:visited Keadaan Link setelah dikunjungi
elemen:active Keadaan Link jika sedang aktif
elemen:hover Keadaan Link jika didekati mouse
elemen:focus Keadaan Link jika sedang aktif

Terdapat pula pseudo classes lain yang dapat dilihat di

https://www.w3schools.com/css/css_pseudo_classes.asp
Contoh: Hasil :

Style yang diberikan ketika elemen

disorot oleh mouse
Pseudo Element
Digunakan untuk menata bagian-bagian tertentu dari suatu elemen misalkan penyisipan konten
sebelum atau setelah elemen. Berikut Pseudo Element :

Selector Keterangan
elemen::after Menyisipkan konten setelah konten dari elemen
elemen::before Menyisipkan konten sebelum konten dari elemen
elemen::first-letter Memberikan style pada huruf pertama dari elemen
elemen::first-line Memberikan style pada baris pertama dari elemen
Contoh:
Menampilkan text ‘Desc :’ pada bagian awal

Menampilkan text ‘#css’ pada bagian akhir

Baris pertama berwarna kuning

Huruf pertama berwarna merah tebal

dan berwarna merah

Hasil :
Selector Attribute Element
Digunakan untuk memberikan style pada element secara spesifik berdasarkan attributnya. Bentuk
selectornya :
elemen[attribut] atau elemen[attribut=“nilai attribut”]

Contoh : Hasil :
Media Query
 Media Query merupakan salah satu fitur dari CSS3 yang memungkinkan untuk
menentukan kapan deklarasi css diterapkan. (Khususnya jika menggunakan
browser perangkat mobile)
 Penerapan Media Queries

@media screen and (max-width: 768px){

/* perintah css */
}
@media screen and (max-width: 320px){
/* perintah css */
}
@media screen and (max-width: 240px){
/* perintah css */
}

Untuk property max-width dapat diganti dengan min-width, min-height, max-

height, orientation=portrait atau orientation=landscape
Contoh: Hasil untuk ukuran browser > 768px:

Hasil untuk ukuran browser < 768px:

LANJUT KE MATERI BERIKUTNYA