Dokumentasi Latihan CSS Dasar

DOKUMENTASI
Cascading Style Sheet

(CSS)
Oleh
Adha Dont Differatama
Dibuat sebagai dokumentasi atas selesainya Latihan Dasar HTML dengan

sumber belajar dari youtube
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
KATA PENGANTAR
Assalamu’aikum Warahmatullahi Wabarakaatuh
Puji syukur saya ucapkan atas kehadirat Allah SWT yang telah memberikan rahmat
serta hidayah-Nya. Sehingga dokumentasi Dasar CSS ini dapat diselesaikan dalam waktu yang
sesingkat-singkatnya.
Dokumentasi Dasar CSS ini saya susun untuk dapat dipergunakan dikemudian hari
sebagaimana mestinya. Semoga, dokumentasi ini bisa membantu pembaca untuk lebih
memahami tentang Dasar CSS serta dapat memperlancar proses pemahaman dalam
pembelajaran.
Apabila dalam penyusunan dokumentasi ini masih terdapat banyak kekurangan baik
dalam penulisan maupun pemilihan kata yang kurang tepat, saya memohon maaf atas
kurangnya kesempurnaan dalam pembuatan dokumentasi Dasar CSS ini. Kurang lebihnya saya
ucapkan terimakasih.
Wassalamu’alaikum. Warahmatullahi Wabarakaatuh.
Bengkulu, 10 Desember 2020
Penyusun
1
adha dont differatama
DAFTAR ISI
KATA PENGANTAR................................................................................................... 1
DAFTAR ISI.................................................................................................................. 2
BAB I
Pendahuluan.................................................................................................................. 3
A. Latar Belakang................................................................................................. 3
B. Tujuan............................................................................................................... 3
C. Manfaat............................................................................................................. 3
BAB II
ISI................................................................................................................................... 4
A. Anatomi CSS.................................................................................................... 4
B. Penempatan File CSS...................................................................................... 4
C. Embed............................................................................................................... 4
D. Inline.................................................................................................................. 5
E. External............................................................................................................. 5
F. Font.................................................................................................................... 6
G. Text.................................................................................................................... 8
H. Selector.............................................................................................................. 8
I. Pseudo-class...................................................................................................... 10
J. Inheritance(pewarisan).................................................................................... 13
K. Specificity.......................................................................................................... 14
BAB III
PENUTUP...................................................................................................................... 17
2
BAB I
PENDAHULUAN
A. Latar Belakang
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk
memisahkan konten dari tampilan visualnya di situs.
B. Tujuan
Dokumentasi ini dibuat bertujuan umum untuk menjelaskan tentang Dasar CSS.
C. Manfaat
1. Secara Teoretis
Mengembangkan pengetahuan pembaca, ilmu dibidang Dasar CSS.
2. Secara Praktis
Sebagai bahan pelatihan dalam mempelajari Dasar CSS.
3
BAB II
ISI
Sumber Referensi :
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://www.w3schools.com/cssref
http://css-tricks.com/almanac
pola gambar : http://subtlepatterns.com
A. Anatomi CSS
selector { property: value; }
ex: h1 { color: blue; }
 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.
h1 { color: blue; }
CSS, pilih seluruh elemen h1, lalu ubah teks didalamnya menjadi berwarna biru.
 Property
- Seluruh property: 350++
 value
B. Penempatan file CSS

a. Didalam file yang sama
- Embed
Disimpan pada file yang sama dibagian head dengan menggunakan tag
<style></style>
- Inline
ex: <p style=”color: lightblue;”> … </p>
b. Di file yang berbeda (dengan pemanggilan)
- external
ex: <link rel=”stylesheet” href=”style.css”>
C. Embed
1. <!DOCTYPE html>
2. <html>
3.
4. 
5. <head>
6. <title>CSS didalam html</title>
7. 
8. <style>
9. body { font-family: arial; }
10. h1 { color: lightblue; }
11. p {
4
12. line-height: 1.6em;
13. color: gray;
14. }
15. </style>
16. 
17.</head>
18.<body>
19. <h1>Hello world</h1>
20.
21. <p>
22. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, corporis
qui!
23. Tenetur reprehenderit nihil excepturi voluptatum aliquid eaque vero ma
gnam
24. amet explicabo velit consequuntur nam, quia illum animi illo laudantiu
m.
25. </p>
26.</body>
27.</html>
D. Inline
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>inline CSS</title>
5. </head>
6. <body>
7. 
8. <h1 style="text-align: center; font-family: arial; font-size: 60px; color:
lightblue;">Hello World</h1>
9.
10. <p style="font-family: arial;">
11. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae totam ma
gni neque quisquam.
12. Itaque debitis, quia eveniet nihil consequuntur placeat totam temporib
us vitae, unde
13. consequatur hic dolore laudantium officia? Tempore?
14. </p>
15. 
16.</body>
17.</html>
E. External
Buat file html dengan isi sebagai berikut.
1. <!DOCTYPE html>
2. <html>
3. <head>
5
4. <title>External CSS</title>
5. <link rel="stylesheet" href="css/style.css">
6. </head>
7.
8. 
9. <body>
10. <h1>Hello world</h1>
11. <p>
12. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, lauda
ntium alias!
13. Nisi cupiditate omnis voluptatem ullam, quisquam in illo quidem alias anim
i cumque
14. incidunt, dolorum quibusdam suscipit commodi voluptatibus reprehenderit?
15. </p>
16.</body>
17.</html>
Buat folder baru dengan nama “css” dan buat file didalamnya dengan nama file “style.css”
1. /* css external */
2. h1 {
3. font-family: arial;
4. color: lightblue;
5. }
6.
7. p {
9. color: gray;
10.}
F. Font
Buat file baru dengan nama “font.html”

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Font</title>
5. <link rel="stylesheet" href="css/font.css">
6. </head>
7. <body>
8. <h1>Hello World</h1>
9.
10. <p>
11. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus i
psum minima
12. quae saepe temporibus nisi omnis exercitationem, vel quidem reiciendis ver
itatis
13. quisquam sunt corrupti facere velit. Nostrum reprehenderit doloremque nisi
!
14. </p>
6
15.
16. <p class="baris_font">
17. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, excepturi, m
ollitia
18. pariatur, eius maxime dicta eligendi fugiat quod nulla veniam nam atque
19. commodi hic voluptates quam totam vitae corporis illo?
20. </p>
21.</body>
22.</html>
Buat folder baru dengan nama “css” dan buat file baru didalamnya dengan nama “font.css”
1. /* font-family :
2. mengatur jenis font yang akan digunakan */
3. h1 {
4. font-family: Arial;
5. }
6. p {
7. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
8. }
9. /* font-size(px, %, em) :
10. mengatur ukuran font */
11.h1 {
12. font-size: 60px;
13.}
14./* font-weight(lighter, normal, 100-900, bold, bolder) :
15. mengatur ketebalan font */
16.h1 {
17. font-weight: bolder;
18.}
19./* font-variant(normal, small caps)
20. mengubah font menjadi small caps */
21.h1 {
22. font-variant: small-caps;
23.}
24./* font-style(normal, italic, oblique)
25. mengubah font menjadi bercetak miring */
26.h1 {
27. font-style: italic;
28.}
29./* line-height(normal, px, em)
30. mengatur spasi antar baris */
31.p {
32. line-height: 2em;
33.}
34./* urutan font dalam 1 baris :
35. font-style(optional) font-variant(optional) font-weight(optional) font-
size(wajib)/line-height(optional)
36. font-family(wajib) */
37..baris_font {
7
38. font: italic normal normal 20px/normal arial;
39.}
G. Text
Buat file dengan nama “background.html”
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Background CSS</title>
5. <link rel="stylesheet" href="css/background.css">
6. </head>
7. <body>
9.
10.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br>
11.</body>
12.</html>
Buat folder baru dengan nama css lalu buat file didalamnya dengan nama “background.css”
H. Selector
http://www.w3schools.com/cssref/css_selectors.asp
Selector digunakan pada css untuk mengenali sebuah elemen pada HTML yang akan diberi style.
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.
Buat file dengan nama “selector.html”

1. 
2.
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <title>Selector CSS</title>
7. <link rel="stylesheet" href="css/selector.css">
8. </head>
9. <body>
11.
12. <ul>
13. <li><a href="#">Link 1</a></li>
8
18. </ul>
19.
20. <ol type="I">
25. <li><a href="#">Link 10</a></li>
26. </ol>
27.
28. <a href="#" class="bold">Web Programing</a>
29.
30. <h2>Judul Artikel</h2>
31. <p id="p1">
32. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod magni persp
iciatis
33. accusamus esse impedit quaerat vel accusantium temporibus quas, tempora mi
nima
34. sapiente iusto? In reiciendis quod aliquid non? Doloribus, vero.
35. </p>
36. <p class="p2 bold">
37. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod iusto nisi
libero
38. dolorum quae molestias, commodi quibusdam dolor esse, consequuntur archit
ecto
39. culpa in optio fugiat deleniti vero soluta maiores? Non!
40. </p>
41.</body>
42.</html>
Buat folder baru dengan nama “css” dan buat file didalamnya dengan nama “selector.css”
1. body {
3. }
4. h1,h2 {
5. color: green;
6. }
7. ul li a {
8. color: orange;
9. }
10.ol li a {
11. color : red;
12.}
13.#p1 {
14. color: orange;
9
15.}
16..p2 {
17. color: orchid;
18.}
19..bold {
20. font-weight: bold;
21.}
22.p.bold {
23. font-style: italic;
24.}
I. Pseudo-class
Referensi : http://www.w3schools.com/css/css_pseudo_classes.asp
Kellas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan
style pada “keadaan tertentu” dari elemen tersebut.
- Pseudo-class yang berhubungan dengan link
: link
Style default pada sebuah link (a yang memiliki href)
: hover
Style Ketika sebuah kursor mouse berada diatas sebuah link
: active
Style Ketika sebuah link di-klik (keadaan aktif)
: visited
Style Ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakan browser yang sama)
Buat file dengan nama “pseudo_class_1.html”
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Psuedo-class CSS</title>
5. <link rel="stylesheet" href="css/psuedo_class_2.css">
6. </head>
7. <body>
8. <a href="#" class="hello">Hello World</a>
9.
10. <ul>
10
20. <li><a href="#">Link 10</a></li>
21. </ul>
22.
23. <p>
24. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam velit a
officiis voluptates
25. quibusdam ex provident? Voluptas maiores temporibus expedita magnam? Recu
sandae quo
26. placeat unde accusamus voluptatibus illo, in minus?
27. </p>
28.
29. <p>
30. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error perferend
is consequatur
31. nemo eos sequi molestiae fugiat omnis quaerat, dolorum tenetur assumenda
voluptates,
32. quo ea maiores, in debitis harum incidunt officiis.
33. </p>
34.</body>
35.</html>
Buat folder dengan nama “css” dan buat file didalamnya dengan nama “pseudo_class_1.css”
1. .hello:link {
2. color: orange;
3. }
4. /* hover adalah kelas semu */
5. .hello:hover {
7. font-size: 20px;
8. }
9. .hello:active {
10. color: white;
13.}
14..hello:visited {
15. color: blue;
16.}
- 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)
11
n bisa berarti urutan (1), (2), … atau pola (2n), (3n+2), (4n-1) atau ganjil genap (even) &
(odd)
:first-of-type
Memilih elemen pertama dari sebuah jenis/tipe tag
:last-of-type
Memilih elemen terakhir dari sebuah jenis/tipe tag
Buat file dengan nama “pseudo_class_2.html”
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Pseudo-class 2 CSS</title>
5. <link rel="stylesheet" href="css/psuedo_class_2.css">
6. </head>
7. <body>
8. <a href="#" class="hello">Hello World</a>
9.
10. <ul>
21. <li><a href="#">Link 10</a></li>
22. </ul>
23.
24. <p>
25. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam velit a o
fficiis voluptates
26. quibusdam ex provident? Voluptas maiores temporibus expedita magnam? Recus
andae quo
27. placeat unde accusamus voluptatibus illo, in minus?
28. </p>
29.
30. <p>
31. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error perferendi
s consequatur
32. nemo eos sequi molestiae fugiat omnis quaerat, dolorum tenetur assumenda v
oluptates,
33. quo ea maiores, in debitis harum incidunt officiis.
34. </p>
35.</body>
12
36.</html>
Didalam folder “css” dan buat file dengan nama “pseudo_class_2.css”
1. .hello:link {
2. color: orange;
3. }
4. /* hover adalah kelas semu */
5. .hello:hover {
7. font-size: 20px;
8. }
9. .hello:active {
10. color: white;
13.}
14..hello:visited {
15. color: blue;
16.}
17.li:first-child a {
18. color: green;
19.}
20.li:last-child a {
21. color: cyan;
22.}
23.
24./* n bisa berarti urutan (1), (2), … atau pola (2n), (3n+2), (4n-1) atau ganjil ge
nap (even) & (odd) */
25.li:nth-child(2n-2) a {
26. color: pink;
27.}
28.li:nth-child(2n-2) a:hover {
29. color: rebeccapurple;
30.}
31.p:first-of-type {
32. color: yellow;
33.}
34.p:last-of-type {
35. color: magenta;
36.}
J. Inheritance (pewarisan)
Sebuah elemen mewarisi beberapa nilai dari property yang dimiliki oleh elemen parent-nya.
http://www.w3.org/TR/CSS211/cascade.html#inheritance
13
Buat file dengan nama “inheritance.html”
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Inheritance (pewarisan)</title>
5. <link rel="stylesheet" href="css/inheritance.css">
6. </head>
7. <body>
9.
10. <a href="#">Web Programing</a>
11.
12. <p>
13. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veli
t tempora quod
14. facilis voluptate ipsam dolore dolorum veritatis, ut, quo doloribus at qua
s ullam
15. nam omnis vero provident! Provident, esse.
16. </p>
17.</body>
18.</html>
Buat folder dengan nama “css” dan buat file didalamnya dengan nama “inheritance.css”
1. body {
2. color: darkgrey;
4. }
5. /* membuat agar default <a> mewarisi dari orang tuanya (body) */
6. a {
7. color: inherit;
8. }
K. Specificity
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/
Buat file dengan nama “specificity.html”

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <link rel="stylesheet" href="css/specificity.css">
5. <title>Specifity CSS</title>
6. </head>
7. <body>
8. <h1>
14
9. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet necessitatib
us maxime
10. quasi dicta voluptatem placeat! Laudantium non, voluptate repellendus et,
saepe a
11. possimus quas tempore illum quisquam, voluptatibus facilis rerum?
12. </h1>
13. <h2 id="h2">
14. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quisquam qui
dem unde
15. molestias cupiditate eveniet voluptatum laudantium ad reprehenderit illo
16. doloremque, aliquid porro vel id itaque maxime, saepe nobis natus.
17. </h2>
18. <ul id="sarapan">
19. <li class="favorit">Nasi Goreng</li>
20. <li>Mie Ayam</li>
21. <li>Ayan geprek</li>
22. </ul>
23.</body>
24.</html>
Buat folder dengan nama “css” dan buat file didalamnya dengan nama “specifity.css”
1. /* elemen yang saling bertumpang tindih */
2. h1 {
3. color: green;
4. }
5. h1 {
6. color: red;
7. }
8. /* warna h1 menjadi merah karena h1 {color: green}; tertindih oleh h1 {color:red}
*/
9.
10./* spesificity */
11.#h2 {
12. color: green;
13.}
14.h2 {
15. color: red;
16.}
17./* warna tidak berubah menjadi merah karena id="#h2" lebih spesifik dari elemen "h
1" */
18.
19./* specificity */
20.ul#sarapan li {
21. color: red;
22.}
23.ul#sarapan li.favorit {
24. color: green;
25.}
15
Menghitung specificity: http://specificity.keegan.st
______________________________________________________________________________________
______________________________________________________________________________________
Inline id class element

#h2 : 0 1 0 0
h2 : 0 0 0 1
______________________________________________________________________________________
______________________________________________________________________________________
16
BAB III
PENUTUP
a. Simpulan
CSS adalah sebuah Bahasa Cascading, yang berguna untuk membantu HTML dan
dapat membuat tampilan halaman web menjadi lebih menarik.
b. Saran
Dalam membuat aplikasi web atau hal sejenis lainnya, lebih baik selalu
menggunakan CSS, karena akan membuat tampilan aplikasi web atau hal lain sejenusnya
menjadi lebih menarik.
17

Dokumentasi Latihan CSS Dasar

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Dokumentasi Latihan CSS Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

DOKUMENTASI

Cascading Style Sheet

Dibuat sebagai dokumentasi atas selesainya Latihan Dasar HTML dengan

Assalamu’aikum Warahmatullahi Wabarakaatuh

Wassalamu’alaikum. Warahmatullahi Wabarakaatuh.

Bengkulu, 10 Desember 2020

ex: h1 { color: blue; }

B. Penempatan file CSS

Buat file baru dengan nama “font.html”

Buat file dengan nama “selector.html”

Buat file dengan nama “pseudo_class_1.html”

- Pseudo-class yang berhubungan dengan posisi elemen (1)

Buat file dengan nama “pseudo_class_2.html”

Didalam folder “css” dan buat file dengan nama “pseudo_class_2.css”

Buat file dengan nama “specificity.html”

Inline id class element

Anda mungkin juga menyukai