-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcssstudy.html
More file actions
157 lines (150 loc) · 8.9 KB
/
Copy pathcssstudy.html
File metadata and controls
157 lines (150 loc) · 8.9 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/study.css">
<script defer src="../js/study.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<title>CSS REVIEW</title>
</head>
<body>
<section>
<nav class="navbar">
<div class = "brand-title">CSS</div>
<a href = "#" class = "toggle-button">
<span class = "bar"></span>
<span class = "bar"></span>
<span class = "bar"></span>
</a>
<div class = "navbar-links">
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "htmlstudy.html">HTML</a></li>
<!-- <li><a href = "#">CSS</a></li> -->
<li><a href = "flexboxstudy.html">Flexbox/ Grid</a></li>
<li><a href = "javascriptstudy.html">Javascript</a></li>
</ul>
</div>
</nav>
<div class = "title"> <h1>Music</h1> </div>
<div id = "music-player">
<img src="../images/backButton.png" alt="" id = "previous" class = "back-forward">
<img src="../images/play.png" alt="" id = "icon" >
<img src="../images/nextButton.png" alt="" id = "next" class = "back-forward">
</div>
<div class="container">
<div class="accordion">
<div class="accordion-item" id = "question1">
<a class = "accordion-link" href="#question1">
What element selector selector matches a element based on its id?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The Id Selector matches a element based on its id attribute.</p>
</div>
</div>
<div class="accordion-item" id = "question2">
<a class = "accordion-link" href="#question2">
What defines a relative measurement for the height of a font in em spaces?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>em − A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.</p>
</div>
</div>
<div class="accordion-item" id = "question3">
<a class = "accordion-link" href="#question3">
What property is used to increase or decrease how bold or light a font appears?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The font-weight property is used to increase or decrease how bold or light a font appears.
</p>
</div>
</div>
<div class="accordion-item" id = "question4">
<a class = "accordion-link" href="#question4">
What property changes the style of top border?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The border-top-style changes the style of top border.</p>
</div>
</div>
<div class="accordion-item" id = "question5">
<a class = "accordion-link" href="#question5">
What property in CSS is used to change the background color of an element ?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The background-color property is used to specify the background color of an element. The background of an element covers the total size, including the padding and border and excluding margin.</p>
</div>
</div>
<div class="accordion-item" id = "question6">
<a class = "accordion-link" href="#question6">
What property in CSS used to change the text color of an element?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the font color of an element. In CSS, we use color values for specifying the color. We can also use this property for the border-color and other decorative effects.</p>
</div>
</div>
<div class="accordion-item" id = "question7">
<a class = "accordion-link" href="#question7">
What CSS property used to control the elements font-size?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The font-size property in CSS is used to specify the height and size of the font. It affects the size of the text of an element. Its default value is medium and can be applied to every element.</p>
</div>
</div>
<div class="accordion-item" id = "question8">
<a class = "accordion-link" href="#question8">
Which HTML attribute is used to define the inline styles?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>If you want to use inline CSS, you should use the style attribute to the relevant tag. The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.</p>
</div>
</div>
<div class="accordion-item" id = "question9">
<a class = "accordion-link" href="#question9">
Are the negative values allowed in padding property?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The negative values are not allowed when using the padding property.
</p>
</div>
</div>
<div class="accordion-item" id = "question10">
<a class = "accordion-link" href="#question10">
Which CSS property is used to specify the space between every letter inside an element?
<ion-icon name="add-outline" class = "add"></ion-icon>
<ion-icon name="remove-outline" class = "remove"></ion-icon>
</a>
<div class="answer">
<p>The letter-spacing property in CSS is used to control the space between every letter inside an element or the block of text. It sets the spacing behavior between the characters of the text. Using this property, we can increase or decrease the space between the characters of the text.</p>
</div>
</div>
</div>
</div>
<div id = userColor>
<h1>Don't like the background color?</h1>
<h2 id = "change-it"= >Click here to change it</h2>
</div>
</section>
</body>
</html>