-
Notifications
You must be signed in to change notification settings - Fork 0
/
september_10.html
75 lines (71 loc) · 4.2 KB
/
september_10.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
<!DOCTYPE html>
<html>
<head>
<title>Jarod Reichel's Web Dev Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>CS 347 Blog Entry - September 10, 2021</h1>
</header>
<main>
<h2>Part I: Types of CSS</h2>
<p>One thing I read about on my own this week was how there are three main different types of CSS. The first type, <span class="definition">inline</span>, applies to a single instance of an element and is implemented using the style attribute. The second type, an <span class="definition">internal stylesheet</span>, is implemented using the <span class="code_inline"><style></span> tag, which is usually located within <span class="code_inline"><head></span>. This is useful when a site has only one page, or different pages need different styling. The third type, an <span class="definition">external stylesheet</span>, consists of a separate file containing the CSS with the .css extension, which is linked to the HTML via a <span class="code_inline"><link></span> tag, as shown below. The external stylesheet is great for when multiple pages need consistent styling, as with many large sites.</p>
<h3>External Stylesheet Sample</h3>
<div style="display:inline-block;padding: 25px;">
<h4>index.html</h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</pre>
</div>
<div style="display:inline-block;padding: 25px;">
<h4>styles.css</h4>
<pre>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
</pre>
</div>
<p>The above code and information was sourced from <a href="https://www.w3schools.com/html/html_css.asp">W3Schools.com</a>.</p>
<h2>Part II: CSS Classes and IDs</h2>
<p>Another important thing with CSS that I read about is <span class="definition">classes</span> and <span class="definition">IDs</span>, which are considered a form of CSS <span class="definition">selectors</span>, which determine what element(s) are to be styled, and contain styling code within curly braces. Classes can be used multiple times, for multiple different elements, or even for only a few specific instances of one element. Within CSS, classes are defined with a period (.) followed by the class name (and sometimes prefixed by an element name so that the class can only be applied to instances of that element). IDs, on the other hand, can only be used for one specific instance of an element per page. They are defined in CSS by using the hash (or pound) symbol (#) and the name of the ID. Another CSS selector is the <span class="definition">universal selector</span> (*), which applies the styling to all elements on the page.</p>
<h3>CSS Selectors Example</h3>
<pre>
#para1 {
text-align: left;
color: blue;
}
.center {
text-align: center;
color: red;
}
p.right {
text-align: right;
color: green;
}
</pre>
<p>The above code and information was sourced from <a href="https://www.w3schools.com/css/css_selectors.asp">W3Schools.com</a>.</p>
</main>
<footer>
<p>Site by Jarod Reichel</p>
</footer>
</body>
</html>