-
Notifications
You must be signed in to change notification settings - Fork 1
/
sprint2-technical.html
210 lines (190 loc) · 8.17 KB
/
sprint2-technical.html
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="images/favicon.png" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href='css/clear.css' />
<link rel="stylesheet" type="text/css" href='css/common.css' />
<link rel="stylesheet" type="text/css" href='css/font-awesome.min.css' />
<link rel="stylesheet" type="text/css" href='css/carouFredSel.css' />
<link rel="stylesheet" type="text/css" href='css/prettyPhoto.css' />
<link rel="stylesheet" type="text/css" href='css/sm-clean.css' />
<link rel="stylesheet" type="text/css" href='style.css' />
</head>
<body class="post single-post">
<table class="doc-loader">
<tbody>
<tr>
<td>
<img src="images/document_loader.png" alt="Loading...">
</td>
</tr>
</tbody>
</table>
<nav id="header-main-menu">
<ul class="main-menu sm sm-clean">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="minesweeper.html">Minesweeper</a>
</li>
<br>
<li>
<a>Sprint 1</a>
<ul class="sub-menu">
<li>
<a href="sprint1-technical.html">Technical</a>
</li>
<li>
<a href="sprint1-cultural.html">Cultural</a>
</li>
</ul>
</li>
<li>
<a>Sprint 2</a>
<ul class="sub-menu">
<li>
<a href="sprint2-technical.html">Technical</a>
</li>
<li>
<a href="sprint2-cultural.html">Cultural</a>
</li>
</ul>
</li>
<li>
<a>Sprint 3</a>
<ul class="sub-menu">
<li>
<a href="sprint3-technical.html">Technical</a>
</li>
<li>
<a href="sprint3-cultural.html">Cultural</a>
</li>
</ul>
</li>
<li>
<a>Sprint 4</a>
<ul class="sub-menu">
<li>
<a href="sprint4-technical.html">Technical</a>
</li>
<li>
<a href="sprint4-cultural.html">Cultural</a>
</li>
</ul>
</li>
<li>
<a>Sprint 5</a>
<ul class="sub-menu">
<li>
<a href="sprint5-cultural.html">Cultural</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="content" class="site-content center-relative">
<div class="header-holder">
<div class="toggle-holder relative right">
<div id="toggle">
<div class="first-menu-line"></div>
<div class="second-menu-line"></div>
<div class="third-menu-line"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="background-image-holder">
<img src="demo-images/one_drop_home_image02.jpg" alt="">
</div>
<div class="single-post-wrapper content-1170 center-relative">
<article>
<h1 class="entry-title">Classes and ID's in CSS</h1>
<div class="post-info center-text">
<div class="post-date">1 July 2020</div>
</div>
<div class="entry-content">
<div class="content-wrap">
<h6>What are the best practices associated with using classes vs. ids?</h6>
<p> </p>
<p>Before we get into using Classes and ID's, we need to understand the key differences between
them.<br>ID's are unique. This means that for any element in a webpage, it can only have one
ID. There can also only be that one element with that ID on the website.<br>Classes however,
are not unique. There can be any number of elements on a website that are of the same
class.<br>An element can have styling both from a class, and an ID. If any of the code
clashes between these, the ID code will take priority.</p>
<p> </p>
<p>Therefore, the best practice is as follows:<br>If there is one element that you wish to have
styled differently from other elements on the website, this is where an ID would be
used.<br>If you have multiple elements on the webpage which require the same styling, these
can be all put in the same class.<br>If an element requires MOST of the styling from a
class, but needs some specific adjustment, you can use both here - the code related to the
ID will make the adjustments neccesary.</p>
</div>
</div>
<div class="clear"></div>
</article>
</div>
<div class="nav-links relative">
<div class="absolute logo-holder footer-logo">
<a href="index.html">
<img src="images/default_logo.png" alt="Home" />
</a>
</div>
<div class="nav-previous has-thumb" style="background-image:url(demo-images/one_drop_home_image03.jpg); ">
<div class="nav-previous-content">
<p class="nav-previous-text">PREVIOUS STORY</p>
<a href="sprint1-cultural.html" rel="prev">My Core Personal Values</a>
</div>
</div>
<div class="nav-next has-thumb"
style="background-image:url(demo-images/one_drop_home_image02.jpg); ">
<div class="nav-next-content">
<p class="nav-next-text">NEXT STORY</p>
<a href="sprint2-cultural.html" rel="next">Reflections</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<footer class="footer">
<div class="content-1170 center-relative">
<ul>
<li class="right-footer-contnet">
<a href="https://github.com/aidan-starke" target="_blank" class="icon icon-github nav-item"
title="GitHub">
<span class="nav-img"><img src="images/github-mark.png"></span>
</a>
</li>
</ul>
<div class="clear"></div>
</div>
</footer>
<div class="fixed scroll-top">
<img src="images/back_to_top.png" alt="Go Top">
</div>
<!--Load JavaScript-->
<script src="js/jquery.js"></script>
<script src='js/jquery.fitvids.js'></script>
<script src='js/jquery.smartmenus.min.js'></script>
<script src='js/isotope.pkgd.js'></script>
<script src='js/imagesloaded.pkgd.js'></script>
<script src='js/isotope.pkgd.js'></script>
<script src='js/jquery.carouFredSel-6.0.0-packed.js'></script>
<script src='js/jquery.mousewheel.min.js'></script>
<script src='js/jquery.touchSwipe.min.js'></script>
<script src='js/jquery.easing.1.3.js'></script>
<script src='js/imagesloaded.pkgd.js'></script>
<script src='js/jquery.prettyPhoto.js'></script>
<script src='js/jquery.nicescroll.min.js'></script>
<script src='js/main.js'></script>
</body>
</html>