Dokumentasi Latihan CSS Dasar
Dokumentasi Latihan CSS Dasar
Oleh
Adha Dont Differatama
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.
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
adha dont differatama
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
adha dont differatama
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; }
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
1. <!DOCTYPE html>
2. <html>
3.
4. <!-- Tuliskan tag <style></style> didalam head -->
5. <head>
6. <title>CSS didalam html</title>
7. <!-- css style -->
8. <style>
9. body { font-family: arial; }
10. h1 { color: lightblue; }
11. p {
4
adha dont differatama
12. line-height: 1.6em;
13. color: gray;
14. }
15. </style>
16. <!-- css style -->
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. <!-- CSS didalam tag (inline) -->
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. <!-- CSS didalam tag (inline) -->
16.</body>
17.</html>
E. External
Buat file html dengan isi sebagai berikut.
1. <!DOCTYPE html>
2. <html>
3. <head>
5
adha dont differatama
4. <title>External CSS</title>
5. <link rel="stylesheet" href="css/style.css">
6. </head>
7.
8. <!-- external css -->
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 {
8. font-family: arial;
9. color: gray;
10.}
F. Font
6
adha dont differatama
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
adha dont differatama
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>
8. <h1>Hello World</h1>
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.
8
adha dont differatama
15. <li><a href="#">Link 3</a></li>
16. <li><a href="#">Link 4</a></li>
17. <li><a href="#">Link 5</a></li>
18. </ul>
19.
20. <ol type="I">
21. <li><a href="#">Link 6</a></li>
22. <li><a href="#">Link 7</a></li>
23. <li><a href="#">Link 8</a></li>
24. <li><a href="#">Link 9</a></li>
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 {
2. font-family: arial;
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
adha dont differatama
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)
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>
11. <li><a href="#">Link 1</a></li>
12. <li><a href="#">Link 2</a></li>
13. <li><a href="#">Link 3</a></li>
14. <li><a href="#">Link 4</a></li>
15. <li><a href="#">Link 5</a></li>
16. <li><a href="#">Link 6</a></li>
17. <li><a href="#">Link 7</a></li>
18. <li><a href="#">Link 8</a></li>
10
adha dont differatama
19. <li><a href="#">Link 9</a></li>
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 {
6. font-family: arial;
7. font-size: 20px;
8. }
9. .hello:active {
10. color: white;
11. font-family: arial;
12. font-size: 200px;
13.}
14..hello:visited {
15. color: blue;
16.}
11
adha dont differatama
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
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>
11. <li><a href="#">Link 0</a></li>
12. <li><a href="#">Link 1</a></li>
13. <li><a href="#">Link 2</a></li>
14. <li><a href="#">Link 3</a></li>
15. <li><a href="#">Link 4</a></li>
16. <li><a href="#">Link 5</a></li>
17. <li><a href="#">Link 6</a></li>
18. <li><a href="#">Link 7</a></li>
19. <li><a href="#">Link 8</a></li>
20. <li><a href="#">Link 9</a></li>
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
adha dont differatama
36.</html>
1. .hello:link {
2. color: orange;
3. }
4. /* hover adalah kelas semu */
5. .hello:hover {
6. font-family: arial;
7. font-size: 20px;
8. }
9. .hello:active {
10. color: white;
11. font-family: arial;
12. font-size: 200px;
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
adha dont differatama
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>
8. <h1>Hello World</h1>
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;
3. font-family: arial;
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/
14
adha dont differatama
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
adha dont differatama
Menghitung specificity: http://specificity.keegan.st
______________________________________________________________________________________
______________________________________________________________________________________
h2 : 0 0 0 1
______________________________________________________________________________________
______________________________________________________________________________________
16
adha dont differatama
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
adha dont differatama