-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab_034.html
132 lines (125 loc) · 7.66 KB
/
lab_034.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
<!doctype html>
<html lang="en">
<head>
<title>
Lab 34 - Colors and Text
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body data-lab-id="34">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 34</em>
Colors and Text
</h1>
<h2>Goals</h2>
<ul>
<li>Learn about colors and text in CSS</li>
</ul>
<h2>Color</h2>
<p>Some CSS properties take a color as its value. CSS comes with a few keywords which define built-in colors.
You can use <code class="language-css">red</code>,
<code class="language-css">aqua</code>, <code class="language-css">antiquewhite</code>,
<code class="language-css">blue</code>, <code class="language-css">silver</code>, <code
class="language-css">transparent</code>, and more to reference colors.
</p>
<p>CSS also accepts <strong>RGB</strong>, <strong>HSL</strong>, and <strong>hexadecimal</strong> colors.
If you've ever used a digital art program or Photoshop you probably know what these are, but if you haven't, here's
a quick rundown.
<p>
<ul>
<li><strong>RGB</strong> stands for <em>red</em>, <em>green</em>, <em>blue</em> and describes the amount of
each color used in combination to make other colors. Defined in CSS as
<code class="language-css">rgb(0, 0, 255)</code> with each number between 0 and 255.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>RGBa</strong> as <code
class="language-css">rgba(0, 0, 255, 0.5)</code>to define an <em>alpha</em> or transparency value between
0 and 1.</p>
<li><strong>HSL</strong> stands for <em>hue</em>, <em>saturation</em>, <em>lightness</em> and describes the
color in terms of these values. Defined in CSS as <code class="language-css">hsl(240, 100%, 50%)</code>
with the first number being the hue angle on a color wheel between 0 and 360, the second being the saturation
between 0% and 100%, and the third being the lightness between 0% and 100%.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>HSLa</strong> as <code
class="language-css">hsla(240, 100%, 50%, 0.5)</code>.</p>
<li><strong>Hexadecimal</strong> colors are a way of representing RGB colors in a more compact way. Defined in
CSS as <code class="language-css">#0000ff</code> with the first two characters representing the amount of
red, the second two characters representing the amount of green, and the last two characters representing the
amount of blue. Each character is a hexadecimal (base-16) digit between 0 and f.</li>
<p class="note"><strong>Note:</strong> If the pairs share a letter it can be shortened even further to three
characters.
<code class="language-css">#0000ff</code> can be shortened to <code class="language-css">#00f</code>.
</p>
</ul>
<h2>Text</h2>
<p>The different text properties that we will consider are <code class="language-css">font-size</code>, <code
class="language-css">font-family</code>, <code class="language-css">font-weight</code>, <code
class="language-css">font-style</code>, <code class="language-css">text-decoration</code>, <code
class="language-css">text-transform</code>, and <code class="language-css">text-align</code>.
</p>
<p>Some of these are pretty self-explanatory, but we'll go over them!</p>
<ul>
<li><code class="language-css">font-size</code> changes the size of the font. Common units are <code>px</code> or
pixels and <code>pt</code> or point like in word processing programs.</li>
<p class="note"><strong>Note:</strong> Make sure you don't use <code class="language-css">font-size</code>
as a crutch instead of proper semantic HTML e.g. headings. Headings should use the proper tags and not be
large font paragraphs.</p>
<li><code class="language-css">font-family</code> affects the actual font itself. In order to load fonts, browsers
will need the font to be on a website visitor's computer. There are a few <em>web-safe</em> fonts that are generally
available across most browsers and systems. You can define multiple comma-separated fonts as a backup in case a font
is not found.</li>
<pre><code class="language-css">font-family: "Helvetica", "Arial", "sans-serif";</code></pre>
<p class="note"><strong>Note:</strong> If you want to use a font that's not a standard font,
we highly recommend using Google's Web Fonts. Their tutorial on how to import them is here:
<a href="https://developers.google.com/fonts/docs/css2" target="_blank" rel="noopener">https://developers.google.com/fonts/docs/css2</a></p>
<li><code class="language-css">font-weight</code> determines whether a font is <code>bold</code> or <code>normal</code>. You can also
specify weights in numbers e.g. (100, 200, 500) but we suggest sticking with <code>bold</code> or <code>normal</code>.</li>
<li><code class="language-css">font-style</code> determines whether a text is <code>italic</code> or not.</li>
<li><code class="language-css">text-decoration</code> describes lines above, through, or below text. It can take the following
values: <code>underline</code>, <code>overline</code>, <code>line-through</code> and <code>none</code>.</li>
<li><code class="language-css">text-transform</code> will change the case of the text. It can take the following
values: <code>capitalize</code>, <code>lowercase</code>, <code>uppercase</code>, and <code>none</code>.</li>
<li><code class="language-css">text-align</code> will align text within it's parent container. It can take the following
values: <code>left</code>, <code>right</code>, <code>center</code>, and <code>justify</code>.</li>
</ul>
<h2>Apply Some CSS</h2>
<p>Using the minimum style sheet, apply some styling to the colors and text on your website! If you don't know where
to start, find inspiration from other websites or start with an idea of what you would like.</p>
<p>Try to use each of the property once to understand how they work. If you are stuck or would like help achieving a certain style,
head over to <a href="https://github.com/hack4impact-calpoly/starter-pack/discussions" target="_blank" rel="noopener">GitHub Discussions</a>!</p>
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad: true, theme: "base"});
</script>
</body>
</html>