-
Notifications
You must be signed in to change notification settings - Fork 0
/
Learningcss - Copy.html
401 lines (279 loc) · 9.21 KB
/
Learningcss - Copy.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
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
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
Example of external css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Some Tips regarding using Css
When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them.
reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
to have it , for example
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
Some general Knowledge
/* All p elements are red */
p {
color: red;
}
The class or id of an HTML element are also used as selectors. Note that CSS uses the prefix # for IDs and . for Classes.
/* All the elements with the class "important" are red */
.important {
color: red;
}
/* The element with the id "header" is bolded */
#header {
font-weight: bold;
}
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}
A CSS comment is placed inside the <style> element, and starts with /* and ends with */
Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
body {
background-image: url("paper.gif");
}
Repeat images as
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
and if To repeat an image vertically, set background-repeat: repeat-y;
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
background-position: right top;
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
For scroll write scroll there
Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
Border Stlyle
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;
border-width:2px ;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
<p class="inset"> dfdkjf </p>
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
p {
border: 2px solid red;
border-radius: 5px;
} To round border
Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
The margin property is a shorthand property for the following individual margin properties:
margin-top
margin-right
margin-bottom
margin-left
So, here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
div {
width: 300px;
margin: auto;
border: 1px solid red;
}lement will then take up the specified width, and the remaining space will be split equally between the left and right
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
} lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>)
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Bigger one is choosen
padding: 25px;
all four paddings are 25px
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
} the width dont change to 350 and remains to 300 px
To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
<!-- Outline width -->
thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc
outline-width: thick; outline-color: red; outline-color: invert;
The following example uses outline-color: invert, which performs a color inversion. This ensures that the outline is visible, regardless of color background
outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
<!-- Effects on Text -->
text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Align image
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
Text Decoration
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
Defining Outline
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
<!-- Topic CSS ! Important -->
p {
background-color: red !important;
} This will overirde all intially commands given
<!-- CSS Specificity -->
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
h1 {background-color: yellow;}
h1 {background-color: red;}
Implement downside one
A class selector beats any number of element selectors - a class selector such as .intro beats h1, p, div, etc:
p {
font-size: 25px;
line-height: 50px; Line height specifies diatance between two <p>
}
<!-- Topic Website Layout -->
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Now comes the navigation bar
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Further we will go for creating colums and rows in main content
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>