CSS Cheat Sheet Cheat Sheet (DRAFT) by [deleted]

cm - centim­eters
em - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
in - inches
mm - millim­eters
pc - picas (1 pc = 12 pt = 1/6th of an inch)
pt - points (1 pt = 1/72nd of an inch)
px - pixels (1 px = 1/96th of an inch)

The position property specifies the type of positi­oning method used for an element (static, relative, fixed or absolute)

position: static; - HTML elements are positioned static by default. Static positioned elements are NOT affected by the top, bottom, left, and right proper­ties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

position: relative; - An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relati­vel­y-p­osi­tioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

position: fixed; - An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

position: absolute; - An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. A fixed element does not leave a gap in the page where it would normally have been located.

Media Queries
Box Sizing
Webfonts @font-face
Animations and Transi­tions
Gradients

Inline - HTML elements may have CSS applied to them via the STYLE attribute.

Embedded - By placing the code in a STYLE element within the HEAD element.

Linked/ Imported - Place the CSS in an external file and link it via a link element.

The display CSS property specifies the type of rendering box used for an element.

A block element is an element that takes up the full width available, and has a line break before and after it. <h1­>, <p>, <li­>, and <di­v> are all examples of block elements.

An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <sp­an> are examples of inline elements.

display: inline;
display: block;
display: inline­-block;
display: list-item;
display: table;

There are three main concepts that control the order in which CSS declar­ations are applied:

1. Importance - !important keyword

2. Specif­icity
- Inline styles
- IDs
- Classes attributes and pseudo­-cl­asses
- Elements and pseudo­-el­ements

3. Source order
All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier defini­tions.

Type selector - selects which elements in the DOM the rule applies to. - eg h1, p

In addition to tag names, you can use attribute values in selectors. This allows your rules to be more specific.

Class selectors - Multiple elements in a document can have the same class value. - eg .class

ID selectors - The ID name must be unique in the document. - eg #id

Attribute Selectors - You can specify other attributes by using square brackets. Inside the brackets you put the attribute name, optionally followed by a matching operator and a value. eg [type=­'bu­tton']

Pseudo­-cl­asses selectors - A CSS pseudo­-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

:link
:visited
:active
:hover
:focus
:first­-child
:last-­child
:nth-child
:nth-l­ast­-child
:nth-o­f-type
:first­-of­-type
:last-­of-type
:empty
:target
:checked
:enabled
:disabled

Pseudo­-el­ements - Added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::firs­t-line pseudo­-el­ement targets only the first line of an element specified by the selector. Double colon notation

::after
::before
::firs­t-l­etter
::firs­t-line
::sele­ction
::backdrop
::plac­eholder
::marker
::spel­lin­g-error
::gram­mar­-error