THE COMPLETE CSS CHEAT SHEET

TABLE OF CONTENT

TOPIC PAGE
Font, Text, Background, 2
Color
The Box Model 3

Column, animation, Transition 4

Pseudo-classes and element, 5

units of measurement

Position, Outliine, List, 6

Transform
Semantic tags, Tables, Lists &
Images
7

CSS Grid, Flexbox 8

Powered by TRENIDE TECH
Definition Reference: w3schools
TRENDIETECH.COM
FONT | TEXT | BACKGROUND | COLOR
FONT
The CSS font properties define the font family, boldness, size, and the style of a text

font-family font-size
Generic Family - Serif, Sans-serif, Monospace Default: 16px.
-Font families: Times New Roman, Verdana, Courier New - values: px, %, em, rem, vw, small, large, etc.
font-style font-weight
Mostly used to specify italic text. Sets how thick chars in text shld b displayed
-Values: normal, italic, oblique -Values: normal, bold, bolder, lighter, 100 - 900
font-stretch font-variant
Allows you to make text narrower or wider For displaying caps letters with a smaller text size
-Values: normal, condensed, expand, ultra-condensed,
ultra-expanded, semi-condensed, extra-condensed -Values: normal, small-caps, inherit
TEXT
text-decoration text-align
Specifies the decoration added to text Set the horizontal alignment of texts in a div
- Values: underline, overline, line-through - Values: right, left, justify, center

direction text-overflow
Set text direction from left to right or vice versa Specifies how overflowed text shld b displayed
- Values: rtl, ltr, inherit, initial - Values: clip, ellipsis, stringz
text-transform text-shadow
Controls the capitalization of text eg. text-shadow: 2px 2px 8px #FF0000
- Values: capitalize, uppercase, lowercase, none - Value order: horizontal, vertical, blur-radius, color
text-indent letter-spacing
Specifies indentation of the 1st line in a text-block increase/decreases space betwn chars in atext
- Values: px, em, %. etc - Value: px, em, etc
BACKGROUND
Short hand eg - background: lightblue url("img_tree.gif") no-repeat fixed center;
-Order: background-color, background-image, background-repeat, background-attachment, background-position

background-color text-align
Specifies the background color to be used Specifies 1 or more bg images to be used
- Value: color (name, hex, rgba, hsl) - Values: URLs, seperated with a comma

background-position background-size
Specifies the position of the background images Specifies the size of the background images
- Values: center(commonly used), left center, etc - Values: cover(common), auto, contain
background-attachment background-repeat
Specifies mov't of element relative to container Sets if/how a bg image will be repeated
- Values: scroll, fixed, local - Values: repeat, no-repeat, repeat-x, repeat-y, space
background-origin background-clip
Specifies the positioning area of the bg images Specifies the painting area of the bg images
- Values: border-box-padding-box, content-box - Values: border-box-padding-box, content-box

COLOR
Common Hex: White - #ffffff, Black - #000000, Red - #ff0000, Green - #00ff00, Blue - #0000ff....See the pattern?
Common rgb: White - rgb(255,255,255), Black - rgb(0, 0, 0), Red - rgb(255, 0, 0), Green - ? Same Pattern - ff = 255
TRENDIETECH.COM
 CSS BOX MODEL
It is essentially a box that wraps around every HTML element. It consists of: margins, borders,
padding, and the actual content
-Unless Specified, Value is always a length(px, em, rem, etc) or %
CONTENT
The content of the box, where text and images appear.

height & Width max-height & max-width

Specifies the height & width of content Cannot be exceeded by height or width value

float display
Positions elements to far left or right Specifies if/how an element is displayed
- Values: left, right. Make sure the elements are the only 2 in - Values: none, block, inline, inline-block
their div. Float one left & the other right

BORDER
A border that goes around the padding and content, not visible until given a width
- Value: border-width, border-style, border-color eg. border: 3px, solid, red; ( in that order
- BORDER STYLES: solid, dotted, dashed, double. 3D versions - groove, ridge, inset, outset. none, hidden
Values can also be properties on their own. eg. border-style: 3px; border-top-color: 8px; border-right-style: solid;
border-top border-right
Specifies only the top border Specifies only the right border
- Same values and same arrangement as border - Same values and same arrangement as border

border-bottom border-left
Specifies only the bottom border Specifies only the left border
- Same values and same arrangement as border - Same values and same arrangement as border

MARGIN
Used to create space around elements, outside of any defined borders
- Value: margin-top, margin-right, margin-bottom, margin-left - eg. margin: 5px, 10px, 5px, 10px;

margin-top margin-right
Specifies only the top margin Specifies only the right margin

margin-bottom margin-left
Specifies only the bottom margin Specifies only the left margin

margin-shorthand margin - shortest hand

When only 2 vals are specifed. eg. margin: 5px 10px  When only 1 value is specifed. eg. margin: 5px
1st val - margin-top & bottom. 2nd val - margin-right &lft The value represent all margins
A D D I NThe
1st val - margin-top & bottom. 2nd val - margin-rightP&lft G value represent all margins
Used to generate space around an element's content, inside of any defined borders
- Value: padding-top, padding-right, padding-bottom, padding-left - eg. padding: 5px, 10px, 5px, 10px;

padding-top padding-right
Specifies only the top padding Specifies only the right padding

padding-bottom padding-left
Specifies only the bottom padding Specifies only the left padding

padding - shorthand padding - shortest hand

When only 2 vals are specifed. eg padding: 5px 10px  When only 1 value is specifed. eg. padding: 5px
1st val - padding-top & bottom. 2nd val - padding-right &lft The value represent all paddings

TRENDIETECH.COM
COLUMN | ANIMATION | TRANSITION
COLUMN
column-count column-fill
Spec no of columns an element shld b divided into Specifies how to fill columns, balanced or not
Values: auto(default), numberm(of columns) - values: balance(default) , auto
column-gap column-rule
Specifies the gap between the columns Sets width, style, & color of rule b/n columns
-Values: length(px, em,rem), normal -Values: column-rule-width, column-rule-style
column-rule-color column-rule-style
Specifies the color of the rule between columns Specifies the style of the rule between columns
-Values: color -Values: none, hidden, dotted, dashed, solid, etc
column-rule-width column-span
Specifies the width of the rule b/n columns Spec how many colmns a elemnt shld span across
-Values: length(px, em,rem), medium, thin, thick -Values: column-rule-width, column-rule-style
column-width columns
Specifies the column width Shorthand for column-width & column-count
-Values: auto, length(px, em, rem) -Values: column-width column-count , auto

ANIMATION
An animation lets an element gradually change from one style to another.
- The animation is declared with @Keyframes, and the following properties are used to modify it's behavior

animation animation-name
A shorthand 4 setting all animation properties Specifies the name of the @keyframes animation
-Values: animation-name, -duration, -timimg-function, -
delay, -iteration-count, -direction -Values: text

animation-duration animation-timing-function
Spec time animation shld take to complete 1 cycle Specifies the speed curve of the animation
- Value: time. eg, 4s -Values: ease, linear, ease-in, ease-out, ease-in-out
animation-delay animation-iteration-count
Specifies a delay for the start of an animation Specif no of times an animation shld b played
- Value: time. eg, 4s - Value: number
animation-direction animation-play-state
Specifies the direction of play of the animation Spec whether animation is running or paused
- Values: normal, reverse, alternate, alternate-reverse - Values: paused, running

TRANSITIONS
Allows you to change property values smoothly, over a given duration.
- To add transition, at least 2 things must bet specified, the transition-property and transition-duration.

transition transition-property
A shorthand 4 setting all transition properties Spec name of CSS propaty the transition effect is for
-Val: transition-property, -duration, -timimg-function, -delay  - Value: CSS Property. eg. width, color
transition-duration transition-delay
Spec time(millisec) it takes to complete transition Spec a delay (in sec) for the transition effect
- Value: time. eg 4 - Value: time eg. 1
transition-timing function Transition vs Animation
Specifies the speed curve of the transition effect Transition is a form of animation
- Except it works on only a start & end value, for more
- Values: ease, linear, ease-in, ease-out, ease-in-out flexibility, use animation
TRENDIETECH.COM
PSEUDO PROPERTIES | UNITS OF MEASUREMENTS
PSEUDO-ELEMENTS
::firt-letter & ::first-line ::before & ::after
Adds special styling to 1st letter & line of a text Adds some content before & after an element

PSEUDO-CLASSES
:link & :visited :focus & :hover
Styles an unvisited link & a visited link An element when with focus &  when u mouser over it

:enabled & :disabled :checked & :selection

Styles an enabled element & a disabled element A checked form element and a highlighted element

:first-child, :last-child & :only-child :nth-child(n) & :nth-last-child(n)

Styles 1st child, last child & only child of an element The nth child & the nth child counting from the end

:first-of-type, :last-of-type & :only-of-type :nth-of-type(n) & :nth-last-of-type(n)

An element that is 1st, last or only type of its siblings The nth sibling or nth counting from last of its siblings

:root :empty
Styles an unvisited link & a visited link An element when with focus &  when u mouser over it

:active :target
Styles an activated element Styles the current active target element

ABSOLUTE UNITS
Absolute measurement units do not change with changing browser window or device screen size
- Not good for responsiveness. use only when you know what you are doing

Centimeter - cm Millimeter - mm
Inch - in Point - pt
RELATIVE UNITS
Relative measurement units change with changing screen size, pixels, width, etc
- Very good for responsivity. Preferred over absolute units

Percentage - % Pixel - px
Styles an unvisited link & a visited link An element when with focus &  when u mouser over it

em Root em - rem
Relative to font size of the current element Relative to font size of root element(mostly <html> )

vh & vw vm
Relative to the viewport height(vh) or width(vw) Relative to vh or vw, whichever is smaller

ANGLES
Degrees - deg Radians - rad
Grads - grad Turns - turn
FREQUENCY
Hertz - Hz Kilo-Hertz - kHz
TIME
Seconds - s Milli-seconds - ms
TRENDIETECH.COM
 POSITION | OUTLINE | LIST | TRANSFORM
POSITION
Specifies the type of positioning method used for an element
Use properties - top, bottom, right, & left to specify the position after specifying the type of positioning

absolute fixed
Relative to it's first positioned ancestor. Relativ to browser window. Fixed to specified location

relative sticky
Relative to the elements original position Relative to a scroll position. first relative then become fixed

OUTLINE
A line that is drawn around elements, outside the borders, to make the element "stand out"
Shorthand - outline: outline-width outline-style outline-color. eg. outline: 2px solid black

outline-width outline-style
Values: length(px, em,etc), medium, thin, thick Values: none, hidden, dotted, dashed. solid, double ect

outline-color outline-offset
Value: color Adds space b/n an outline and the edge or border, value: px

LIST-STYLE
Specifies the styling applied to a list of items, <li>
Shorthand - list-style: list-style-type list-style-position list-style-image. eg. list-style: square inside url("img.jpg")

list-style-type list-style-position
Values: disc(default), square, circle, decimal, armanian, etc Values: outside(default), inside

list-style-image Note
Value: image URL. eg. url(my-img.jpg) Any missing list-style value will be replaced by the default

TRANSFORM
Applies a 2D or 3D transformation to an element. allows you to translate, scale, rotate, skew
Values can be an angle(deg), length(px,em,etc), percentage, decimal(unitless)

translate(x,y) translate3d(x,y,z)
Defines a 2D translation Defines a 3D translation

translateX(x),translateY(y),translateZ(z) scale(x,y)
Defines a translation, using value for the X, Y or Z-axis Defines a 2D scale transformation

scale3d(x,y,z) scaleX(x),scaleY(y),scaleZ(z)
Defines a 3D scale transformation Def a scale trans4mation by givin a val 4 X,Y or Z-axis

rotate(angle) rotate3d(x,y,z,angle)
Defines a 2D rotation along an angle(parameter) Defines a 3D rotation

rotateX(angle),rotateY(angle),rotateZ(angle) skew(x-angle, y-angle)

Defines a 3D rotation along the X, Y or Z-axis Defines a 2D skew transformation along the X & Y-axis

skewX(x-angle), skewY(y-angle) perspective(n)

Defines a 2D skew transformation along the X or Y-axis Defines a perspective view for a 3D transformed element

TRANSFORM Properties
transform-origin transform-style
allows changing the position of transformed elements Specifies how nested elements are rendered in 3D space

TRENDIETECH.COM
 SPEECH | CSS SELECTORS
SPEECH
Essentially converts your document into speech and feeds it into screen reader for the user
- It is best for people with impaired vision or people with reading problems.
cue cue-before & cue-after
Sets the cue properties in one declaration Sound to play b4 & after speaking elemnt's contnt
-Values: cue-before, cue-after -Values: none, url
elevation pause
Sets where the sound should come from Sets the pause properties in one declaration
-Values: angle,below,level,above,higher,lower -Values: pause-before, pause-after
pause-before & pause-after voice-family
A pause b4 & after speaking an element's content Specifies the voice family of the speaking
-Values: time, % -Values: male, female, child, other specifics
pitch pitch-range
Specifies the speaking voice Specifies the variation in the speaking voice.
-Values: frequency, x-low, low, medium, high, x-high -Value: number
play-during richness
A sound to play while speaking an elemnt's content Specifies the richness of the speaking voice.
-Values: auto, none, url, mix repeat -Values: number
speak speak-header
Specifies whether content will render aurally Specifies how to handle table headers
-Values: normal, nonne, spell-out -Values: always, once
speak-numeral volume
Specifies how to speak numbers Specifies the volume of the speaking
-Values: digits, continuous -Values: number, %, silent, soft, medium, loud
speech-rate stress
Specifies the speed of the speaking Specifies the "stress" in the speaking voice
-Values: number, slow, medium, fast, slower, etc -Values: number

CSS SELECTORS
Used to "find" (or select) the HTML elements you want to style.
categories of selectors: simple(name,id,class), combinator, Pseudo-classes, pseudo-elements, attribute

Universal - * Name
Selects all elements Select using element name
- eg. * { color: red; } -eg. p { font-size: 18px; }
Class - . id - #
Select single or multiple elements using their class Select a sinlge element using its unique id
-eg. .button { color: #ffffff } -eg #submit-button { disabled: true }

Attribute - [] Pseudo-class - :
Select an elemnt that has a particular attribute To Style an element in a particular state. 
-eg.  a[target="_blank"] { color: #00ff00; } -eg  a:hover { background-color: 0000ff; }
Pseudo-element - :: Multiple Elements
To style specified part of an element to give multiple elements the same styling
-eg. p::first-line { color: ff0000 } -eg. h1, p, .button { font-size: 17px; }
Child - > Descendant
To style a direct child of an element To style a descendant, could be child or lower
-eg. .caption > p { color: ff0000 } -eg. .caption p { color: ff0000 }
TRENDIETECH.COM
 CSS GRID | FLEXBOX
GRID
Offers a grid-based layout system, with rows and columns, making it easier to design web pages 
- grid: grid-template-rows -template-columns -template-areas -auto-rows -auto-columns -auto-flow
grid-template-columns grid-template-rows
Specif no(& widths) of columns in a grid layout Specifies no(& heights) of the rows in a grid layout.
-Values: none, auto, max-content, min-content, length -Values: none, auto, max-content, min-content, length
grid-auto-flow grid-template
Controls how auto-placed items get inserted in grid Shorthand property 4 the grid template properties
-Values: row, column, dense, row dense -grid-template: grid-template-rows, -template-columns

grid-auto-rows grid-auto-columns
Sets a size 4 the rows in a grid container Sets a size 4 the columns in a grid container
-Values: auto, max-content, min-content, length -Values: auto, max-content, min-content, length
grid-row grid-column
Shorthand property for the grid-row properties Shorthand property for the grid-column properties
- grid-row: grid-row-start grid-row-end - grid-column: grid-column-start grid-column-end
GRID-AREA
Specifies a grid item's size and location in a grid layout. Shorthand property for:
- grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end

grid-row-start grid-column-start
Specif on which row to start displaying the item Specif on which column to start displaying the item
-Values: auto(default), row-line -Values: auto(default), span n, column-line
grid-row-end grid-column-end
Specif on which row-line to stop displaying the item Specif on which column-line to stop displaying item
-Values: auto(default), span n, column-line -Values: auto(default), span n, column-line

GRID-GAP
Defines the size of the gap between the rows and columns in a grid layout
- grid-gap: grid-row-gap, grid-column-gap.

grid-row-gap grid-column-gap
Sets the size of the gap b/n rows in a grid layout Sets the size of the gap b/n columns in a grid layout
Value: length( px, etc), %. 0 is default Value: length( px, etc), %. 0 is default

CSS FLEXBOX
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
-Flex container properties: flex-direction, flex-wrap, flex-flow, justify-content, -align-items, align-content
display flex-wrap
Specifies the type of box used for an HTML element Specifies whether the flex items should wrap or not
Set value to "flex" to use flexbox - Values: nowrap, wrap, wrap-reverse
flex-direction justify-content
Specif direction of the items inside a flex container Horizontally aligns the flex items
Values: row, row-reverse, column, column-reverse Values: flex-start, flex-end, center, space-between, space-around

flex-flow align-content
Shorthand property 4 flex-direction and flex-wrap Modifies behavior of the flex-wrap property
- flex-flow: flex-direction flex-wrap Values: stretch, center, flex-start, flex-end, space-between, etc

align-items order
Vertically aligns the flex items Specif order of a flexible item relative to the rest
Values: stretch, center, flex-start, flex-end, baseline - Value: number. default = 0.
TRENDIETECH.COM