-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsprint2-technical.html
135 lines (134 loc) · 6.51 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
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My blog</title>
</head>
<body>
<div id="bg-image">
<div class="container">
<div class="row">
<!--Logo-->
<div class="col-md-2 titlebox text-center" style="top: -160">
<a href="index.html">
<img class="logo" src="KJC.png" alt="KJC logo" width="200" height="200" style="top: 12em;">
</a>
</div>
<!--Sprint 1 Button-->
<div class="col-md-2 navigate-button dropdown">
<button class="dropbtn"><h2>Sprint 1</h2></button>
<div class="dropdown-content">
<a href="blog/sprint1-technical.html">Sprint 1 Technical</a>
<a href="sprint1-cultural.html">Sprint 1 Cultural</a>
</div>
</div>
<!--Sprint 2 Button-->
<div class="col-md-2 navigate-button dropdown">
<button class="dropbtn"><h2>Sprint 2</h2></button>
<div class="dropdown-content">
<a href="sprint2-technical.html">Sprint 2 Technical</a>
<a href="sprint2-cultural.html">Sprint 2 Cultural</a>
</div>
</div>
<!--Sprint 3 Button-->
<div class="col-md-2 navigate-button dropdown">
<button class="dropbtn"><h2>Sprint 3</h2></button>
<div class="dropdown-content">
<a href="sprint3-technical.html">Sprint 3 Technical</a>
<a href="sprint3-cultural.html">Sprint 3 Cultural</a>
</div>
</div>
<!--Sprint 4 Button-->
<div class="col-md-2 navigate-button dropdown">
<button class="dropbtn"><h2>Sprint 4</h2></button>
<div class="dropdown-content">
<a href="sprint4-technical.html">Sprint 4 Technical</a>
<a href="sprint4-cultural.html">Sprint 4 Cultural</a>
</div>
</div>
<!--Sprint 5 Button-->
<div class="col-md-2 navigate-button dropdown">
<button class="dropbtn"><h2>Sprint 5</h2></button>
<div class="dropdown-content">
<a href="sprint5-technical.html">Sprint 5 Technical</a>
<a href="sprint5-cultural.html">Sprint 5 Cultural</a>
</div>
</div>
<!--Horizontal Rule-->
<div class="row">
<div class="col-md-12">
<hr class="main">
</div>
</div>
</div>
<!--Main Content to change-->
<div class="row">
<div class="col-md-12 content">
<h2>What are the best practices associated with using classes vs. ids?</h2>
<p>
In order to understand which practises are best for each. Let’s get a better idea on what exactly classes and IDs are,
and what we use them for. Classes and IDs allows programmers full control over their website.
<br>
Firstly, we should understand that an HTML file contains the structure of the site and a CSS file contains the styling
of the page. In knowing that we can understand how and why we use classes and IDs.
<br>
So HTML classes and IDs are selectors or hooks that you can assign to HTML elements to make them more specific. They act
as additional identifiers to assign CSS to.
</p>
<p id="ID-example">
For example, if I wanted to make this text
look green and bigger than the rest. I have!
</p>
</div>
</div>
<div class="row content">
<!--Steps on how to do it-->
<div class="col-md-6">
<p>I did that by:</p>
<ol>
<li>Assigning the string of text I wanted to make look different an ID</li>
<li>I assigned that specific ID the correct CSS by using the prefix #</li>
</ol>
</div>
<div class="col-md-6">
<img src="ID-assignment.png">
<img src="ID-css.png">
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<p>
And that’s it!<br>
You can do the same thing with classes but instead of # as a prefix you would use a .
<br>
And to call upon that CSS you would use <b>class="example-class"</b> instead of <b>id="example-id"</b>
<br>
But the main property that differs the two selectors is that with an ID it is meant to be unique to the page
whereas a class isn’t. To explain, classes can be used in multiple HTML elements on the same page. And an ID
can only be used once. IDs also have additional unique abilities, such as using them as bookmarks.
<br>
IDs have a unique ability to allow you to jump to a specific element on a page.
</p>
<a href="bookmark.html#bookmark" class="navigate-button">
Click here to see what I mean!
</a>
<p id="continue-reading">To sum that all up we know that:</p>
<ul>
<li>IDs and classes are both selectors to help us customize a webpage</li>
<li>In order to specifically style one element we should use IDs</li>
<li>If there are multiple elements we want to change, we would use classes</li>
<li>IDs have different abilities including the ability to jump to different points in a page.</li>
</ul>
<h2>
So that just shows how powerful it is to know and understand classes and IDs for your HTML and there
is no doubt that any avid programmer should learn about, and how to use them.
</h2>
</div>
</div>
</div>
</div>
</body>
</html>