Code/css notes.html at master · vigisbig/Code · 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
65
66
67
68
69
70
71
72
p {
	color:red; 	}		<!-- p is Selector. Here, it means that whatever
						is there in the paragraph, apply it red color.
						Whatever is present inside the curly brackets is called
						declaration. Color is the property and red is the value-->

p {

	color:blue;
	font-size:20px; <!-- more than one declaration made -->
	width:300px;
}

h {

	color:green;
	font-size:60px; <!-- collection of css 					rules is called 							stylesheet -->
	text-align:center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Selectors</title>
<style>

/* all h2 elements */
h2 {
  color: red;
  text-align: center;
}


/* all with class="highlight" */
.highlight {
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
  background-color: green;
  opacity: .6;
}

/* element with id="mainPoint" */
#mainPoint {
  font-size: 24px;
  font-weight: bold;
  background-color: red;
  opacity: .7;
}

/* all p AND h1 elements */
p,h1 {
  color: black;
  text-align: center;
}

</style>
</head>
<body>

<h1>Simple Selectors (h1)</h1>
<h2>Subheading 1 (h2)</h2>
<p class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet alias est? Nobis cum quasi at soluta odit, maiores quaerat dolores expedita ex nemo ea repellendus dolorem sed maxime quos?</p>
<p class="highlight">Paragraph with attribute class="highlight". Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Subheading 2 (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nemo ipsum dolores vel modi magnam veniam alias at nam. Voluptatem officiis dolor dolorem aspernatur dolorum modi ipsa, nobis animi aut!</p>
<div>This is the main point of the entire article. So, attribute
<span id="mainPoint">id="mainPoint".</span> </div>

</body>
</html>