Table:   <table class="cssclass">   <tr>   <td rowspan="2" class="cssclass">1</td>   <td colspan="3" class="cssclass">2</td>   </tr>   <tr>   <td class="cssclass">3</td>   <td class="cssclass">4</td>   <td class="cssclass">5</td>   </tr>   </table>

Cell Spacing:   border-spacing:0px;   border-collapse:collapse;   border-collapse:separate;

Vertical alignment:   vertical-align:top;   vertical-align:middle;   vertical-align:bottom;

Lists:   <ol class="css_class">   <li>item here</li>   </ol>
<ul class="css_class">   <li>item here</li>   </ul>

• Nested Lists: <ul style="margin:0px; list-style-image:url(design/star1.gif);">   <li class="level1"> level1 </li>   <li class="level2"> level2 </li>   </ul>
• li.level1 { margin:0px 0px 0px 0px; }   li.level2 { margin:0px 0px 0px 30px; }

Before and After Pseudo Classes: Pictures, unicode symbols and unicode emoji.
<span class="spanli"> </span> <br>
span.spanli:before { content:url(design/star2.gif); }
span.spanli:after { padding-left:5px; content:"\2661"; font-size:14px; color:#ffa8fc; text-shadow: -1px 1px 0px #ff3e3e; }

Special Characters:     space &nbsp;    < &lt;    > &gt;    & &amp;    ñ &ntilde;    é &eacute;

Width and height:   html { height:100%; width:100%; }   body { height:100%; width:100%; }

Calculate Size:   width: calc(100% - 50px);

Resize and keep aspect ratio:   max-width:100px;   max-height:100px;

Alignment:   text-align:center;   text-align:justify;   text-align:left;   text-align:right;   This sets the alignment of other elements aside from text.

hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden	scrollscrollscroll scrollscrollscroll scrollscrollscroll scrollscrollscroll scrollscrollscroll scrollscrollscroll scrollscrollscroll
horizontalhorizontalhorizontalhorizontalhorizontal	vertical vertical vertical vertical vertical vertical vertical vertical vertical vertical vertical vertical

Overflow:     overflow:hidden;   (no scrollbars)
overflow:scroll;   (both scrollbars)
overflow-y:hidden; overflow-x:scroll;   (horizontal scrollbar)
overflow-y:scroll; overflow-x:hidden;   (vertical scrollbar)

Position: position:relative; can contain position:absolute; and overflow:hidden; can be used with layers.
position:absolute; left:100px; top:10px;   (content scrolls)
position:absolute; right:100px; bottom:10px;   (content scrolls)
position:fixed; top:10px; right:50px;   (always visible on screen)
position:fixed; bottom:10px; left:50px;   (always visible on screen)
position:relative; left:20px; top:10px;   (relative to its original position, can have negative numbers)

Layers:   (largest are on top)   z-index:3;   z-index:2;   z-index:1;

Make elements float:   float:left;   float:right;

Padding: (inside the element border)   padding:10px;   padding:20px 50px 30px 40px;
padding-top:20px;   padding-right:50px;   padding-bottom:30px;   padding-left:40px;

Margin: (space outside the element border)   margin:10px;   margin:10px 5px 10px 5px;
margin-top:10%;   margin-right:5px;   margin-bottom:10%;   margin-left:5px;

Horizontally center elements:   text-align:center;   (on the element containing it)
margin-right:auto;   margin-left:auto;   or   margin: 0px auto 0px auto;   (on the element)

Borders:   border-width:3px;   border-style:solid;   border-color:#000000;   border:1px solid #000000;   border:0px none;   border-top-color:#000000;   border-right-color:#ffffff;   border-bottom-style:dashed;   border-left-width:3px;


Round borders:   horizontal top left, horizontal top right, horizontal bottom right, horizontal bottom left / vertical top left, vertical top right, vertical bottom right, vertical bottom left

border-radius: 5px 25px 5px 25px / 5px 25px 5px 25px;   border-radius: 35px 35px 35px 35px / 35px 35px 35px 35px;

Vertical Center and Bottom Flex Alignment: display:flex; align-items:center; align-items:flex-end; height:100%; width:100%; min-height:???px;

<div class="showbor" style="align-items:center; display:flex; min-height:100px; height:100px; width:150px;"> <div class="showbor" style="width:100px; height:50px; margin:0px auto 0px auto;"> </div> </div>

transparent

#0080ff

Image

Background colors and pictures:   background-color:transparent;   background-color:none;   background-color:#ffffff;   background-image:url(picture.png);

Fixed		Scroll
1 2 3 4 5 6 7		1 2 3 4 5 6 7

Background scrolling:   background-attachment:fixed;   (the background doesn't move)
background-attachment:scroll;   (the background moves with the content)

Repeat		Repeat X
Repeat Y		No Repeat

Tiled background:   background-repeat:no-repeat;   (the background is not repeated)
background-repeat:repeat;   (the background is repeated horizontally and vertically)
background-repeat:repeat-x;   (the background is repeated horizontally)
background-repeat:repeat-y;   (the background is repeated vertically)

right center repeat x		center top repeat y
left 15px top 15px no repeat		center bottom 15px no repeat

Background position:   background-position: 0px 0px;
Other background positions: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom

50% 100%

100% auto

40px 40px

Background size: Use auto to keep the aspect ratio. The % is relative to the element.
background-size: width height;   background-size: auto 100px;   background-size: 100% auto;
Full screen picture background:   html, body { width:100%; height:100%; }
body { background-size: 100% auto; background-repeat:no-repeat; background-position:center center; }

Multiple backgrounds: The attributes must be in the same order, the first background goes on top. background-image:url(blueback.png),url(skyblueline.png); background-repeat:no-repeat,repeat-x; background-position:center top, center center;

Opacity: opacity:1.0; opacity:0.9; opacity:0.8; opacity:0.7; opacity:0.6; opacity:0.5; opacity:0.4; opacity:0.3; opacity:0.2; opacity:0.1;

Gradients: background: linear-gradient(start position, start color, end color);
background:linear-gradient(#0080ff, #c0c0c0);

Box Shadow: box-shadow: horizontal -left +right | vertical -up +down | blur | padding | color

Transition: It can be used with any quantifiable attribute.
#transition1 { height:30%; background-color: #57b8ff; transition: background-color 1s, height 2s; }
#transition1:hover { height:100%; background-color: #ffa6e4; }
<div style="height:100px; position:relative; display:inline-block; float:right; width:30px;"> <div class="showbor" id="transition1" style="width:100%;"></div></div>

Rotation:

1	2	3	4
1	2	3	4

.rotation0 { transition: transform 2s; height:30px; display:inline-block; width:50px; }
#rotation1:hover { transform: rotate(180deg); }
#rotation2:hover { transform: rotate(-90deg); }
#rotation3:hover { transform: rotateX(180deg); }
#rotation4:hover { transform: rotateY(-250deg); }

Animation:   @keyframes anime1 { 0% { height:30%; background-color: #57b8ff; }
55% { height:70%; }
70% { height:70%; background-color: #ffa6e4; }
100% { height:100%; background-color: #ffa6e4; } }

animation-name: anime1;   (animation name, must be unique)
animation-duration: 4s;   (time to complete the animation, s = second and ms = miliseconds)
animation-delay: 0s;   (time before the animation starts)
animation-timing-function: linear;   (same speed throughout animation, I find that the % are better for setting different speeds so I always use this setting)
animation-iteration-count: infinite;   (times the animation is repeat, 1, 2, etc. or infinite)
animation-direction: alternate;   (goes back and forth)
animation-direction: normal;   (play the animation one way)
animation-direction: reverse;   (play the animation backwards)
animation-play-state: running;   (self explanatory, the other option is paused)

Fields go inside the form tags:   <form id="formid" action="#">   </form>
Disable editing on field:   readonly="readonly"
Disable textarea resizing:   textarea { resize: none; }
Default check for checkbox and radio buttons:   checked="checked"

Text box:   document.getElementById("boxname").value
<input class="cssclass" id="boxid" value="content" type="text">

This is a textarea. Text area:   document.getElementById("areaname").value
<textarea class="cssclass" id="areaid"> Message (value) </textarea>

Focus:   input:focus { css here }   (changes while it's selected)

Check boxes and radio buttons:   document.getElementById("idname").checked==true
document.getElementById("idname").checked==false

Check box:   <input type="checkbox" id="cbid">

Radio button:   <input type="radio" name="radname" id="rad1">
<input type="radio" name="radname" id="rad2">

Combo box:   document.getElementById("comboname").value
<select class="cssclass" id="comboid">
<option value="nothing_selected" class="cssclass">Question?</option>
<option value="variable_value" class="cssclass">Option 1</option>
<option value="variable_value" class="cssclass">Option 2</option>   </select>