CSS Note

CSS selectors

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
h1,
h2 {
  ...;
} /* html tag selector, h1-h6 */

#id {
  ...;
} /* id selector */

.class {
  ...;
} /* class selector */

.class img {
  ...;
} /* descendant combinator */

.class:hover {
  ...;
} /* user action pseudo class */

.class:nth-of-type(odd) {
  ...;
} /* location pseudo class
nth-of-type: number or odd/even
first-of-type/last-of-type
nth-child
first-child/last-child
*/

#leftmenu > ul > li > a {
  ...;
} /* child combinator */

.sidebar + h2 {
  ...;
} /* adjacent sibling combinator */

.sidebar ~ h2 {
  ...;
} /* general sibling combinator */

CSS property reference

text style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
color: white; /* default black */
font-size: 18px; /* default 16px */
font-weight: bold; /* default normal */
font-style: italic; /* default normal */

/* whitespace between lines of test */
line-height: 1.5; /* default 1, relative to font-size */
/* space between characters */
letter-spacing: 2px; /* default 0 */

/* visit cssfontstack.com to find more web-safe fonts. */
font-family: Verdana, Arial, sans-serif, cursive, fantasy; /* web-safe fonts, default Arial */
/* serif: Georgia, Times New Roman
sans-serif: Arial, Verdana, Comic Sans, Trebuchet
monospace: Courier New */

text-align: center; /* justify, default left */
text-transform: capitalize; /* uppercase, default none */

container style

The Box Model: element < padding < border < margin

Use chrome dev tools to inspect the box model.

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
width: 100%;
/* relative to parent width, default auto
width: 1em; relative to parent font-size
width: 1rem; relative to html font-size */
backgroud-image: url(../images/image.png);
background-repeat: repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-color: #23cea6; /* RGB, default transparent */
border: 10px solid #a693c2;
border-color: #a693c2;
/* border inside, width, style, color(default text color)
style: solid, dashed, dotted, ridge, double, groove, inset, outset
border-left: xxx; left only */
outline: 10px solid red; /* border outside */

padding: 10px 20px 30px 40px;
/* space between container and content
top right bottom left
top/bottom left/right
top/right/bottom/left */
padding-left: 10px;

margin: 10px 20px 30px 40px;
/* space between container and next element
margin collapse, max(margin-bottom, margin-top) applied */
margin-bottom: 10px;

CSS templates

normalize.css

normalize.css v8.0.1 is a collection of CSS resets and normalizations.

Mobile first design

small.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 16px;
}

medium.css

1
2
3
@media only screen and (min-width: 768px) {
  ...;
}

large.css

1
2
3
@media only screen and (min-width: 1024px) {
  ...;
}