Skip to content

Commit 674f0c6

Browse files
LintangWisesaLintangWisesa
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)