Belajar CSS Dasar
1.
Video 1 – CSS
Kesimpulan:
-
CSS (Cascading Style Sheet)
Mekanisme
sederhana yang mengatur gaya/style seperti warna, ukuran, posisi, dll pada
halaman web. CSS bertugas untuk membuat halaman web agar menarik dilihat dan
interaktif.
-
Aturan yang
digunakan untuk menampilkan elemen/tag html
-
Dibuat terpisah
dengan html
-
Bertujuan untuk
memisahkan kontendan style
-
1 CSS dapat
digunakan untuk banyak halam html
-
1 Halaman html
dapat terlihat berbeda jika menggunakan CSS yang berbeda pula
2.
Video 2 – CSS Anatomi
Kesimpulan:
-
Anatomi CSS
selector {
property: value; }
contoh:
h1{font-family: arial}
-
Selector :
Digunakan untuk memilih dan menapilasi elemen spesifik pada html.
-
Element html dipilih
berdasarkan tag, id class bahkan pola/pattern
-
Semakin kompleks
struktur html, selector juga bisa semakin kompleks/spesifik
3.
Video 3 – Penempatan CSS
Kesimpulan:
-
Embed: <style></style>
Diletakan
didalam tag <head>
-
Inline: <p style:”color: lightblue;”>text</p>
Diletakan
langsung didalam tag yang akan di beri style
-
External: <link rel=”stylesheet”
href=”style.css”>
Diletakan secara
terpisah dengan file html
4.
Video 4 – Font Styling
Kesimpulan:
-
font-family
Digunakan untuk
mengatur jenis font yang akan digunakan
Contoh: arial, times new roman dll.
Value dalam
font-family yang bis digunakan:
body {
font-family:
arial, verdana, sans-serif;
}
Dalam kondisi diatas browser akan mencari dan menampilkan font yang tersedia pada sistem operasi.
-
font-size
Digunakan untuk
mengatur ukuran font, value yang bisa digunakan (px, % dan em).
Contoh
Penggunaan:
h1{
font-size:
100px
}
-
font-weight
Digunakan untuk
mengatur ketebalan font, value yang bisa digunakan (lighter, normal, 100-900,
bold, bolder)
Contoh
Penggunaan:
h1{
font-weight:
normal;
}
-
font-variant
Digunakan untuk
mengubah font menjadi small caps, value
yang bisa digunakan (normal, small-caps).
Contoh
Penggunaan:
h1 {
Font-variant:
small-caps
}
CSS diatas akan
membuat huruf Dika berubah menjadi DIKA.
-
font-style
Digunakan untuk
mengubah font menjadi bercetak miring, value yang bisa digunakan (normal,
italic, oblique).
Contoh
Penggunaan:
h1{
font-style:
italic
}
Dalam CSS diatas
akan membuat huruf miring jika font memiliki tipe miring, jika tidak memiliki
tipe miring maka font stylenya akan dibuat menjadi oblique.
-
line-height
Digunakan untuk
mengatur spasi baris, value yang bisa digunakan (normal, px, em)
Contoh
Penggunaan:
h1{
line-height:
20px;
}
5.
Video 5 – Text Styling
-
color
Digunakan untuk
memberi warna pada tulisan, tipe warna yang bisa digunakan:
-
Nama warna: red,
yellow, aqua.
-
Hexadecimal:
#fff, #000.
-
Rgb:
rgb(255,255,255) .
Contoh
Penggunaan:
h1{
color: red;
}
-
text-align
Digunakan untuk
mengatur format paragraph/teks, value yang bisa digunakan (left, right, center,
justify).
Contoh
Pengunaan:
h1{
text-indent:
left;
}
-
text-indent
Digunakan untuk
memberi indentasi pada paragraph/teks, value yang bisa digunakan (px, %).
Contoh Penggunaan:
h1{
text-indent:
100px;
}
-
text-decoration
Digunakan untuk
memberi dekorasi pada text, value yang dapat digunakan (none, underline,
overline, line-throught).
Contoh
Penggunaan:
h1{
text-decoration:
underline;
}
-
text-transform
Digunakan untuk
mengubah jenis huruf menjadi huruf besar, kecil dan capital, value yang bisa
digunakan (none, lowercase, uppercase, capitalize).
Contoh
Penggunaan:
h1{
text-transform:
capitalize;
}
6.
Video 6 – CSS Background
-
background-color
Digunakan untuk
mengatur warna pada background.
Contoh
Penggunaan:
{
background-color:
aqua;
}
-
background-image
Digunakan untuk
mengatur gambar yang akan digunakan pada background.
Contoh
Penggunaan:
{
background-image:
url(gambar.png);
}
-
background-position
Digunakan untuk mengatur
posisi gambar pada background, value yang bisa digunakan (top left, top center,
top right, center left, center center, center right, bottom left, bottom
center, bottom right, x% y%, dan x-post y-post)
Contoh
Penggunaan:
{
background-color:
center;
}
-
background-repeat
Digunakan untuk
mengatur jenis pengulangan gambar pada background, value yang bisa digunakan
(repeat, repeat-x, repeat-y dan no-repeat)
Contoh
Penggunaan:
{
background-color:
repeat-x;
}
7.
Video 7 – CSS Selector Basic
Digunakan pada CSS untuk mengenali sebuah elemen html
yang akan diberi style.
-
Selectors
-
Elemen html:
body{your css}, p{your css}, a{your css}, p{your css} dll.
-
Id: #top{your
css}.
-
Class:
.bottom{your css}.
-
complex
selector: p.bottom{your css}
8.
Video 8 – Pseudo Class
Merupakan sebuah kelas semu yang dimiliki oleh sebuah
elemen html, yang membuat kita dapat mendefinsikan style pada keadaan tertentu
dari elemen tersebut.
-
Pseudo Class Selector Untuk Link (Tautan)
-
:link
Mungkin pseudo
selector paling membingungkan untuk link. Bukankah semua <a> adalah link?
Tidak juga jika mereka tidak memiliki atribut href. Selector ini hanya akan
memilih link yang ada href-nya sehingga memiliki cara kerja yang mirip dengan
a[href].
-
:visited
Memilih link
yang sudah pernah dikunjungi di browser yang sedang dipakai.
-
:hover
Saat kursor
berada di atas sebuah link, link tersebut berada dalam status hover dan
selector ini yang memilihnya.
-
:active
Memilih link
yang sedang aktif (sedang diklik). Misalnya, untuk menentukan sebuah link
berada dalam status "pressed" (sedang ditekan) atau membuat semua
link menjadi seperti button.
-
Pseudo Class Selector untuk Input
-
:focus
Menentukan style
menggunakan hover hanya akan berguna saat menggunakan mouse. Bila pengguna
menggunakan keyboard untuk navigasi maka kita perlu memakai :focus untuk
memilih link yang sedang terpilih. Opsi ini tidak hanya untuk link tapi dapat
pula digunakan untuk input dan textarea.
:target - Pseudo
class target dipakai bersama dengan ID dan bekerja saat hash tag di URL saat
ini berteeu dengan nama ID. Jadi jika kita mengunjungi alamat
www.yoursite.com/#home maka selector #home:target akan bertemu. Opsi ini sangat
berguna bila kita membuat sebuah area menggunakan tab dimana setiap tab akan
terhubung dengan hash tag dan mengaktifkan area panel berdasarkan selector yang
sesuai dengan :target.
-
:enabled
Memilih input
yang berada dalam status enabled dan siap dipakai.
-
:disabled
Memilih input
yang berada dalam status disabled. Banyak browser menampilkan input dengan
status disabled dengan warna keabu-abuan.
-
:checked
Memilih checkbox
yang sedang terpilih.
-
:indeterminate
Memilih radio
button yang ada dalam status tidak ada yang terpilih (kondisi bawaan saat suatu
halaman baru termuat).
-
Pseudo Class Selector Untuk Menentukan Posisi
-
Root
Memilih elemen
yang menjadi root sebuah dokumen. Hampir pasti akan memilih elemen
<html>, kecuali kita bekerja dalam lingkungan yang juga bisa menggunakan
CSS, mungkin XML.
-
:first-child
Memilih elemen
pertama dalam sebuah parent.
-
:last-child
Memilih elemen
terakhir dalam sebuah parent.
-
:nth-child()
Memilih elemen
berdasarkan ekspresi aljabar sederhana (contoh "2n", atau
"4n-h1")
-
:nth-of-type()
Mirip seperti
:nth-child tetapi dipakai saat elemen yang ada di dalam level yang sama
menggunakan tipe yang berbeda. Misalnya didalam sebuah div kita ada beberapa
paragraf dan gambar. Kita ingin memilih semua gambar yang ada di posisi ganjil.
Opsi :nth-child tidak akan bekerja di sini, kita akan memerlukan div
img:nth-of-type(odd). Berguna sekali saat dipakai dalam sebuah list yang
memiliki elemen <dt> dan <dd>.
-
:first-of-type
Memilih elemen
pertama di dalam parent mana pun. Jadi jika kita memiliki dua div yang
didalamnya ada sebuah paragraf, gambar, paragraf, dan gambar. Maka div
img:first-of-type akan memilih gambar (tag ) pertama di dalam kedua div
tersebut.
-
:last-of-type
Kebalikan dari
opsi di atas.
-
:nth-last-of-type()
Bekerja seperti
:nth-of-type, tapi dimulai dari bawah.
-
:nth-last-child()
Bekerja seperti
:nth-child, tapi dimulai dari bawah.
-
:only-of-type
Memilih suatu
elemen apabila di dalam parent-nya tidak ada elemen lain yang sepertinya.
-
Pseudo Class Selector Relasi
-
:not()
Mengeluarkan
elemen yang terpilih berdasarkan selector yang ada di dalam parameter :not().
Contoh, kita ingin memilih semua div tanpa div yang berkelas "music"
= div:not(.music). Spesifikasi CSS menyebutkan bahwa :not tidak dapat
disarangkan (nested), tetapi bisa di sambung (chained). Beberapa browser
(Firefox) dan mendukung parameter yang dipisahkan dengan koma.
-
:empty
Memilih elemen
yang tidak mengandung teks apapun dan tidak ada elemen anak. Contoh:
<p></p>
-
Pseudo Class Selector Untuk Teks
-
::first-letter
Memilih huruf
pertama dalam elemen. Biasa dipakai untuk dropcap (Huruf pertama yang
membesar).
-
::first-line
Memilih baris
pertama dari sebuah teks di dalam elemen.
-
:lang
Akan memilih
elemen yang merupakan anak dari sebuah elemen dengan atribut lang tertentu.
Misal, :lang(fr) akan memilih semua paragraf yang ada di dalam suatu body
apabila body tersebut memilih atribut lang="fr".
-
Pseudo Class Selector Untuk Konten
-
::before
Dipakai untuk
menambah konten tertentu sebelum suatu elemen. Misal, menambahkan tanda petik
sebelum sebuah blockquote.
-
::after
Dipakai untuk
menambah konten tertentu setelah suatu elemen. Misal, menambahkan tanda petik
setelah sebuah blockquote.
-
Pseudo Elemen vs Pseudo Selector
Kita sudah
beberapa kali menemukan tanda ::. Tanda itu bukanlah typo seperti yang pembaca
pikirkan. Selector yang menggunakan :: disebut pseudo element bukan pseudo
selector karena mereka tidak benar-benar memilih sebuah elemen utuh.
9.
Video 9 – CSS Specificity
Setiap deklarasi css (selector) memiliki berat yang
berbeda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat
dipilih oleh selector.
Contoh Penggunaan:
p{color:green}
p{color:blue}
Dengan kondisi CSS seperti yang diatas akan
menampilakn warna blue, karena style
CSS akan menimpa style CSS yang diatasnya.
#paragraf{color:green}
p{color:blue}
Dengan kondisi CSS seperti yang diatas akan
menampilkan warna green, karena #paragraf menjadi lebih specific
sebagai id.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Belajar CSS Dasar"
Post a Comment