Skip to content

Commit 674f0c6

Browse files
committed
summary
1 parent d7c6c1f commit 674f0c6

File tree

11 files changed

+349
-0
lines changed

11 files changed

+349
-0
lines changed

README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)
2+
3+
# __CSS Tutorial__
4+
5+
[![Video](https://img.youtube.com/vi/Z9u5Z3unNSM/0.jpg)](https://www.youtube.com/watch?v=Z9u5Z3unNSM)
6+
7+
__CSS__ (_Cascading Style Sheets_) merupakan aturan untuk mengatur style & layout beberapa komponen dalam sebuah web, sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. CSS dapat mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, spasi antar paragraf, spasi antar teks, margin dan parameter lainnya. Tutorial kali ini membahas _step-by-step_ bagaimana menggunakan CSS untuk mengatur style & layout elemen HTML mulai dari nol.
8+
9+
#
10+
11+
⏰ Timestamp links | 📚 Bahasan Materi
12+
---|---
13+
[#1 Intro](https://youtu.be/Z9u5Z3unNSM?t=37) | <ul><li>Apa itu CSS?</li><li>Inline CSS</li><li>Internal CSS</li><li>External CSS</li></ul>
14+
[#2 Selector](https://youtu.be/Z9u5Z3unNSM?t=647) | <ul><li>Tag, class, ID & attribute selector</li><li>Group selector</li><li>Descendant, child & adjacent selector</li></ul>
15+
[#3 Pseudo Elements & Classes](https://youtu.be/Z9u5Z3unNSM?t=2214) | <ul><li>first-child, last-child</li><li>nth-child, nth-of-type</li><li>first-letter, first-line</li><li>hover, focus, active</li></ul>
16+
[#4 Basic CSS Properties](https://youtu.be/Z9u5Z3unNSM?t=3114) | <ul><li>Color & Background</li><li>Text styling</li><li>Width, height & unit length</li><li>Padding, border & margin</li></ul>
17+
[#5 Transformation & Transition](https://youtu.be/Z9u5Z3unNSM?t=5036) | <ul><li>Translate, Rotate, Scale, Skew</li><li>3D Transformation</li><li>Transition</li></ul>
18+
[#6 Positioning](https://youtu.be/Z9u5Z3unNSM?t=6588) | <ul><li>Relative Position</li><li>Absolute Position</li><li>Fixed Position</li></ul>
19+
[#7 Grid](https://youtu.be/Z9u5Z3unNSM?t=7522) | <ul><li>Display Grid</li><li>Grid Column, Row, Gap & Lines</li><li>Nested Grid</li></ul>
20+
[#8 Summary](https://youtu.be/Z9u5Z3unNSM?t=8714) | <ul><li>Summary</li><li>References</li></ul>
21+
22+
#
23+
24+
#### Lintang Wisesa :love_letter: _lintangwisesa@ymail.com_
25+
26+
[Facebook](https://www.facebook.com/lintangbagus) |
27+
[Twitter](https://twitter.com/Lintang_Wisesa) |
28+
[LinkedIn](https://www.linkedin.com/in/lintangwisesa/) |
29+
[Youtube](https://www.youtube.com/user/lintangbagus) |
30+
:octocat: [GitHub](https://github.com/LintangWisesa) |
31+
[Hackster](https://www.hackster.io/lintangwisesa)

css/0.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
h3 {
2+
color: yellow;
3+
background-color: black;
4+
}

css/1_selector.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* tag selector */
2+
p {
3+
color: white;
4+
background-color: red;
5+
}
6+
7+
/* class selector */
8+
.student {
9+
color: black;
10+
background-color: yellow;
11+
}
12+
13+
/* id selector */
14+
#caca {
15+
color: white;
16+
background-color: green;
17+
}
18+
19+
/* attribute selector */
20+
a[href="abc.com"] {
21+
color: blue;
22+
background-color: yellow;
23+
}
24+
25+
a[href="xyz.id"] {
26+
color: green;
27+
background-color:gray;
28+
}
29+
30+
/* grouping */
31+
b, i, ins {
32+
color: lightpink;
33+
background-color: magenta;
34+
}
35+
36+
/* descendant selector */
37+
header h3, header p {
38+
color: maroon;
39+
background-color: yellowgreen;
40+
}
41+
42+
/* child selector */
43+
article > p {
44+
color: red;
45+
background-color: lightskyblue;
46+
}
47+
48+
article > main > p {
49+
color: yellow;
50+
background-color: brown;
51+
}
52+
53+
/* adjacent selector */
54+
h6 + small + small {
55+
color: gold;
56+
background-color: indigo;
57+
}

css/2_pseudo.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
h3 {
2+
color: white;
3+
}
4+
5+
/* h3:first-child {
6+
background-color: red;
7+
}
8+
h3:last-child {
9+
background-color: green;
10+
}
11+
h3:nth-child(2),
12+
h3:nth-child(3),
13+
h3:nth-child(4) {
14+
background-color: hotpink;
15+
} */
16+
17+
/* h3:nth-child(odd) {
18+
background-color: lightblue;
19+
}
20+
h3:nth-child(even) {
21+
background-color: lightpink;
22+
} */
23+
24+
h3:nth-of-type(odd){
25+
background-color: green;
26+
}
27+
h3:nth-of-type(even){
28+
background-color: red;
29+
}
30+
31+
h3:first-letter {
32+
color:black;
33+
background-color: yellow;
34+
}
35+
36+
h3:first-line {
37+
color:red;
38+
background-color: lightgrey;
39+
}
40+
41+
h1:hover {
42+
color: red;
43+
background-color: yellow;
44+
}
45+
46+
input:focus {
47+
background-color: lightgreen;
48+
}
49+
50+
input:active {
51+
background-color: yellow;
52+
}

css/3_props.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
/* background:
3+
/* linear-gradient(90deg, blue, yellow); */
4+
/* radial-gradient(blue, yellow) */
5+
6+
/* background: url("dora.png"); */
7+
background-position: center;
8+
background-repeat: no-repeat;
9+
}
10+
11+
#p1 {
12+
/* rgb value */
13+
/* color: rgb(234, 122, 16);
14+
background-color: rgb(14, 13, 13); */
15+
16+
/* hsl hue saturation lightness */
17+
/* color: hsl(233, 92%, 49%) */
18+
19+
/* alpha transparency */
20+
color: yellow;
21+
background-color: hsla(233,92%,49%,0.1);
22+
}
23+
24+
#p2 {
25+
/* hexadecimal code */
26+
color: #00FF00;
27+
background-color: #FF0000;
28+
}
29+
30+
h3 {
31+
font-family: 'Gloria Hallelujah';
32+
font-style: italic;
33+
text-transform: uppercase;
34+
text-decoration: line-through;
35+
text-shadow: -4px 4px 4px red;
36+
letter-spacing: 3px;
37+
word-spacing: 6px;
38+
text-align: center;
39+
}
40+
41+
.area {
42+
background-color: tomato;
43+
color: white;
44+
width: 50%;
45+
/* height: 50px; */
46+
padding-top: 10px;
47+
padding-bottom: 10px;
48+
padding-left: 10px;
49+
padding-right: 10px;
50+
border: 5px outset yellow;
51+
border-radius: 10px;
52+
box-shadow: -3px 3px 3px blue;
53+
margin-top:25px;
54+
margin-bottom:20px;
55+
margin-left:10px;
56+
margin-right:29px;
57+
}

css/4_transform.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.area {
2+
height: 100px;
3+
width: 100px;
4+
background-color: blue;
5+
margin: 20px;
6+
}
7+
8+
#boxTranslasi {
9+
transform:
10+
translate(100px, 100px);
11+
}
12+
13+
#boxRotasi {
14+
transform:
15+
rotate(45deg);
16+
}
17+
18+
#boxScale {
19+
transform:
20+
scale(0.5,0.5);
21+
}
22+
23+
#boxSkew {
24+
transform:
25+
skew(10deg, 10deg);
26+
}
27+
28+
#boxMulti {
29+
transform:
30+
translate(0px, 100px)
31+
rotate(60deg)
32+
scale(0.75, 0.5)
33+
skew(20deg, 20deg)
34+
}

css/5_3dtransform.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.box {
2+
height: 100px;
3+
width: 100px;
4+
margin: 10px;
5+
background-color: lightcoral;
6+
}
7+
8+
#translasi3d {
9+
transform:
10+
perspective(700px)
11+
translateX(100px)
12+
translateY(100px)
13+
translateZ(-2000px)
14+
}
15+
16+
#rotasi3d {
17+
transform:
18+
perspective(700px)
19+
rotateX(45deg)
20+
rotateY(60deg)
21+
rotateZ(45deg)
22+
}

css/6_transisi.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.box{
2+
width: 100px;
3+
height: 100px;
4+
background-color: lightseagreen;
5+
transition: 1s 1s;
6+
}
7+
8+
.box:hover {
9+
background-color: goldenrod;
10+
height: 200px;
11+
transform:
12+
rotate(45deg);
13+
}

css/7_posisi.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.boxA {
2+
background-color: lightskyblue;
3+
padding: 10px;
4+
color: blue;
5+
margin-bottom: 30px;
6+
}
7+
8+
.boxB {
9+
background-color: lightpink;
10+
padding: 10px;
11+
color: red;
12+
}
13+
14+
#box2b {
15+
position: relative;
16+
top: 20px;
17+
left: 20px;
18+
}
19+
20+
#box3b {
21+
position: absolute;
22+
top: 20px;
23+
left: 20px;
24+
}
25+
26+
#box4b {
27+
position: fixed;
28+
top: 50px;
29+
left: 50px;
30+
}

css/8_col.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.kolom {
2+
column-count: 3;
3+
column-gap: 100px;
4+
column-rule: 10px double blue;
5+
}

0 commit comments

Comments
 (0)