Base of CSS3

CSS

CSS Selectors

• .class
• .class1.class2
• #id
• *
• element
• element.class
• element,element
• element element
• element>element
• element+element
• element1~element2
• [attribute]
• [attribute=value]
• [attribute~=value]
• [attribute!=value]
• [attribute^=value]
• [attribute$=value]
• [attribute*=value]
• :active
• :focus
• :hover

CSS Selectors Reference

Cases of css attributes

display

• display: none;
• display: block;
• display: inline;
• display: inline-block;
• display: flex

block: div / p / h / li inline: span / b / i / a

• justify-content: center;
• justify-content: space-between;

position

• position: static
• position: absolute
• position: relative
• position: fixed
• position: sticky
• position: initial
• position: inherit

  static is default ```css // relative .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; }

#two { position: absolute; top: 20px; left: 20px; background: blue; }

// absolute .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; }

#two { position: relative; top: 20px; left: 20px; background: blue; }

// align cener with flex .container { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

### clear
 - clear: none;
 - clear: left;
 - clear: right;
 - clear: both;

### float
 - float: inherit;
 - float: left;
 - float: right;
 - float: none;
 > If left or right are set, display is ignored.

 
### margin
 - margin: 0 auto; padding: 50px;
 - margin: 5px 0;
 - padding: 1em;

### width, min-width, height, min-height
 - width: 540px; height: 540px;
 - min-height: 200px;

### font 
 - font: 400 14px/1.24 helvetica, arial, sans-serif;
 - font-size: 1.95em;
 - font-size: 123.1%;
 - font: 15px/1.35 Helvetica, arial, sans-serif;
 - font-family: menlo, consolas, monospace;

### text-shadow
 - text-shadow: 0 1px 0 white;

### text-decoration 
 - text-decoration: underline;
 > tags: a
    
### box-sizing: border-box;

### border 
 - border: 1px solid #888;
 - border-left: 2px solid blue;
 - border-radius: 3px;
    
### color
 - color: #2b2b2b;

### background
 - background: transparent;
 - background: #f6f6f6;

### cursor
 - cursor: text;

### white-space
 - white-space: normal;
 - white-space: nowrap;
 - white-space: pre-wrap;
 - white-space: pre;
```css
p.a {
  white-space: nowrap;
}

p.b {
  white-space: normal;
}

p.c {
  white-space: pre;
}

word-wrap

• word-wrap: break-word;

overflow, overflow-wrap

• overflow: hidden;
• overflow: visible;
• overflow-wrap: break-word;

  tags : pre

-moz-box-sizing

• -moz-box-sizing: border-box;

-webkit-box-sizing

• -webkit-box-sizing: border-box;