CSS Cheatsheet

0
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

/* Selectors */
html{}                  /* Applied to the whole page */
p {}                    /* Applied to all 'p' tags */
div,span {}             /* Applied to all 'div' and 'span' tags */
.classname {}           /* Applied to objects belonging to 'classname' class */
div.classname{}         /* Applied to all 'p' tags belonging to 'classname' class*/
#idname {}              /* Applied only to object named 'idname' */
input[type="text"] {}   /* Applied to all 'input' objects whose type is 'text' */

/* Advanced Selectors */
element1 element2 {}    /* Selects all 'element2' objects inside 'element1' */
element1 > element2 {}  /* Selects all 'element2' objects whose direct parent is an 'element1' */
element1 + element2 {}  /* Selects all 'element2' objects placed immediately after 'element1' */
element1 ~ element2 {}  /* Selects all 'element2' objects placed (not immediately) after 'element1' */

/* Specifiers */
:active {}          /* Selects all active links (a:active) */
:checked {}         /* Selects all checked input tags (input:checked) */
:disabled {}        /* Selects all disabled input tags (input:disabled) */
:enabled  {}        /* Selects all enabled input tags (input:enabled) */
:first-child {}     /* Selects only elements that are first children of a parent container */
:last-child {}      /* Selects only elements that are last children of a parent container */
:nth-child {}       /* Selects only elements that are the nth children of a parent container */
:nth-last-child {}  /* Selects only elements that are the nth children of a parent container, counting from the last one */
:first-of-type {}   /* Selects only elements that appear as first object in a parent container */
:last-of-type {}    /* Selects only elements that appear as last object in a parent container */  
:nth-of-type {}     /* Selects only elements that are placed in the nth position in a parent container */
:nth-last-of-type {}/* Selects only elements that are placed in the nth position in a parent container, counting from the last one */
:focus {}           /* Change properties when focus is on the object */
:hover {}           /* Change properties when mouse is over the object */
:required {}        /* Selects all required input tags (input:required) */
:visited {}         /* Selects all visited links (a:visited) */

0
1
2
3

/* Text and Backgorund Colors */
color: #ff0000;
background-color: #f0f0f0;

0
1
2
3
4
5
6
7
8
9

/* Font Properties */
font: bold 16px 'Arial', sans-serif;
font-size: 16pt;
font-weight: lighter|normal|bold|bolder|[1-1000]:
font-style: normal|italic|oblique;
font-family: Arial|Verdana|Serif|...;
text-align: start|end|justify|center;
text-decoration: line-through|underline|overline|none wavy|dotted|dashed|solid #000;
line-height: 10px;

0
1
2
3
4
5
6
7

/* Box Model */
margin: 10px;               /* Adds the same margin to all directions */
margin: 1px 2px 3px 4px;    /* Adds the different margin to the four directions (top right bottom left) */
margin: auto;               /* Center the obeject with respect to its parent (vertically and horizontally)*/
padding: 10px;              /* Adds the same padding to all directions */
padding: 1px 2px 3px 4px;   /* Adds the different padding to the four directions (top right bottom left) */
border: 1px solid|dashed|dotted|double|ridge|inset|outset|hidden|none #000;     /* Add a border to the box */

0
1
2
3
4
5
6
7

/* Size Definition */
width: 300px;               /* Defines the width of the box */
min-width: 150px;
max-width: 400px;
height: 200px;              /* Defines the height of the box */
min-height: 150px;
max-height: 400px;

0
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

/* Elements Display */
display:    inline          /* The element is diplayed in line to adjacent elements (height and width have no effect) */
            block           /* The element is diplayed in a new line and expand to the whole width */          
            flex            /* Displays the element as a flex container */
            grid            /* Displays the element as a grid container */
            inline-block    /* The element in displayed as an inline element but width and height are not ignored */
            table           /* The element is displayed as a <table> table: use this for the parent element and the following values for the children */
            table-cell      /* The element is displayed as a <td> table cell */
            table-column    /* The element is displayed as a <col> table column */
            table-row       /* The element is displayed as a <tr> table row */
            none            /* Do not diplay the element (it is not shown in the page) */
            initial         /* Use the default value for that element */
            inherit         /* Inherit diplay property from parent */
position:   static          /* Default; Element is placed following the flow of the page */
            relative        /* Element position is changed, as specified by top, right, bottom, left properties, with respect to its normal position */
            fixed           /* The element is fixed always in the same position in the page, even if the page scrolls */
            absolute        /* Like relative but the element is placed with respect to the parent and not to its normal position */
            sticky          /* The element is relative when the page is not moving and fixed if the element would be out of the viewport */    

/* FlexBox display */
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
flex-flow: myflexdirection myflexwrap;
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
align-items: normal|stretch|start|center|end|flex-start|flex-end|baseline;
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;

0
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

/* Transitions and Animations */
transition: property duration functionName;
@keyframes functionName {
  from {transform: translateX(-100%);}
  to {transform: translateX(0);}
}

transition: property duration functionName;
@keyframes functionName {
  0% {transform: translateX(-100%);}
  45% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

/* Media Queries */
@media screen and (max-width: 768px) {}

/* Sass */
$primary-color: #3498db;
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* Less */
.border-radius(@radius: 5px) {
  border-radius: @radius;
}
@import "styles.less";

/* Vendor Prefixes */
.box {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}