-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlearn.html
264 lines (257 loc) · 11.2 KB
/
learn.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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS City | Learn CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Single page tutorial to teach the basics of CSS to beginners">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/sane.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="./js/main.js" defer></script>
<script type="text/javascript" src="./js/download.js" defer></script>
<!-- <base href="https://css.city/"> -->
</head>
<body>
<header>
<nav>
<a id="menu-title" href="index.html">
<span>CSS</span>
<img id="logo" src="assets/city-sunset.png" alt="City at sunset">
</a>
<ul>
<li><a href="learn.html">Learn</a>
<ul>
<li><a href="learn.html">Introduction</a></li>
<li><a href="learn/01-selectors.html">Selectors</a></li>
<li><a href="learn/02-colors.html">Colors</a></li>
<li><a href="learn/03-typography.html">Typography</a></li>
<li><a href="learn/04-units.html">Units</a></li>
<li><a href="learn/05-positioning.html">Positioning</a></li>
<li><a href="learn/06-box-model.html">Box Model</a></li>
<li><a href="learn/07-layout.html">Layout</a></li>
<li><a href="learn/08-specificity.html">Specificity</a></li>
<li><a href="learn/09-beyond-the-basics.html">Beyond the Basics</a></li>
</ul>
</li>
<li><a href="practice.html">Practice</a>
<ul>
<li><a href="practice/building-memory.html">Building Memory</a></li>
<li><a href="practice/playground.html">Experimenting</a></li>
<li><a href="practice/playing-games.html">Playing Games</a></li>
</ul>
</li>
<li>
<a href="reference.html">Reference</a>
<ul>
<li><a href="reference/articles.html">Articles</a></li>
<li><a href="reference/resources.html">Resources</a></li>
<li><a href="reference/strategies.html">Strategies</a></li>
<li><a href="reference/templates.html">Templates</a></li>
</ul>
</li>
<li><a href="tools.html">Tools</a></li>
</ul>
</nav>
</header>
<main>
<p class="construction">Work in progress</p>
<h1>Learn CSS</h1>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr> stands for Cascading Style Sheets. CSS is a sister technology to
Hypertext Markup Language (HTML), because it
enables you to modify the
appearance of your HTML. If you think of a website as a house, then HTML is used to provide structure like the
frame, walls, appliances
and furniture, while CSS is used to paint the walls, hang the lights, frame the pictures, and even to position
your furniture.
</p>
<p>
This introduction to CSS assumes that you know basic HTML. If you have not learned HTML yet, then I recommend you
read <a href="https://html.haus/learn.html">HTML.Haus</a> for an easy to read single page tutorial.
</p>
<h2>What is CSS?</h2>
<p>
CSS is a specific language for styling web pages written in HTML. You can change the color and size of HTML
elements with CSS. You can change the font of
textual elements, as well as characteristics like bold, italics, and spacing. You can change the layout of a web
page as well as where the
elements display on the page. If HTML lets you build with raw materials, then CSS gives you a paint brush, a
measuring tape, a level, all the tools
you need to refine the appearance, layout, and style of a page.
</p>
<p>
If you completed the <a href="https://html.haus/learn.html">HTML.Haus</a> tutorial, then you've already seen a
little CSS, at least in its simplest
form. The easiest way to start using CSS is by applying it directly to individual elements using the
<em>style</em> attribute in your HTML:
</p>
<figure class="html">
<figcaption>HTML</figcaption>
<textarea readonly>
<p style="color: royalblue">Think of London, a small city</p>
</textarea>
</figure>
<p style="color: royalblue">Think of London, a small city</p>
<h3>Inline Styles</h3>
<p>
This way of using CSS is called in-line styling, because the styles appear in the same line as the HTML. You can
probably see the shortcomings
of this approach almost immediately. If you want to make all your paragraphs display in blue, then you'll have to
add this style attribute to each one.
That's going to quickly add up to a lot of duplicative work, and if you ever want to change the color later on,
then it'll be even more work to update
each one.
</p>
<h3>Build to Learn</h3>
<p>
Before we go any further, as a part of active learning it's important to do exercises and practice, as well as
read and comprehend.
Actively exercising the knowledge you just learned actually ingrains that knowledge in your brain, making it
accessible later on.
For that reason, for every concept we learn, I highly recommend you try it yourself. Take the sample I provide and
make it your own
by changing the styling. Typing it out and practicing will really help with your retention. You will learn best
through this
tutorial by building a number of sample pages and styling them alongside the exercises.
</p>
<p>
Learn as you build.
</p>
<h3>Embedded Styles</h3>
<p>
Let's get back to our problem of having to add a style attribute to every HTML element we want to change. There's
an easier way to do this.
If you want to add styles to an entire page, then you can also put these in the head section of your HTML.
</p>
<p>Here's an example:</p>
<figure class="html">
<figcaption>HTML</figcaption>
<textarea readonly id="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Playground</title>
<style>
p {
color: royalblue;
}
</style>
</head>
<body>
<h1>Let's Paint the Town</h1>
<p>I'm excited you're starting your CSS journey. Let's learn how to style together!</p>
<p>We'll be stronger together, and learning CSS while expanding your knowledge of HTML is the way to go.</p>
</body>
</html></textarea>
</figure>
<p>
Copy and paste the code above into a text editor and save it as 'index.html'. Opening it with a browser will give
you a local playground where
you can safely complete the rest of these exercises and continue learning CSS. Just save your file, then reload
your browser to see your changes.
</p>
<p>Alternatively, you can <a href="learn/learn-template.html" download="learn-template.html" id="download">click
here to Download the HTML</a>.</p>
<p>
As you can see in your local playground, we've changed the color of both paragraphs. How'd we do it? These 5 lines
of code:
</p>
<figure class="html">
<figcaption>HTML</figcaption>
<textarea readonly>
<style>
p {
color: royalblue;
}
</style></textarea>
</figure>
<p>What we see defined above is a CSS rule. Each CSS rule is composed of three parts: selector, property, and value:
</p>
<img class="diagram" src="assets/style-embedded.svg" alt="annotated diagram of style element" height="160">
<p>These three parts break down succinctly as:</p>
<ul>
<li><strong>Selector</strong> defines the target of the rule or what part of the HTML this rule will be applied on
(e.g. all p tags or paragraphs).</li>
<li><strong>Property</strong> defines what about the target is going to be changed, so in this case it's the font
color of paragraphs.</li>
<li><strong>Value</strong> defines the property's new setting, so in this case, the font color property now has a
value of royalblue.</li>
</ul>
<p>
This second way of defining styles is more useful, because you can define rules that apply to an entire HTML web
page. Think of all the HTML elements you know.
You can now change the color of anything! However, once again, you're probably already asking questions about the
shortcomings that might accompany using the
style tag in the head of your document.
</p>
<p>Questions like:</p>
<ul>
<li>What if I have a lot of CSS rules? My head element will be really big.</li>
<li>What if I want to share the same styles across multiple pages?</li>
</ul>
<p>The final (most widely accepted) way to incorporate CSS into HTML is through using external stylesheets.</p>
<h3>External Styles</h3>
<p>
You can link to a separate CSS file where you save all of your rules apart from your HTML. This answers both of
the questions above, because now you can reference
as many external stylesheets as you need, and you only need a single line of code for each stylesheet. Let's see
what that looks like.
</p>
<p>Your <strong>index.html</strong> file would contain the following:</p>
<figure class="html">
<figcaption>HTML</figcaption>
<textarea readonly>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Playground</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Let's Paint the Town</h1>
<p>I'm excited you're starting your CSS journey. Let's learn how to style together!</p>
<p>We'll be stronger together, and learning CSS while expanding your knowledge of HTML is the way to go.</p>
</body>
</html></textarea>
</figure>
<p>
Do you see the new link element in the head?
</p>
<figure class="html">
<figcaption>HTML</figcaption>
<textarea readonly>
<link rel="stylesheet" href="styles.css"></textarea>
</figure>
<p>While your <strong>styles.css</strong> file (which needs to be in the same directory) would contain the rule:</p>
<figure class="css">
<figcaption>CSS</figcaption>
<textarea readonly>
p {
color: royalblue;
}
</textarea>
</figure>
<p>
By adding the link element, identifying the relative reference as being to a stylesheet, and through using the
href attribute to refer to the location of that stylesheet,
you tell the browser what CSS rules to apply to the HTML document it just received. The CSS sheet referenced can
contain any number of rules.
</p>
<p>
Now that we understand how to incorporate CSS in our HTML, let's learn the different ways we can select elements.
</p>
<br>
<a class="button" href="learn/01-selectors.html"><strong>Next:</strong> Learn Selectors <i
class="arrow right"></i></a>
</main>
<!-- More images
<img src="assets/jonathan-roger-LY1eyQMFeyo-unsplash.jpg" alt="City skyline in the evening bathed in blue and purple light by Jonathan Roger on Unsplash" width="60%">
<img src="assets/alex-knight-Ys-DBJeX0nE-unsplash.jpg" alt="City at night in blue, green, and pink light by Alex Knight on Unsplash" width="60%"> -->
<footer>
<!-- Created by <a href="https://rchillard.com/">RCH</a> -->
</footer>
</body>
</html>