CSS Lanjutan

TUTORIAL CSS LANJUTAN
Oleh Muh. Anas Faishol,S.Kom,MT

Outline
• CSS Flexbox
• CSS Grid
• CSS position
• CSS Combinator
• CSS pseudo class dan element
• CSS media Query
CSS Flexbox
• Pada CSS3 terdapat fitur baru yaitu Flexible Box atau yang biasa
disingkat flexbox.
• Flexbox sendiri telah hadir sejak tahun 2009 dan didukung hampir
disemua browser modern, ini salah satu kemajuan teknologi yang
hebat di bidang web developer
• Dizaman sekarang design website merambah ke berbagai ukuran
seperti: laptop, tablet atau smartphone. Flexbox hadir untuk
memecahkan masalah tersebut.
• Flexbox dirancang sebagai model tata letak satu dimensi dan sebagai
metode yang dapat memudahkan untuk menyelaraskan elemen satu
sama lain dalam arah dan urutan yang berbeda.
Terminologi pada flexbox
• main-axis: adalah sumbu utama dari wadah/container fleksibel sepanjang item
fleksibel diletakkan. Arahnya didasarkan pada properti flex-direction.
• main-start | main-end: adalah item fleksibel yang ditempatkan dalam wadah
yang dimulai pada sisi main-start dan akan menuju sisi main-end.
• main-size: adalah width atau height wadah fleksibel atau item fleksibel mana pun
yang ada dalam dimensi utama.
• cross axis: adalah sumbu tegak lurus dengan sumbu utamanya yang disebut
sumbu silang atau cross axis. Arahnya didasarkan pada properti flex-direction.
• cross-start | cross-end: adalah garis lentur yang diisi dengan item dan
ditempatkan ke dalam wadah mulai dari sisi cross-start wadah fleksibel dan
menuju ke sisi ujung cross-end
• cross-size: adalah width atau height item fleksibel mana pun yang berada dalam
dimensi silang adalah cross size item.
flex-direction: row
• Didalam flexbox terdapat dua sumbu (axis) yaitu sumbu utama (main
axis) dan sumbu silang (cross axis). Kenapa istilahnya bukan Horizontal
dan vertical? Karena Arah sumbu tersebut akan berubah berdasarkan
flex-direction.
• Ketika flex-direction bernilai row maka sumbu utama (main axis) nya
adalah dari kiri ke kanan dan sumbu silang (cross axis) nya dari atas ke
bawah.
flex-direction: column
• Dan apabila flex-direction bernilai column maka sumbu utama (main
axis) nya adalah dari atas ke bawah dan sumbu silang (cross axis) nya
dari kiri ke kanan.
flex-direction: row-reverse
• Yang terakhir masih ada flex-direction: row-reverse; sehingga item
diurutkan dari akhir ke awal atau dibalik, tentu arah sumbu utama
(main axis) dan sumbu silang (cross axis) menjadi berubah urutannya.
Penggunaan CSS flexbox
• Perlu diketahui bahwa dalam flexbox terdapat dua komponen utama
yaitu wadah/container dan anak/item.
• Untuk membuat CSS flexbox sangat sederhana dan mudah untuk
diterapkan, dengan memberikan style display: flex; pada container,
Anda sudah berhasil membuat CSS flexbox.
<!DOCTYPE html> <style>
<html> #container {
<head> display: flex;
<title>Belajar CSS</title> padding: 15px;
</head> background-color: #0662cd;
<body> }
.box {
<h1>Belajar CSS</h1>
background-color: #78ff07;
<div id="container">
padding: 10px 20px;
<div class="box box1">1</div>
font-size: 20px;
border-radius: 3px;
<div class="box box4">4</div> border: 1px solid black;
<div class="box box5">5</div> }
</div> </style>
</body>
</html>
Penerapan Flex-direction
• Dengan properti flex-direction Anda bisa menggunakannya untuk
menentukan arah (direction) untuk item-item yang berada didalam
container flexbox. Flex-direction mempengaruhi arah sumbu utama
(main axis) dan sumbu silang (cross axis).
• Secara default flex-direction bernilai row, ini artinya arah sumbu
mengarah secara horizontal bukan vertikal.
Properti flex-direction
• row – memberikan posisi secara horizontal dari Kiri ke
Kanan (default)
• row-reverse – memberikan posisi secara horizontal dari Kanan ke
Kiri (Kebalikan dari row)
• column – memberikan posisi secara vertikal dari Atas ke Bawah
• column-reverse – memberikan posisi secara vertikal dari Bawah ke
Atas (kebalikan dari column)
Contoh:
<style>
#container {
display: flex;
padding: 15px;
background-color: #0662cd;
}
.box {
background-color: #78ff07;
padding: 10px 20px;
font-size: 20px;
border-radius: 3px;
border: 1px solid black;
}
</style>
Flex-wrap
• Dengan properti flex-wrap Anda bisa menggunakannya untuk
membuat item didalamnya apakah harus membungkus ke baris baru
jika sudah memenuhi lebar dari containernya?.
• Semua properti flex-wrap dapat memiliki nilai berikut:
• nowrap – jangan dibungkus ke baris baru (default)
• wrap – dibungkus ke baris baru
• wrap-reverse – dibungkus ke baris baru tetapi dibalik (item terakhir jadi
pertama )
#container {
display: flex;
flex-wrap: nowrap;
}
Flex-flow shorthand
• Dengan flex flow shorthand Anda bisa mempersingkat sebuah kode.
Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan
cara ini dimungkinkan juga untuk menentukan semua properti flex-
direction dan flex-wrap dalam satu properti tunggal.
• Untuk menggunakan flex flow shorthand Anda cukup menggunakan
properti flex-flow.
• Properti flex-flow shorthand hanya berlaku untuk dua properti
dibawah ini:
• flex-direction
• flex-wrap
Justify-content
• Dengan properti justify-content Anda bisa menggunakan untuk
menyelaraskan item dalam container disepanjang sumbu utama
(main axis)
• seperti mengatur posisi item menjadi yang paling kiri, tengah, kanan
dan bahkan bisa memberikan sisa kekosongan ruang dari container
secara merata pada item didalamnya.
Properti Justify-content
• flex-start – mengatur posisi disepanjang sumbu utama (main axis) dibagian
awal, dan ini nilai defaultnya
• center – mengatur posisi disepanjang sumbu utama (main axis) dibagian
tengah
• flex-end – mengatur posisi disepanjang sumbu utama (main axis) dibagian
akhir
• space-between – mengatur posisi disepanjang sumbu utama (main axis)
untuk meratakan item secara merata. Item paling kiri rata kiri, paling kanan
menjadi rata-kanan dan item ditengah akan diposisinkan rata tengah
• space-around – Sama seperti space-between hanya saja space-
around akan memberikan ekstra ruang kosong pada bagian awal/kiri dan
akhir/kanan
Align-items
• Dengan properti align-items Anda bisa menggunakan untuk
menyelaraskan item dalam container disepanjang sumbu silang (cross
axis)
• seperti mengatur posisi item menjadi yang paling atas, tengah,
bawah, juga bisa memberikan peregangan item untuk mengisi wadah
dan menyelaraskan item fleksibel seperti garis dasarnya sejajar.
Properti align-items
• stretch – mengatur posisi disepanjang sumbu silang (cross axis) untuk
mengisi wadah (default)
• flex-start – mengatur posisi disepanjang sumbu silang (cross axis)
dibagian awal
• center – mengatur posisi disepanjang sumbu silang (cross axis)
dibagian tengah
• flex-end – mengatur posisi disepanjang sumbu silang (cross axis)
dibagian akhir
• baseline – mengatur posisi disepanjang sumbu silang (cross axis)
untuk menyelaraskan item seperti garis dasarnya sejajar
Align-content
• Dengan properti align-content Anda bisa menggunakan untuk
menyelaraskan item dalam container disepanjang sumbu silang (cross
axis). Align-content ini hampir sama dengan align-items, hanya
saja align-content berlaku jika jumlah itemnya lebih dari satu baris.
Properti align-content
• stretch – mengatur posisi disepanjang sumbu silang (cross axis) untuk mengisi
wadah (default)
• flex-start – mengatur posisi disepanjang sumbu silang (cross axis) dibagian awal
• center – mengatur posisi disepanjang sumbu silang (cross axis) dibagian tengah
• flex-end – mengatur posisi disepanjang sumbu silang (cross axis) dibagian akhir
• space-between – mengatur posisi disepanjang sumbu silang (cross axis) untuk
meratakan item secara merata. Item yang terbungkus akan diposisikan paling atas
sedangkan yang jatuh ke baris baru akan akan diposisikan paling bawah
• space-around – Sama seperti space-between hanya saja space-around akan
memberikan ekstra ruang kosong pada bagian awal/atas dan akhir/bawah
Contoh Penerapan
• Buatlah gallery foto menggunakan CSS Flexbox dengan 9 (sembilan)
item foto dengan dimensi 3 x 3 (tiga kolom dan tiga baris)!
CSS GRID
CSS Grid
• CSS Grid adalah CSS yang dapat membagi kolom pada website
menjadi beberapa bagian sesuai yang diinginkan, baik secara
horizontal maupun vertikal.
• Penggunaan CSS Grid bertujuan untuk mempermudah developer
untuk membuat layout dari design yang telah dibuat.
Penerapan CSS Grid
• Disini kita mempunya 4 line kolom dan 3 line row, dengan masing
masing 3 kotak di atas dan 3 kotak dibawah
Code HTML
Code CSS
#1 Grid Column
Lalu bagaimana jika kita ingin merubah kotaknya dengan kotak

contentnya memenuhi panjang browsernya dan kotak top left dan top
right memenuhi ujung atas dari layar browsernya
• yang perlu dilakukan adalah
merubah grid-column pada class
top left menjadi 1/2 , merubah-
grid column pada class top right
menjadi 2/3 dan merubah grid-
column pada class content
menjadi 1/4.
#2 Grid Row
• Kemudian kita akan
mencari tau cara
mengcostum row
yang kita inginkan
seperti pada
gambar
CSS POSITION
Kegunaan position pada CSS
• Pada CSS sendiri Anda bisa mengatur letak posisi setiap elemen, ini sangat
berguna untuk desain tata letak yang baik.
• Didalam CSS ada beberapa metode yang bisa Anda gunakan untuk
menentukan posisi elemen dengan properti position
• properti position Ada lima nilai yang bisa Anda gunakan:
• static
• relative
• absolute
• fixed
• Sticky
• Agar berfungsi Anda juga perlu mengatur arah posisi yang lebih spesifik
dengan properti: top, right, bottom dan left, mereka juga bekerja secara
berbeda tergantung pada nilai posisi.
Posisi static
• Elemen HTML secara default diposisikan static.
• Posisi static tidak diposisikan dengan cara khusus apa pun, melainkan
diposisikan sesuai dengan aliran normal halaman.
• Elemen posisi static tidak bisa dipengaruhi oleh
properti top, right, bottom dan left
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
div {
border: 2px solid blue;
position: static;
</style>
</head>
<body>
<div>Elemen div ini memiliki position: static;</div>
</body>
</html>
Posisi relative
• Elemen dengan posisi relative diposisikan relative terhadap posisi
normalnya.
• Dengan posisi relative Anda bisa mengatur letak posisi dengan
properti top, right, bottom dan left.
• Elemen yang diposisikan relative dapat tumpang tindih dengan
elemen lain, dan menjaga ruang yang awalnya disediakan dalam
aliran normal.
• <!DOCTYPE html> <style>
• <html>
#relative {
• <head>
• <title>Belajar CSS</title> background-color: yellow;
• </head> position: relative;
• <body> top: 20px;
• <h1>Belajar CSS</h1>
left: 100px;
• <div id="relative">Box kuning ini memiliki width: 30%;
nilai position: relative;</div>
height: 80px;
• </body> }
• </html> </style>
Posisi absolute
• Elemen dengan posisi absolute diposisikan sepenuhnya keluar dari
aliran normalnya. Dengan posisi absolute Anda bisa mengatur letak
posisi dengan properti top, right, bottom dan left. Elemen yang
diposisikan absolute dapat tumpang tindih dengan elemen lain,
dan tidak menjaga ruang yang awalnya disediakan dalam aliran
normal.
• Jika posisi absolute dibungkus dengan posisi relative, maka akan
mengikuti posisi kordinat dari pembungkusnya (relative). Namun jika
posisi absolute tidak memiliki pembungkus yang mempunyai posisi
relative, maka ia menggunakan elemen <body> sebagai kordinatnya.
<!DOCTYPE html> <style>
<html> #relative {
<head> background-color: grey;
position: relative;
width: 80%;
</head>
height: 300px;
<body>
}
#absolute {
background-color: yellow;
<div id="relative"> position: absolute;
<div id="absolute">Box kuning ini memiliki nilai position: top: 50px;
absolute;</div>
left: 100px;
</div>
width: 40%;
height: 100px;
</body>
}
</html> </style>
Posisi fixed
• Elemen dengan posisi fixed digunakan untuk memberikan
posisi tetap bahkan jika halaman tersebut digulir. Dengan posisi fixed
Anda bisa mengatur letak posisi dengan
• Elemen yang diposisikan fixed dapat tumpang tindih dengan elemen
lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran
normal.
<!DOCTYPE html> <body>
<html> <div id="fixed"></div>
<h2>Menggunakan posisi fixed</h2>
<head> <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>
<title>Belajar CSS</title> <p>Menggunakan posisi fixed</p>
<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>
<style> <p>Menggunakan posisi fixed</p>
#fixed { <p>Menggunakan posisi fixed</p>

background-color: red; <p>Menggunakan posisi fixed</p>
position: fixed; <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>
<p>Menggunakan posisi fixed</p>
left: 70px; <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

width: 50%; <p>Menggunakan posisi fixed</p>
height: 100px; <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>
} <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

p{ <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>
line-height: 2.7; <p>Menggunakan posisi fixed</p>
} <p>Menggunakan posisi fixed</p>

</style> </body>
</head> </html>
Posisi sticky
• Elemen dengan posisi sticky digunakan untuk toggle
posisi relative dan posisi fixed.
• Ini diposisikan relatif sampai posisi offset yang diberikan bertemu di
viewport – kemudian “sticky” di tempatnya.
• Dengan posisi sticky Anda bisa mengatur letak posisi dengan
• Elemen yang diposisikan sticky dapat tumpang tindih dengan elemen
lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran
normal.
<!DOCTYPE html>
<html>
<head>
<style>
#sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 15px;
background-color: lightgrey;
border: 3px solid blue;
}
p{
line-height: 3.5;
}
</style>
</head>
<body>
<div id="sticky">Sticky</div>
<p>Silakan scroll ke bawah agar melihat sifat posisi sticky</p>

<p>Menggunakan posisi sticky</p>
</body>
</html>
Posisi elemen tumpang tindih
• Ketika elemen diposisikan, maka mereka dapat tumpang tindih dengan
elemen yang lainnya.
• Dengan properti z-index Anda bisa mengatur untuk menentukan elemen
mana yang akan ditempatkan dibelakang dan elemen mana yang akan
ditempatkan didepan.
• Nilai properti z-index mendukung nilai positif atau negatif.
• Elemen dengan urutan tumpukan lebih besar selalu didepan elemen
dengan urutan tumpukan lebih rendah.
• Jika dua elemen yang diposisikan tumpang tindih tanpa properti z-index
yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan
ditampilkan di atas.
<!DOCTYPE html>
<html>
<head>
<style>
p{
position: absolute;
left: 10px;
top: 10%;
z-index: -1;
background-color: red;
}
</style>
</head>
<body>
<img id="g1" width="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Steilk%C3%BCste_bei_Ahrenshoop.jpg/1200px-
Steilk%C3%BCste_bei_Ahrenshoop.jpg">
<p>Gambar berada dibelakang dikarenakan efek dari z-index: -1;</p>
</body>
</html>
Properti Position
Kombinator selektor
pada CSS
Selektor kombinator
• Kombinator selektor pada CSS digunakan untuk menghubungkan
selektor dengan pemilih, dan kombinator selektor bisa berupa
pemilih sederhana atau pemilih yang kompleks yang terdiri dari lebih
dari satu pemilih yang terhubungan dengan menggunakan
kombinator. Anda bisa memilih selektor lebih dari satu pilihan dengan
dipisahkan dengan koma.
• Ada empat kombinator berbeda dalam CSS:
• selektor keturunan (spasi)
• selektor anak (>)
• selektor saudara kandung yang berdekatan (+)
• selektor saudara umum (~)
Selektor keturunan
• Selektor keturunan digunakan untuk memilih semua elemen
keturunan dari tag HTML yang dipilih. Kombinator ini untuk
menghubungkannya menggunakan spasi.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1 didalam div</p>
<section><p>Paragraf 3 didalam div</p></section>
</div>
<p>Paragraf 4 diluar div</p>
</body>
</html>
Selektor anak
• Selektor anak digunakan untuk memilih elemen yang merupakan
anak langsung dari tag HTML yang dipilih. Kombinator ini untuk
menghubungkannya menggunakan lebih besar (>).
<!DOCTYPE html>
<html>
<head>
<style>
div p {
}
</style>
</head>
<body>
<div>
<section><p>Paragraf 3 didalam div</p></section> 
</div>

</body>
</html>
Selektor saudara kandung
yang berdekataan
• Selektor saudara digunakan untuk memilih elemen yang merupakan
saudara kandung yang berdekatan dari tag HTML yang dipilih,
selektor saudara harus memilih elemen induk yang bersebelahan
dan berdekatan hampir secara langsung.
• Kombinator ini untuk menghubungkannya menggunakan tambah (+).
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
}
</style>
</head>
<body>
<div>
<section><p>Paragraf 3 didalam div</p></section>
</div>
</body>
</html>
Selektor saudara umum
• Selektor saudara umum digunakan untuk memilih semua elemen
yang merupakan saudara kandung yang berdekatan dari tag HTML
yang dipilih, selektor saudara umum harus memilih elemen induk
yang bersebelahan dan berdekatan hampir secara langsung.
• Kombinator ini untuk menghubungkannya menggunakan tilde (~).
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
}
</style>
</head>
<body>
<p>Paragraf 1</p>
<div>
<p>Paragraf 2</p>
</div>
<p>Paragraf 3</p>
<code>Teks code</code>
<p>Paragraf 4</p>
</body>
</html>
CSS pseudo class dan
element
Apa itu pseudo-classes ?
• Pseudo-classes pada CSS sering digunakan untuk mendefinisikan
keadaan khusus suatu elemen. Biasanya dikombinasikan dengan efek
visual dari suatu unsur misalnya:
• ketika mouse pengguna diatasnya, ketika elemen mendapatkan fokus,
ketika memilih penyeleksian untuk menargetkan elemen anak
pertama atau terakhir dan yang lainnya. Pseudo-classes dimulai
dengan titik dua ( : ) dan berikut gambaran syntax dari pseudo-
classes:
selector : pseudo-classes { properti : value ; }
Anchor pseudo-classes
• Anchor pseudo-classes paling sering digunakan dan dapat ditampilkan
dengan berbagai cara. Dengan pseudo-classes ini Anda bisa
mengubah link sebagai respons terhadap tindakan pengguna. Berikut
list anchor pseudo-classes:
• a: link – Normal, link yang belum dikunjungi
• a: visited – Link pengguna yang telah dikunjungi
• a: hover – Link ketika mouse pengguna di atasnya
• a: active – Link saat itu diklik
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
color: orange;
}
</style>
</head>
<body>
<a href="https://www.facebook.com" target="_blank">Anchor pseudo-classes</a>
</body>
</html>
:first-child pseudo-classes
• :first-child pseudo-classes digunakan untuk memilih elemen yang
merupakan elemen anak pertama dari beberapa elemen lainnya.
• Dengan begitu Anda bisa memilih penyeleksian untuk menargetkan
elemen anak pertama tanpa menambahkan atribut ID atau class pada
elemen.
:last-child pseudo-classes
• :last-child pseudo-classes digunakan untuk memilih elemen yang
merupakan elemen anak terakhir dari beberapa elemen lainnya.
• Dengan begitu Anda bisa memilih penyeleksian untuk menargetkan
elemen anak terakhir tanpa menambahkan atribut ID atau class pada
elemen.
:lang pseudo-classes
• :lang pseudo-classes memungkinkan Anda untuk menentukan aturan
khusus untuk bahasa yang berbeda. :lang pseudo-classes dalam
contoh di bawah ini mendefinisikan tanda kutip untuk <q> elemen
yang secara eksplisit diberi nilai bahasa no.
Pseudo-classes dengan class dan id
• Pseudo-classes dapat dikombinasikan dengan atribut class atau ID
pada css. Link dengan class=”red” dalam contoh dibawah ini akan
ditampilkan dengan warna merah, dan link dengan id=”orange” akan
ditampilkan dengan warna orange.
Apa itu pseudo-elements ?
• Pseudo-element pada CSS digunakan untuk memberikan style pada
elemen, dan Anda bisa memberikan style tanpa menambahkan
atribut ID atau class.
• Dengan pseudo-element Anda bisa memberikan style seperti:
• style pada paragraf pertama untuk membuat efek drop cap,
• memasukan beberapa konten pada elemen sebelum atau sesudah,
• memberikan efek seleksi pada elemen yang dipilih pengguna dll.
• Berikut gambaran syntax dari pseudo-element:
selector :: pseudo-element { properti : value ; }
Perbedaan pseudo-element dan
pseudo-classes
• Pseudo-element dan pseudo-classes sekilas mungkin hampir sama, tetapi
itu berbeda. Berikut perbedaannya:
• pseudo-element dimulai dengan titik dua ganda ( :: )
• pseudo-classes dimulai dengan titik dua tunggal ( : )
• Sebanarnya jika Anda menggunakan titik dua tunggal atau pun titik dua
ganda pada pseudo-classes atau pun pseudo-element, semuanya akan
bekerja.
• titik dua ganda menggantikan notasi titik dua tunggal untuk pseudo-
element dalam CSS3. Ini merupakan upaya dari W3C untuk membedakan
antara pseudo-classes dan pseudo-element.
• Syntax titik dua tunggal digunakan untuk kedua pseudo-classes dan
pseudo-element dalam CSS2 dan CSS1. Untuk kompatibilitas, syntax titik
dua tunggal dapat diterima untuk CSS2 dan CSS1 pseudo-element.
::first-line pseudo-element
• ::first-line pseudo-element digunakan untuk menambah style khusus
pada baris pertama dari teks. Contoh berikut memberikan style pada
baris pertama untuk teks paragraf. Panjang baris pertama tergantung
pada ukuran jendela browser.
Properti
• ::first-line pseudo-element hanya dapat diterapkan untuk unsur-unsur elemen yang mempunyai
display block. Properti berikut dapat diterapkan pada ::first-line pseudo-element:
• properti font
• properti color
• properti background
• properti word-spacing
• properti letter-spacing
• properti text-decoration
• properti vertical-align
• properti text-transform
• properti line-height
• clear
::first-letter pseudo-element
• ::first-letter pseudo-element digunakan untuk menambah style
khusus untuk huruf pertama dan pada baris pertama dari teks.
Contoh berikut memberikan style pada huruf pertama dari teks
paragraf dan membuat efek seperti drop cap.
• ::first-letter pseudo-element hanya dapat diterapkan untuk unsur-unsur elemen yang mempunyai display
block. Properti berikut dapat diterapkan pada ::first-letter pseudo-element:
• properti font
• properti color
• properti background
• properti margin
• properti padding
• properti border
• properti text-decoration
• properti vertical-align (hanya jika “float” adalah “none”)
• properti text-transform
• properti line-height
• properti float
• clear
::before pseudo-element
• ::before pseudo-element digunakan untuk memasukkan konten
“sebelum” pada elemen HTML. Anda bisa menggunakan
properti content seperti contoh dibawah ini untuk
menghubungkannya dengan pseudo-element, yang bertujuan untuk
memasukkan konten yang ingin dihasilkan.
• Pada properti content Anda bisa menyisipkan string teks atau objek
yang disematkan seperti gambar dan sumber daya lainnya.
h1::before { content:
url(https://tools.hendky.com/editor/gambar/senyum.gif); }
::after pseudo-element
• ::after pseudo-element digunakan untuk memasukkan konten
“sesudah” pada elemen HTML. Anda bisa menggunakan
properti content seperti contoh dibawah ini untuk
menghubungkannya dengan pseudo-element, yang bertujuan untuk
memasukkan konten yang ingin dihasilkan.
• Pada properti content Anda bisa menyisipkan string teks atau objek
yang disematkan seperti gambar dan sumber daya lainnya.
h1::after { content:
url(https://tools.hendky.com/editor/gambar/senyum.gif); }
::selection pseudo-element
• ::selection pseudo-element digunakan untuk memberikan style disaat
pengguna menyorot teks ( menekan klik kanan lalu menyeret teks ).
Anda bisa memberikan style dengan pseudo-element ini hanya
properti: color, bakcground, cursor dan outline.
Pseudo-element dengan class dan id
• Pseudo-element dapat dikombinasikan dengan atribut class atau ID
pada css. Contoh dibawah ini kita akan memberikan style pada
paragraf pertama membuat efek drop cap dan memberikan warna
pada baris pertama.
CSS Media Query
• Media query merupakan modul CSS3 yang berguna membuat layout
kita responsive dengan menyesuaikan tampilan berdasarkan ukuran
layar perangkat.
• Media query juga disebut dengan Breakpoint, karena cara kerja
media query yakni dengan cara mengecheck ukuran
viewport(layar/area dimana konten terlihat) apakah sesuai dengan
kondisi yang kita deklarasikan, jika benar maka kode dalam kondisi
tersebut yang akan dieksekusi. Dengan kata lain media query
memberikan kemampuan menggunakan kode css yang sesuai dengan
kondisi yang ditentukan.
Eksternal & internal media query
• Cara Eksternal:
Dengan menggunakan tag <link> di dalam elemen head
• Cara Internal:
Kita definisikan dengan rule @media di dalam internal css atau file css
terpisah
Logika dalam CSS Media Query
LOGIKA KETERANGAN
And Agar rules kita dapat dieksekusi maka pernyataan kita harus bernilai benar secara
berturut-turut
Or Dalam media query operator or dilambangkan dengan tanda baca koma (,). rules dengan
logika or memiliki arti dapat dieksekusi jika salah satu diantara pernyataannya benar
Only Only berfungsi untuk mencegah browser lama untuk menyentuh style untuk Android atau
iPhone. Rules CSS hanya dapat dieksekusi jika semua query bernilai benar. Syarat
menggunakan only adalah kita harus mengikut sertakan media type
Media Type
Media KETERANGAN
all Rules CSS kita cocok di semua jenis devices
print Style kita dimaksudkan untuk ditampilkan pada dokumen cetak atau print preview
screen Nilai default media type. Style kita dikhususkan untuk tampilan layar.
speech Device yang memiliki kapabilitas speech
Media Features
Untuk menentukan kondisi kita bisa menyertakan media features di bawah ini dengan nilai batas nantinya sebuah rules akan
dieksekusi. Media featurs harus berada dalam tanda kurung.
• width
• height
• device-width
• device-height
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• orientation
• scan
• grid
Contoh penggunaan

CSS Lanjutan

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CSS Lanjutan

Diunggah oleh

Hak Cipta:

Format Tersedia

TUTORIAL CSS LANJUTAN

Oleh Muh. Anas Faishol,S.Kom,MT

Lalu bagaimana jika kita ingin merubah kotaknya dengan kotak

border: 2px solid blue;

<div>Elemen div ini memiliki position: static;</div>

<html> <div id="fixed"></div>

<h2>Menggunakan posisi fixed</h2>

<head> <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<title>Belajar CSS</title> <p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<style> <p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

#fixed { <p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<p>Menggunakan posisi fixed</p>

} <p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<p>Menggunakan posisi fixed</p>

line-height: 2.7; <p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

} <p>Menggunakan posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi fixed</p>

<p>Silakan scroll ke bawah agar melihat sifat posisi sticky</p>

<p>Paragraf 4 diluar div</p>

Anda mungkin juga menyukai