CSS. Rangga Gelar G M.Kom. Bisnis Digital UPI

(1)

CSS

Rangga Gelar G M.Kom.

Bisnis Digital UPI

(2)

{ CSS }

Cascading Style Sheet

(3)

“ mekanisme sederhana

yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web. ”

http://www.w3.org/style/CSS

(4)

Sebelum CSS :

<font color =“blue” face=arial><center><h1>Hello World</h1></center></font>

(5)

Dengan CSS :

<h1>Hello World</h1>

(6)

Cascading Style Sheet

• Aturan yang digunakan untuk mengatur tampilan 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

(7)

(8)

(9)

{ CSS }

Anatomi CSS

(10)

selector { property: value; }

(11)

h1{ color: blue; }

(12)

h1{

font-family: Arial;

text-align: center;

font-size: 30px;

color: blue;

}

(13)

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

(14)

h1{ color: blue; }

CSS, pilih seluruh elemen h1 pada HTML, lalu ubah teks didalamnya

menjadi berwarna biru.

(15)

Property & Value

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

• http://css-tricks.com/almanac

(16)

{ CSS }

Penempatan CSS

(17)

Menempatkan CSS

• embed

<style></style>

• inline

<p style=“color: blue;”> .. </p>

• external

<link rel=“stylesheet” href=“style.css”>

(18)

{ CSS }

Text & Font styling

(19)

Font

• font-family

• font-size

• font-weight

• font-variant

• font-style

• font-height

(20)

font-family

Nama font

Generic font

(21)

font-size

px

%

em

(22)

font-weight

lighter normal 100-900

bold

bolder

(23)

font-variant

normal

small-caps

(24)

font-style

normal

italic

oblique

(25)

line-heigth

normal

px

em

(26)

Text

• color

• text-align

• text-indent

• text-decoration

• text-transform

• letter-spacing

• word-spacing

(27)

color

nama warna (red, gold, … )

hexadecimal (#ff0000, #20baa, … )

rgb(255,0,0), rgb(12,142,98), …

(28)

text-align

left right center

justify

(29)

text-indent

px

%

(30)

text-decoration

none underline

overline

line-through

(31)

text-transform

none lowercase uppercase

capitalize

(32)

letter-spacing

normal

px

(33)

word-spacing

normal

px

(34)

{ CSS }

Background

(35)

Background

• background-color

• background-image

• background-position

• background-repeat

(36)

background-position

top left top center

top right center left center center

center right bottom left bottom center

bottom right x% y%

x-pos y-pos

(37)

{ CSS }

Selector

(38)

“ digunakan pada CSS untuk mengenali sebuah elemen

HTML yang akan diberi style. ”

http://www.w3schools.com/cssref/css_selector.asp

(39)

selectors

elemen HTML id

class

complex selector

(40)

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)

(41)

{ CSS }

Pseudo - Class

(42)

“ kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada ’keadaan

tertentu’ dari elemen tersebut. ”

http://www.w3schools.com/cssref/css_pseudo_classes.asp

(43)

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)

(44)

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), …

(45)

Pseudo-class yang berhubungan dengan posisi elemen (2)

• first-of-type

memilih elemen pertama dari sebuah jenis / tipe tag

• last-of-type

memilih elemen terakhir dari sebuah jenis / tipe tag

• nth-of-type (n)

memilih elemen ke-n dari sebuah jenis / tipe tag. n bisa berarti urutan (1), (2),

…

(46)

{ CSS }

Inheritance (Pewarisan)

(47)

“ sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen

parent-nya. ”

http://www.w3.org/TR/CSS21/cascade.html#inheritance

(48)

Properti yang diwariskan

color font

letter-spacing line-height

list-style text-align text-indent text-transform

visibility

white-space

(49)

{ CSS }

Specificity

(50)

“ setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut

menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector. ”

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

(51)

inline id class elemen

0 0 0 0

ul#hobi li = 102 .favorit = 10

ul#hobi li.favorit = 112

(52)

CSS Layout

(53)

{ CSS }

Display

(54)

<div> & <span>

(55)

“ tag pada HTML digunakan untuk memberikan ‘maksud’/’arti’ pada sebuah konten. ”

“ Tag <div> & <span> tidak

memiliki ‘arti’ apapun, keduanya digunakan untuk

mengelompokkan tag-tag HTML dan memberikan informasi pada tag-tag tersebut. ”

http://www.htmldog.com/guides/html/intermediate/spandiv/

(56)

Hubungannya dengan Display ?

(57)

Keduanya memiliki property display.

Default dari value display-nya adalah:

div {

display: block;

} span {

display: inline;

{

(58)

“ setiap tag pada HTML berada di dalam sebuah kotak. Properti

display pada CSS mengatur perilaku dari kotak tersebut.”

“setiap tag pada HTML memiliki

nilai default untuk properti display.

Tetapi kita juga dapat mengubah perilaku dari tag tersebut dengan mengganti value-nya.”

http://www.css-tricks.com/almanac/properties/d/display/

(59)

display

• inline

• inline-block

• block

• none

(60)

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

(61)

elemen inline

b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea, …

http://www.developer.mozilla.org/en-US/docs/Web/HTML/inline_elemente

(62)

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

• Perbedaannya, elemen inline-block dapat kita atur tinggi dan lebar-

nya

(63)

block

• Elemen 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

(64)

elemen block

h1-h6, p, ol, ul, li, form, hr, div

http://www.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

(65)

box model ^CSS

(66)

• 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

http://css-tricks.com/the-css-box-model/

“

(67)

Google Chrome : * { border: 1px solid red }

(68)

Mozilla Firefox : 3D View

(69)

CSS box model mendefinisikan ‘kotak’ yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai

dengan format visualnya.

http://www.w3.org/TR/CSS2/box.html

“

(70)

http://www.w3schools.com/css/css_boxmodel.asp

CSS box model terdiri dari margin , border, padding dan content.

“

(71)

http://www.w3schools.com/css/css_boxmodel.asp

(72)

CSS Box Model

margin

area transparan di sekitar kotak (di luar border)

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

(73)

properti untuk margin, padding & border

margin-top margin-right margin-bottom margin-left margin

padding-top padding-right padding-bottom padding-left padding

border-top

border-right

border-bottom

border-left

border

(74)

margin

(75)

margin

(boleh negatif)

px

%

auto

(76)

HTML

CSS

(77)

CSS

50px

50px

50px

(78)

CSS

auto

100px

auto

100px auto akan membuat elemen berada di tengah

(79)

CSS

auto

50px

auto

25px

(80)

CSS

20px

50px

40px

30px

(81)

box model

padding

(82)

padding

tidak boleh negatif

px

%

(83)

CSS

^50px ^20px_40px ^30px

(84)

box model

border

(85)

border

widt h

style

color

(86)

border : width style color ;

(87)

border : 3px solid black ;

(88)

style

(89)

box model

box sizing

(90)

total width dan height element

width + padding + border height +

atau

padding + border

(91)

box-sizing

solusi agar padding dan border tidak mempengaruhi width

(92)

display

CSS

(93)

<div> & <span>

(94)

Tag <div> dan <span> tidak memiliki ‘arti’ apapun, keduanya digunakan untuk mengelompokkan tag-tag HTML dan memberikan informasi terhadap tag-tag

tersebut.

http://htmldog.com/guides/html/intermediate/spandiv/

tag pada HTML digunakan untuk memberikan

‘maksud’ / ‘arti’ pada sebuah konten

⁽

_p

untuk paragraf,

h1

untuk heading utama, dll)

.

“

(95)

<div>

(96)

(97)

(98)

<span>

(99)

(100)

hubungannya dengan

display?

(101)

(102)

(103)

CSS display

(104)

https://css-tricks.com/almanac/properties/d/display/

setiap tag pada HTML berada di dalam sebuah kotak. properti display pada CSS mengatur perilaku dari kotak tersebut.

“

(105)

https://developer.mozilla.org/en-US/docs/Web/CSS/display

kita juga dapat mengubah perilaku dari tag tersebut dengan mengganti value-

“ nya.

(106)

display

inline

inline-block block

none

(107)

display

inline

Inline-block block

none

(108)

inline

(109)

inline

•Elemen HTML yang secara default tidak menambahkan baris baru ketikadibuat

(110)

inline

•

Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya

(111)

inline

•

•Kita tidak dapat mengatur tinggi dan lebar dari elemen inline

(112)

inline

•

•Kita tidak dapat mengatur tinggi dan lebar dari elemen inline

•

Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal

(113)

elemen inline

b, strong, i, em, a, span, sub, sup,

button, input, label, select, textarea,

…

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

(114)

(115)

(116)

(117)

Tidak terpengaruh oleh width dan height

(118)

inline-block

(119)

inline-block

•Tidak ada elemen yang secara default memiliki properti display: inline-block;

(120)

inline-block

•Kita harus ubah secara manual properti tersebut

(121)

inline-block

•

Perilaku dasarnya sama dengan elemen inline

(122)

inline-block

•

Perilaku dasarnya sama dengan elemen inline

•Perbedaanya, elemen inline-block dapat kita atur tinggi dan lebar-nya

(123)

(124)

Terpengaruh oleh width dan height

(125)

block

(126)

block

•Elemen HTML yang secara default menambahkan baris baru ketikadibuat

(127)

block

•Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya

(128)

block

•Kita dapat mengatur tinggi dan lebar dari elemen block

(129)

block

•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

(130)

elemen block

• h1-h6, p, ol, ul, li form, hr, div,

• …

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

(131)

(132)

none

Digunakan untuk menghilangkan sebuah elemen

(133)

none

(134)

none

(135)

mengubah display

(136)

(137)

defaultnya block

(138)

defaultnya block Berubah menjadi inline

(139)

Dimensi &Overflow

CSS

(140)

dimensi

CSS

(141)

(142)

dimensi pada CSS

width

height

(143)

width & height

• px

• %

• in, cm, mm, pt, pc

(144)

(145)

80% terhadap lebar body

(146)

tetap 80% terhadap lebar body

(147)

bagaimana jika dimensi dari <div>

lebih kecil daripada

konten di dalamnya ?

(148)

(149)

solusi?

(150)

overflow

CSS

(151)

overflow

visible auto hidden

scroll

(152)

visible

nilai default: konten akan keluar jika tidak cukup

(153)

auto

akan memunculkan scroll jika dibutuhkan

(154)

hidden

menyembunyikan konten

(155)