-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
377 lines (319 loc) · 18.2 KB
/
index.html
File metadata and controls
377 lines (319 loc) · 18.2 KB
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS QuickStart Guide</title>
<script src="app.js
"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<script src="prism.js"></script>
<div class="container">
<div class="topbar sticky">
<div class="circle">
<img id="logo" src="programming_society_logo.png" alt="logo">
</div>
<div class="heading"> CSS QuickStart Guide</div>
<nav class="links-bar">
<ul>
<li><i style="color: aliceblue;" class="fa fa-github"></i> </li>
<li><i style="color: aliceblue;" class="fa fa-instagram"></i> </li>
<li><i style="color: aliceblue;" class="fa fa-twitter"></i> </li>
</ul>
</nav>
</div>
<div class="main">
<div class="card">
<div class="number-holder">
<div class="number">
1
</div>
<div class="play-button number">
<i class="fa fa-play" onclick="runCSS('code3','output3')"></i>
</div>
</div>
<div class="card-content">
<div='content-wrapper'>
<div class="card-heading"> Padding</div>
<br>
<div class="card-subheading"> padding </div>
<p class="card-text">
CSS Padding property defines the space between the element content and the element border. <br> Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties
at once by using shorthand padding property.
<br>
<br>
<code>padding</code> It is used to set all the padding properties in one declaration. <br>
<code>padding-left</code> It is used to set left padding of an element. <br>
<code>padding-right</code> It is used to set right padding of an element. <br>
<code>padding-top</code> It is used to set top padding of an element. <br>
<code>padding-bottom</code> It is used to set bottom padding of an element. <br> You can either use length fixed padding in pt, px, em etc, or you can use %, which defines padding in % of containing element.
<pre><code class="language-css">
.box{
border : 1px solid black;
padding-top: 50px ;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</code></pre>
</p>
<p class="card-text">
Try to modify the shown box's padding
</p>
<div class="demo-code">
<div class="code">
.box1 {
<br>
<textarea name="code1" id="code3" cols="40" rows="10" spellcheck="false"></textarea>
<br> }
</div>
<div class="output">
<div class="box" id="output3"> 0000000 </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="number-holder">
<div class="number">
2
</div>
<div class="play-button number">
<i class="fa fa-play" onclick="runCSS('code1','output1')"></i>
</div>
</div>
<div class="card-content">
<div='content-wrapper'>
<div class="card-heading"> Borders </div>
<br>
<div class="card-subheading">border</div>
<p class="card-text">
CSS Borders allow developers to style their elements very easily.
<pre><code class="language-css">border: 5px solid red;</code></pre> The <code> border </code> property is a shorthand property for: <code> border-width border-style (required) border-color. </code> <br> If border-color is omitted,
the color applied will be the color of the text.
<br> Diffferent border-styles are : <code> solid, dashed, double , groove, ridge, inset , outset, dotted </code>
</p>
<div class="card-subheading">border-radius</div>
<p class="card-text">
The border-radius property defines the radius of the element's corners.
<br> Tip: This property allows you to add rounded corners to elements!
<pre> <code class="language-css">border-radius: 15px 50px 30px 5px;
// top-left top-right bottom-right bottom-left</code></pre>
</p>
<p class="card-text">
Try to modify how box1 looks by writing code in the textarea, add a red dashed border of size 2px, and changer the border radius to 20px
</p>
<div class="demo-code">
<div class="code">
.box1 {
<br>
<textarea name="code1" id="code1" cols="40" rows="10" spellcheck="false"></textarea>
<br> }
</div>
<div class="output">
<div class="box" id="output1"> BOX 1</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="number-holder">
<div class="number">
3
</div>
<div class="play-button number">
<i class="fa fa-play" onclick="runCSS('code2','output2')"></i>
</div>
</div>
<div class="card-content">
<div class="card-heading"> Text </div>
<br>
<div class="card-subheading">color</div>
<p class="card-text">
The <code>color</code> property is used to set the color of the text. The color is specified by: a color name - like 'red' , a HEX value like '#ff000', an RGB value - like rgb(255,0,0)
<pre><code class="language-css">body {color: blue;} h1 {color: green;}</code></pre> The <code> border </code> property is a shorthand property for: <code> border-width border-style (required) border-color. </code> <br> If border-color is omitted, the color applied will be the color of the text.
<br> Diffferent border-styles are : <code> solid, dashed, double , groove, ridge, inset , outset, dotted </code>
</p>
<div class="card-subheading">text-align</div>
<p class="card-text">
The <code> direction</code> and <code>unicode-bidi</code>properties can be used to change the text direction of an element:
<pre><code class="language-css">
div {
text-align: justify;
}
</code></pre>
</p>
<div class="card-subheading">direction</div>
<p class="card-text">
The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. The following example shows center aligned, and left and right aligned text (left alignment is default if text direction
is left-to-right, and right alignment is default if text direction is right-to-left):
</p>
<pre><code class="language-css">
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</code></pre>
<div class="card-subheading">text-decoration</div>
<p class="card-text">
The <code>text-decoration</code> property is used to set or remove decorations from text. The value <code>text-decoration: none;</code> is often used to remove underlines from links:
<pre><code class="language-css">
h1 {
text-decoration: overline // line-through , underline ;
}
</code></pre>
</p>
<div class="card-subheading">text-transform</div>
<p class="card-text">
The <code>text-transform </code> property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
<pre><code class="language-css">
p.uppercase {
text-transform: uppercase // lowercase , capitalise;
}
</code></pre>
</p>
<div class="card-subheading">letter-spacing</div>
<p class="card-text">
The <code>text-indent</code> property is used to specify the indentation of the first line of a text. <br> The <code> letter-spacing </code> property is used to specify the space between the characters in a text. <br> The <code> line-height </code> property is used to specify the space between lines. <br> The <code> word-spacing </code> property is used to specify the space between the words in a text. <br> The <code> white-space </code> property specifies how white-space
inside an element is handled.
<pre><code class="language-css">
p {
text-indent: 50px;
letter-spacing: 3px;
line-height: 0.8;
word-spacing: 10px;
white-space: nowrap;
}
</code></pre>
</p>
<div class="card-subheading">text-shadow</div>
<p class="card-text">
The <code>text-shadow</code> property adds shadow to text.
<pre><code class="language-css">
h1 {
text-shadow: 2px 2px 5px red; // horizontal vertical shadow-color blur-value
}
</code></pre>
</p>
<p class="card-text">
Try to modify the text in the div so that the resulting text has blue text-color and red shadow, giving a 3d glass look!
</p>
<div class="demo-code">
<div class="code">
.textdiv {
<br>
<textarea name="code2" id="code2" cols="40" rows="10" spellcheck="false"></textarea>
<br> }
</div>
<div class="output">
<p class="box" style="width: 200px ; padding: 10px; border: none;" id="output2"> Some Text to be modified, and styled, a random para which is not loreem ipsum. Sad Business Really </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="number-holder">
<div class="number">
4
</div>
<div class="play-button number">
<i class="fa fa-play" onclick="runCSS('code4','output4')"></i>
</div>
</div>
<div class="card-content">
<div class="card-heading"> Borders </div>
<br>
<div class="card-subheading">height</div>
<p class="card-text">
This CSS property sets the height of an element. It is used to set the height of content area of an element.
<br> It does not include padding borders or margins, whereas it sets the height of the area inside the padding, border, and margin of the element. It can accept the length and percentage values. But it does not allow negative values.
<br> If we set the height to a numeric value (like in px, %, etc.), the content can be overflow if it does not fit in the given height. We can manage the overflowing content by defining the overflow property. If the height of the
container is not explicitly defined, and the element is not absolutely positioned (i.e., position: absolute;), the value of height property is set to auto. The min-height and max-height properties can also be used to control the
size. It can have the following values : <br>
<code>auto</code> It is a default value. Using this value browser is responsible for calculating the height of the element. Negative values are not allowed. <br>
<code>length</code> It specifies the height of an element using the length units such as px, cm, pt, etc. Negative values are not allowed. <br>
<code>%</code> It defines the height of the container in %. Negative values are not allowed. <br>
<code>initial</code> It is used to set the property to its default value. <br>
<code>inherit</code> It is used to inherit the property from its parent element. <br>
</p>
<div class="card-subheading">width</div>
<p class="card-text">
he CSS width property is used to set the width of the content area of an element. <br> It does not include padding borders or margins. It sets width of the area inside the padding, border, and margin of the element.
<pre> <code class="language-css">
.SomeRandomClass {
height : 10em ;
width : max-content ;
}
</code></pre>
</p>
<p class="card-text">
Try to modify the height and the width of box1
</p>
<div class="demo-code">
<div class="code">
.box1 {
<br>
<textarea name="code1" id="code4" cols="40" rows="10" spellcheck="false"></textarea>
<br> }
</div>
<div class="output">
<div class="box" id="output4"> BOX 1</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="number-holder">
<div class="number">
5
</div>
<div class="play-button number">
<i class="fa fa-play" onclick="runCSS('code5','output5')"></i>
</div>
</div>
<div class="card-content">
<div class="card-heading"> Font </div>
<br>
<div class="card-subheading"> font </div>
<p class="card-text">
CSS Font property is used to control the look of texts. <br> By the use of CSS font property you can change the text size, color, style and more. You have already studied how to make text bold or underlined. Here, you will also
know how to resize your font using percentage. These are some important font attributes:
<br> <br>
<code>font-color </code>: This property is used to change the color of the text. (standalone attribute) <br>
<code>font-family </code>: This property is used to change the face of the font. <br>
<code>font-size </code>: This property is used to increase or decrease the size of the font. <br>
<code>font-style </code>: This property is used to make the font bold, italic or oblique. <br>
<code>font-variant </code>: This property creates a small-caps effect. <br>
<code>font-weight </code>: This property is used to increase or decrease the boldness and lightness of the font <br>
<pre><code class="language-css">.AnotherRandomClass {
font-color : red ;
font-family : Verdana ;
font-size : 10vh ;
font-style : italic ;
font-weight : 200 ;
} </code></pre>
</p>
<p class="card-text">
Try to modify the Font properties of text inside the box
</p>
<div class="demo-code">
<div class="code">
.text {
<br>
<textarea name="code1" id="code5" cols="40" rows="10" spellcheck="false"></textarea>
<br> }
</div>
<div class="output">
<div class="box" id="output5" style="height: max-content; width: max-content;"> Lorem ipsum dolor sit amet <br> consectetur adipisicing elit. <br> Eveniet, ex vel. Vitae delectus libero </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>