summaryrefslogtreecommitdiffhomepage
path: root/css.html.markdown
blob: e421e1b1abd22d77ab5eb2e7f210dc2af3847297 (plain)
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
---
language: css
contributors:
    - ["Mohammad Valipour", "https://github.com/mvalipour"]
---

In early days of web there was no visual elements, just pure text. But with the  
further development of browser fully visual web pages also became common.   
CSS is the standard language that exists to keep the separation between   
the content (HTML) and the look-and-feel of web pages.

In short, what CSS does is to provide a syntax that enables you to target   
different elements on an HTML page and assign different visual properties to them.

Like any other language, CSS has many versions. Here we focus on CSS2.0   
which is not the most recent but the most widely supported and compatible version.

## Selectors

```css
/* let's stick to the tradition and show how comments are made first! */

/* Generally, the primary statement in CSS is very simple */
selector { property: value; /* more properties...*/ }

/* the selector is used to target an element on page.

You can target all elments on the page! */
* { color:red; }

/*
Given an element like this on the page:

<div class='some-class class2' id='someId' attr='value' />
*/

/* you can target it by it's class name */
.some-class { }

/*or by both classes! */
.some-class.class2 { }

/* or by it's tag name */
div { }

/* or it's id */
#someId { }

/* or by the fact that it has an attribute! */
[attr] { font-size:smaller; }

/* or that the attribute has a specific value */
[attr='value'] { font-size:smaller; }

/* start with a value*/
[attr^='val'] { font-size:smaller; }

/* or ends with */
[attr$='ue'] { font-size:smaller; }

/* or even contains a value */
[attr~='lu'] { font-size:smaller; }


/* and more importantly you can combine these together -- there shouldn't be  
any space between different parts because that makes it to have another  
meaning.*/
div.some-class[attr$='ue'] { }

/* you can also select an element based on how it's parent is.*/

/*an element which is direct child of an element (selected the same way) */
div.some-parent > .class-name {}

/* or any of it's parents in the tree */
/* the following basically means any element that has class "class-name"  
and is child of a div with class name "some-parent" IN ANY DEPTH */
div.some-parent .class-name {}

/* warning: the same selector wihout space has another meaning.  
can you say what? */
div.some-parent.class-name {}

/* you also might choose to select an element based on it's direct  
previous sibling */
.i-am-before + .this-element { }

/*or any sibling before this */
.i-am-any-before ~ .this-element {}

/* There are some pseudo classes that allows you to select an element  
based on it's page behaviour (rather than page structure) */

/* for example for when an element is hovered */
:hover {}

/* or a visited link*/
:visited {}

/* or not visited link*/
:link {}

/* or an input element which is focused */
:focus {}

```

## Properties

```css
/*## Units
can be like :

- 50%: in percent
- 2em: two times the current font-size
- 20px: in pixels
- 20pt: in point
- 2cm: centimeter
- 20mm: millimeter
- 2in: inches

*/

/* ## Colors 

#F6E  -- can be in short hex
#F262E2 -- or in long hex format
red or tomato -- can be a named color
rgb(255, 255, 255) -- in rgb
rgb(10%, 20%, 50%) -- in rgb percent

*/

/* ## Font */
selector {
    font-style: italic; /* or normal */
    font-weight: bold; /* or normal, lighter or a number between 100 and 900*/
    font-size: 2em; /* see units */
    font-family: Verdana, Arial; /* if the first one is not supported the second one is taken.*/
}

/* you can set all in one declaration. */
selector { font: bold italic 12px Consolas; }

/*## Background */
selector {
    background-color: red; /* see colors */
    background-image: url(/path/cat.jpg);
    background-repeat: no-repaet; /* or repeat or repeat-x or repeat-y */
    background-attachment: scroll; /* or fixed */
    background-position: 10px 20px; /* or center, top, bottom, left, right */
}

/* again you can set all in one declaratio */
selector { background: red url(image.jpg) no-repeat center top fixed; }

/*## Box model 

All elements (other than inline elements like span) follow a box model
that consists of the following components.

                             ---------------
                                margin
                             ---------------
                                border
                             ---------------
                                padding
                             ---------------
| margin | border | padding | [width/height] | padding | border | margin
                             ---------------
                                padding
                             ---------------
                                border
                             ---------------
                                margin
                             ---------------

of these components all except margin add to the dimension of the element.

e.g. padding-left: 10px; width: 100px; border-left: 2px;
    => effective width of the element 112px (given all -right components are zero)

*/
selector {
    width: 100px;
    height: 100px;

    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
    padding-right:10px;

    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    
    border-top:10px solid red;
    border-bottom:10px solid red;
    border-left:10px solid red;
    border-right:10px solid red;
}

/* again you can use shorthands 

for padding, margin and border the order is:
[top] [right] [bottom] [left]*/
selector {
    padding: 10px 8px 6px 5px;
    /* same for margin and border*/
}

/* a shorter one!
[top and bottom] [left and right] */
selector {
    padding: 6px 5px;
    /* same for margin and border*/
}

/* and even shorter!
[all sides] */
selector {
    padding: 6px;
    /* same for margin and border*/
}

/* border has three components that can be specified separately */
selector {
    border-left-style: solid; /* or dotted or dashed*/
	border-left-color: red;
	border-left-width: 1px;
}

/* this breakdown can also be done when the shorthand is used. */
selector {
    border-style: solid;
	/* ... */
}

/*## Positioning

elements are normally following the page flow based on where in the markup they are.

some tags like `div` or `p` are full-width and the rest are inline by default.

but all elements can have their layout changed*/
selelctor {
    display: inline; /* inline-block, block, table-cell, et.*/
}

/* elements can be absolutely positioned -- which means they won't follow  
the page flow and will be independently positioned on the screen. */
selector { position:absolute; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }

/* in this case the elements top left will be alighned with the page body.

but if you want it to be relative to an earlier parent.*/
parent-selector { position:relative; }

/* if you want to have the same thing but moving with scroll: */
selector { position:fixed; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }

/* when elements appear on the same absolute position.  
the latest one in the markup appears on top.

unless...*/
selector { z-index: 2; /* or any number higher than others' */ }

/* if you wish your element to follow the markup layout (not absolutely positioned)  
but floated to a side in it's parent:*/
selector { float: left; /* or right */ }

/*## Lists

you can also control how the lists appear on the screen:*/

selector {
    list-style-type: circle; /* disc | square | decimal | etc... */
    list-style-position: inside; /* or outside */
    list-style-image: url(path/image.jpg);
}

/*as always this can be shorthanded */

selector { list-tyle: disc inside url(...); }


```

## Usage

Save any CSS you want in a file with extension `.css`.

```markup
<!-- you need to include the css file in your page's <head>: -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />

<!-- you can also include some CSS inline in your markup. However it is highly  
recommended to avoid this. -->
<style>
   selector { property:value; }
</style>

<!-- or directly set CSS properties on the element. 
This has to be avoided as much as you can. -->
<div style='property:value;'>
</div>

```

## Precedence

As you noticed an element may be targetted by more than one selector. 
and may have a property set on it in more than one.  
In these cases, one of the rules takes precedence over others.

Given the following CSS:
```css
/*A*/
p.class1[attr='value']

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }

```

and the following markdown:
```markdown
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
```

The precedence of style is as followed:  
Note that the precedence is for each **property** in the style and  
not for the entire block.

* `E` has the highest precedence because of the keyword `!important`.  
	It is recommended to avoid this unless it is strictly necessary to use.
* `F` is the next because it is inline style.
* `A` is the next because is more "specific" that anything else.  
	more specific = more specifiers. here 3 specifiers: 1 tagname `p` +   
	class name `class1` + 1 attribute `attr='value'`
* `C` is the next. although it has the same specificness as `B`  
	but it appears after that.
* Then is `B`
* and lastly is `D`.

## Compatibility

Most of the features in CSS2 (and gradually in CSS3) are compatible across  
all browsers and devices. But it's always vital to have in mind the compatiblity  
of what you use in CSS with your target browsers.

[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.

## Further Reading

* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)