Skip to content

Commit 62b67cc

Browse files
LintangWisesaLintangWisesa
committed
props
0 parents  commit 62b67cc

9 files changed

+330
-0
lines changed

‎0.css

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

‎0.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<!-- internal styling -->
9+
<style>
10+
h2 {
11+
color: lightblue;
12+
background-color: lightcoral;
13+
}
14+
</style>
15+
<!-- external styling -->
16+
<link rel="stylesheet" type="text/css" href="0.css">
17+
</head>
18+
<body>
19+
<!-- inline styling -->
20+
<h1 style="color:red; background-color: yellow;">
21+
Ini heading 1
22+
</h1>
23+
<h2>Ini heading 2</h2>
24+
<h3>Ini heading 3</h3>
25+
</body>
26+
</html>

‎1_selector.css

+57
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+
}

‎1_selector.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>test CSS</title>
8+
<link
9+
rel="stylesheet"
10+
type="text/css"
11+
href="1_selector.css"
12+
>
13+
</head>
14+
<body>
15+
<!-- tag class id selector -->
16+
<p>Andi</p>
17+
<p class="student">Budi</p>
18+
<p class="student"
19+
id="caca">
20+
Caca
21+
</p>
22+
23+
<hr>
24+
25+
<!-- atribute selector -->
26+
<p><a href="abc.com">
27+
Go to abc.com
28+
</a></p>
29+
<p><a href="xyz.id">
30+
Go to xyz.id
31+
</a></p>
32+
33+
<hr>
34+
<!-- grouping -->
35+
<b>Ini bold</b><br>
36+
<i>Ini italic</i><br>
37+
<ins>Ini underline</ins><br>
38+
39+
<hr>
40+
<!-- descendant selector -->
41+
<h3>
42+
Ini heading 3 di luar header
43+
</h3>
44+
<header>
45+
<h3>Ini heading 3 di dalam header</h3>
46+
<p>Ini paragraf dalam header</p>
47+
</header>
48+
49+
<!-- child selector -->
50+
<hr>
51+
<article>
52+
<p>Ini p di article</p>
53+
<main>
54+
<p>Ini p di main</p>
55+
</main>
56+
</article>
57+
58+
<!-- adjacent selector -->
59+
<hr>
60+
<h6>Ini heading 6</h6>
61+
<small>Andi</small>
62+
<small>Budi</small>
63+
<small>Caca</small>
64+
<small>Deni</small>
65+
66+
<br><br><br><br><br><br><br>
67+
68+
</body>
69+
</html>

‎2_pseudo.css

+52
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+
}

‎2_pseudo.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link
9+
rel="stylesheet"
10+
type="text/css"
11+
href="2_pseudo.css"
12+
>
13+
</head>
14+
<body>
15+
16+
<h3>Ini h3 pertama</h3>
17+
<h3>Ini h3 kedua</h3>
18+
<h3>Ini h3 ketiga</h3>
19+
<h3>Ini h3 keempat</h3>
20+
<h3>Ini h3 kelima</h3>
21+
22+
<h1>Ini heading 1</h1>
23+
24+
<input type="text"
25+
placeholder="Input nama...">
26+
<input type="text"
27+
placeholder="Input usia...">
28+
<input type="text"
29+
placeholder="Input kota...">
30+
<input type="submit"
31+
value="Click me!">
32+
33+
<br><br><br><br><br>
34+
</body>
35+
</html>

‎3_props.css

+57
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+
}

‎3_props.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test CSS</title>
8+
<link
9+
rel="stylesheet"
10+
type="text/css"
11+
href="3_props.css"
12+
>
13+
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
14+
</head>
15+
<body>
16+
<h1>CSS Properties</h1>
17+
<p id="p1">Paragraf 1</p>
18+
<p id="p2">Paragraf 2</p>
19+
<br>
20+
21+
<h3>Tes text</h3>
22+
<br>
23+
24+
<div class="area">
25+
Test area
26+
</div>
27+
<br><br><br><br><br>
28+
29+
</body>
30+
</html>

‎dora.png

53.5 KB
Loading

0 commit comments

Comments
 (0)