CSS

Pendahuluan
CSS singkatan dari Cascading style sheet, dimana kita bisa memberikan warna ukuran,
dan poisi ke dalam element element html yang pernah dibuat. Menurut W3C, CSS adalah
mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman
web. CSS ini memiliki beberapa aturan :
• Aturan yang digunakan untuk menampilkan elemen / tag HTML
• Dibuat terpisah dengan HTML
• Bertujuan untuk memisahkan konten dan style
• 1 CSS dapat digunakan untuk banyak halaman HTML
• 1 halaman HTML dapat terlihat berbeda jika menggunakan CSS yang berbeda pula
Anatomi CSS
Anatominya

Contoh:

Selector
• Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML.
• Elemen HTML dipilih berdasarkan tag, id, class bahkan pola / pattern.
• Semakin kompleks struktur HTML, selector juga bisa semakin kompleks /spesifik
Beberapa referenssi yang menampilkan seluruh jenis property dan value pada css :
• https://developer.mozilla.org/en-US/background-repe docs/Web/CSS/Reference
• http://css-tricks.com/almanac
Beberapa Tag CSS yang dapat digunakan pada file html :
• Embed > <style></style> yang nanti akan ditaruh di bagian tag paling atas (Head)
 • Inline > <p style="color: aqua;"></p>, ini digunakan didalam suatu tag jika hanya ingin
mengubah 1 style tag saja
• Ekternal > <link rel="stylesheet" href="style.css">, ini akan memanggil style css yang
berada pada file css yang terpisah dari file html.
Font Styling
• Font-Family
mengatur jenis font yang akan digunakan

• Font-Size
mengatur ukuran font

• Font-Weight
mengatur ketebalan font

• Font-Variant
mengubah font menjadi small caps
 • Font-Style
mengubah font menjadi bercetak miring

• Line-Height
mengatur spasi antar baris

Short hand Font Style

Text Styling
Property
• Color
memberi warna pada tulisan
 • Text-Align
mengatur format paragraf / teks

• Text-Indent
memberi indentasi pada paragraf / teks

• Text-Decoration
mengatur dekorasi pada teks

• Text-Transform
mengubah jenis huruf menjadi huruf besar, kecil / kapital

• Letter-Spacing
mengatur spasi antar huruf
 • Word-Spacing
mengatur spasi antar kata

CSS Background
Property yang ada pada Background
• Background-Color
mengatur warna pada background
• Background-Image
mengatur gambar yang akan digunakan pada background

Shorthand bg

• Background-Position
mengatur posisi gambar pada background
• Background-Repeat
mengatur jenis pengulangan gambar pada background

CSS Selector
CSS Selector ini digunakan untuk mengenali sebuah elemen html yang akan diberi style
 Ijka ingin memilih propety yang sama bisa memilij koma, jika ingin lebih spesifik maka
gunakan spasi

Pemanggilan Id menggunakan simbol #, pemanggilan Class menggunakan simbol titik (.)

ID
• Sebuah elemen HTML hanya boleh memiliki 1 id
• Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut
• Dapat digunakan sebagai penanda halaman untuk link
• Digunakan juga untuk javascript
• Sebaiknya tidak digunakan untuk CSS (lebih baik gunakan class
Pseudo-Class
kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat
mendefinisikan style pada "keadaan tertentu" dari elemen tersebut., jadi simplenya elemen
class ini dapat aktif hanya dalam keadaan tertentu saja. Pseudoclasss ini terbagi menjadi
beberapa tipe.
pseudo-class yang berhubungan dengan link:
• : link
style default pada sebuah link (a yang memiliki href)
• : hover
style ketika kursor mouse berada diatas sebuah link / elemen
• : active
style ketika sebuah link di-klik (keadaan aktif)
• : visited
style ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakan browser yang
sama)
pseudo-class yang berhubungan dengan posisi elemen (1)
• :first-child
memilih elemen pertama dari sebuah parent (elemen pembungkusnya)
• :last-child
 memilih elemen terakhir dari sebuah parent (elemen pembungkusnya)
• :nth-child(n)
memilih elemen ke-n dari sebuah parent (elemen pembungkusnya).
n bisa berarti urutan (1), (2), atau pola (2n), (3n+2), (4n-1) atau ... ganjil dan genap
(even) & (odd)

pseudo-class yang berhubungan dengan posisi elemen (2) :

• :first-of-type
memilih elemen pertama dari sebuah jenis / tipe tag I
• :last-of-type
memilih elemen terakhir dari sebuah jenis / tipe tag
Inheritance
sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-
nya.

Secara default, elemen <a> tidak mewarisi nilai dari properti color. Jadi solusinya jika ingin
mewarnai linknya, maka harus menambahkan beberapa property lain
Specificcity
Setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut
menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

Studi kasus , pada list ini nasi goreng menjadi favorit makanan dan ingin mennjadi
warna merah, namun karna elemen awal pada css ini menggunakan crash/ id, makan bebannya
lebih berat sehingga nasi goren manjadi warna hijau. Bagaimana solusinya?
• buat elemen yang diinginkan agar menjadi lebih spesifik
• tambahkan beban pada elemen tersebut agar semakin berat
 CSS Layouting
Pendahuluan
CSS Layouting adalah teknik css untuk mengatur dan memposisikan letak element
element html yang sudah dibuat dengan menggunakan syntax CSS.
Display
Ada beberapa hal kecil yang harus diketahui dari tag html, tag pada HTML digunakan
untuk memberikan 'maksud' / 'arti' pada sebuah konten (p untuk paragraf, h1 untuk heading
utama, dll). Tag <div> dan <span> tidak memiliki 'arti' apapun, keduanya digunakan untuk
mengelompokkan tag-tag HTML dan memberikan informasi terhadap tag-tag tersebut. Div
hanya digunakan untuk tempat beberapa tag yang ada di html, sementara span ditempatkan di
dalam element htmlnya, seperti menempatkan span di dalam kalimat yang gunanya untuk
menggaris bawahi suatu pernyataan yang mengandung penekanan.

Setiap tag pada HTML berada di dalam sebuah kotak. properti display pada CSS
mengatur perilaku dari kotak tersebut.
• Inline,
Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat. Lebar
dan tinggi elemennya sebesar konten yang ada di dalamnya, Kita tidak dapat mengatur tinggi
dan lebar dari elemen inline. Margin dan padding hanya mempengaruhi elemen secara
horizontal, tidak vertikal. elemen inlinenya b, strong, i, em, a, span, sub, sup, button, input,
label, select, dan textarea.
• Inline-Block
Inline-Block Tidak ada elemen yang secara default memiliki properti display: inline-
block;, Kita harus ubah secara manual properti tersebut, Perilaku dasarnya sama dengan elemen
inline, Perbedaanya, elemen inline-block dapat kita atur tinggi dan lebar-nya.
 • Block
Management Development ProgramElemen HTML yang secara default
menambahkan baris baru ketika dibuat, Jika tidak diatur lebar-nya, maka lebar default
dari elemen block akan memenuhi lebar dari browser / parent-nya, Kita dapat mengatur
tinggi dan lebar dari elemen block Di dalam elemen block, kita dapat menyimpan tag
dengan elemen inline, inline-block, atau bahkan elemen block lagi. Contoh dari value
block ini adalah h1-h6, p, ol, ul, li, I, form, hr, div.
Syntax emmet ul>li*5>a[href=#]{Link $}
• None
Digunakan unutk menghilangkan sebuah element
Dimention & Overflow
1. Dimensi
Dimensi yang sering digunakan pada layouting ini antara lain width & height. width &
height memiliki jenis value yaitu 1, px, %, in, cm, mm, pt, pc. Untuk pt(point), dan pc(pica)
sering digunakan untuk media cetak printing design yang digunakan untuk mengatur ukuran
dari font.
2. Overflow
Value yang sering digunakan pada overflow ini adalah, visible, auto, hidden, scroll.
• Visible, default dari dimensi
• Auto, ketika kontennya melebihi dimensi, maka akan memunculkan scrolling
content
• Hidden, menyembunyikan konten yang melebihi dimensi
• Scroll, memunculkan scroll meskipun konten yang dimaukan cukup.

3. Box Model
Setiap elemen di halaman berada di dalam sebuah box (kotak). Kita bisa mengatur
ukuran dan posisi kotak tersebut. Kita bisa memberi warna / gambar sebagai background kotak
tersebut. CSS box model mendefinisikan 'kotak' yang dihasilkan I oleh sebuah elemen, lalu
menampilkannya sesuai dengan format visualnya. CSS box model terdiri dari margin, border,
padding dan content.
 • margin
area transparan di sekitar kotak (di luar border) I
• padding
area transparan di dalam kotak (antara content dan border)
• border
batas disekeliling content dan padding
• content
konten sebenarnya di dalam box, bisa berupa teks atau gambar

Box Model Margin

Overlapping Margin
Margin khusus vertical tidak ssasling menambahkan jika ukuran px yang di input lebih kecil
dari margin yang ada di atasnya
Negatif margin akan membuat kotaknya / objeknya ergerak berlawanan arah. Margin auto
adalah margin yang khususs digunakan untuk margin kiri atau kanan.
Margin Shorthand

Bila menggunakan 4 margin, maka lakukan dengan searah jarum jam

10px 20px 30px 40px
10px ata
20 kanan
30 bawah
40px kiri
Bila ingin menggunakan ke empat sisi untuk 1 margin yang sama, gunakanlah 1 margin.

Padding tidak bisa diberi negatif dan tidak isa diberikan Auto

5 px untuk ketealan border

Solid untuk style border
Black untuk warna border

Border juga akan menamah ukuran elemen.

Total Dimensi = Width / Height + Padding + Border.
Hati hati dalma menggunakan Padding dan border pada sebuah elemen, dan haru di
perhitungkan dimensinya
 5 + 50 + 200 +50 +10 = 315
Cara ini agak rumit jadi agar bisa menjadi olusi mudahnya, kita menggunakan ox sizing sebagai
pengatur

Margin Reset digunakan agar seluruh tampilan web berada pada kendali kita. Contohnya
seperti ini

Namun, Hal ini masih terlalu rumit karna harus menambahkan elemen baru pada
selector. Maka dari itu semua elemen yang ada di html bisa digantikan oleh selector Universal*

Namun, Selector inipun masih kurang aik unturk digunakan karena memerikan margin
dan padding ke seluruh elemen html meskipun tidak digunakan
Float
Float merupakan properti pada CSS untuk mengatur posisi sebuah elemen. Sebuah
elemen dapat dipaksa untuk berada di sebelah kiri atau kanan dari parent/pembungkusnya
dengan menggunakan properti ini. Value yang dimiliki float adalah left, Right, dan
none(default).
Ada sesuatu yang disebut dengan Normal Flow dan Out of flow, apakah itu?
Sebelumnya, jika pada suatu elemnnya inline dan block itu masuknya kedalam normal flow,
kita bisa menggunakannya dibagian kiri dan kanan. Nah untuk float ini adalah tipe dari out of
flow. Tipe float ini nanit akan keluar dari bagian pembungkus awal.
yang bisa dilakukan menggunakan properti float
• Text Wrapping
 membuat teks mengelilingi gambar / elemen lain
• Image Gallery
membuat serangkaian gambar menjadi galeri
• Multi-Column Layout
membuat halaman memiliki beberapa kolom
• Dll
dan masih banyak lagi

Cara menghentikan / membersihkan float

• menggunakan property overflow 0
• menggunakan <div> kosong
• menggunakan teknik micro clearfix

CSS Position
Value yang bisa kita gunakan pada property position ini adalah static, relative, absolute,
dan fixed.
Static
Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti position.
Menggunakan position selain static (non-static), akan membuat sebuah elemen menjadi seolah-
olah berbeda dimensi dari elemen lainnya. Elemen yang diberi position selain static dapat
menggunakan properti top, left, bottom dan right untuk mengatur posisinya
Relative
Relative adalah sebuah value dimana ketika menggunakannya maka otomatis elemen
yang kita gunakan akan berpindah ke ruang dimensi depannya dan ruang sebelumnya tidak
menhilang, maka elemen yang sudah menggunakan relative bisa kita rubah segala posisinya
mulai dari top, left, right maupun bottom tanpa mengubah posisi elemen lain. Ketika kita
menggerakkan elemen dengan posisi relative (menggunakan properti top, left, bottom dan
right), ruang yang ditempati oleh elemen tersebut masih ada. Ketika kita menggerakkan elemen
dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nya. Jika kita
memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya
Absoulte
Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top,
left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada. Ketika
kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi
dari elemen parent-nya, selama elemen parentnya memiliki posisi yang juga non static.

Fixed
Ketika kita menggunakan top left buttom right, maka element yang digunkanan akan
relative mengikuti layar windows, meksipun di scroll ke bawah , element yang menggunakan
position fixed tidak akan berpindah tempat

Text-indent
Text indet digunakan untuk mengindentasi teks agar tidak terlihat oleh tampilan layar,