ECMAScript 6 Primer

CSS

Syntax

selectors

select by id #id
select by element type p {text-align: center; color: red;}
select by class: .center
combined: p.center

group:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

h1,
h2,
p {
  text-align: center;
  color: red;
}

comments:

p {
  color: red;
  /* This is a single-line comment */
  text-align: center;
}

/* This is
a multi-line
comment */

refer to style sheet:

External style sheet

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Internal style sheet

<head>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>

Inline style

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Cascading Order: all the styles will "cascade" into a new "virtual" style sheet by the following rules:
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section)
- Browser default

Colors
- Background Color: background-color:Tomato;
- text color: color:MediumSeaGreen;
- border: border:2px solid Violet;
- Color values:
  - rgba(255, 99, 71, 0.5) , or hex: #ee82ee
  - hsla(9, 100%, 64%, 0.5)
    - Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
    - Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
    - Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
  - Shades of gray are often defined using equal values for all the 3 light sources: rgb(180, 180, 180) hsl(0, 0%, 0%)

backgrounds

body {
  background-color: lightblue;
  background-image: url('paper.gif');
  background-repeat: repeat-x|no-repeat;
  background-attachment: fixed;
  background-position: right top;
  background-size: 300px 100px;
  background-size: auto|length|cover|contain|initial|inherit;
}

short:

background: #ffffff url('img_tree.png') no-repeat right top;
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment
  initial|inherit;

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

Borders

p.one {
  border-style: solid;
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
  border-width: 5px;
  border-color: red;
  border: 5px solid red;
  border-radius: 5px;
  border-collapse: separate|collapse|initial|inherit;
}

Margins
Paddings
Height/Width
Box Model
Outline

Text

h1 {
  color: blue;
  text-align: left|right|center|justify|initial|inherit;
  text-decoration: text-decoration-line text-decoration-color
    text-decoration-style|initial|inherit;
  text-decoration-line: none|underline|overline|line-through|initial|inherit;
  text-transform: uppercase|lowercase|capitalize;
  text-indent: 50px;
  letter-spacing: 3px;
  line-height: 0.8;
  direction: rtl;
  word-spacing: 10px;
  text-shadow: 3px 2px red;
}

Fonts
Icons
Links
Lists
Tables
Display
- Block
- inline
- display: none|inline|block;
max-width

position

position: static|relative|fixed|absolute|sticky;