Learn-CSS-From-Scratch/003 CSS Selector.html at main · iFarouqDev/Learn-CSS-From-Scratch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
	<title>CSS Selector</title>
	<style type="text/css">
		/*p{
			color: red;
			text-align: center;
		}*/
		/*  and if you want to specify the style on each paragraph line or any HTML Tag, you can use either of the following attribute:
		- "id" attribute
		- "class" attribute as follow...
		*/
		/*#para1{
			color: darkgreen;
		}

		.center{
			text-align: center;
		}
		p.center{
			text-align: center;
		}*/


		/* Long way/Process of styling an elements that has the same style definition*/
		/*h1{
			text-align: center;
			color: red;
		}
		h2{
			text-align: center;
			color: red;
		}
		p{
			text-align: center;
			color: red;
		}*/

		/* Shortage way to style an elements that has the same style definition */
		h1,h2,p{
			text-align: center;
			color: red;
		}
	</style>
</head>
<body>
	<!--p>Every paragraph will be affected by the style.</p>
	<p id="para1">Me too!</p>
	<p>And Me!</p>

	<h1 class="center">This Heading will not be affected.</h1>
	<p class="center">Red and Center-aligned Paragreph.</p-->

	<!-- IF YOU HAVE AN ELEMENT WITH THE SAME STYLE DEFINITION, LIKE ... -->

	<h1><i>IF YOU HAVE AN ELEMENT WITH THE SAME STYLE DEFINITION, LIKE ...</i></h1>

	<h1>Hello world!</h1>
	<h2>Smaller header!</h2>
	<p>This is a paragraph.</p>

</body>
</html>