Css Box Model Cheat Sheet

1. Css Code Cheat Sheet
2. Html Css Cheat Sheet Pdf

CSS Cheat Sheet brought to you by pxleyes.com div div, span div span #content.box ul#box span.box. #box. a:link, a:active, a:visited a:hover div span position float top, left, right, bottom display z-index overflow background cursor outline border-collapse clear font-family font-size color font-weight font-style text-decoration text-align. CSS introduced to replace the line-by-line styling attributes. CSS executes at client-side on the browser; It is not a Programming language. Here we have provided the most common CSS cheat snippets which cover CSS gradient, background, button, font-family, border, radius, box and text-shadow generators, color picker and lots more. CSS Conditionals & Hacks Cheat Sheet. The Box Model Problem Hack: This hack comes in handy when you have to support IE 5 and 5.5 and its wacky box model! Creates a text box area. Columns set the width. Use CSS for page layout) Table attributes (only use for email newsletters). HTML Cheat Sheet Author: Mark Branom. Although every body calls this the Box Model it is actually a rectangle having a width & height but no depth. All the HTML elements can be regarded as a 2 dimensional box. The Box Model diagram shows the areas that CSS styles are applied too. The boxes content, text and or graphic images are in the centre of the box, which can be surrounded.

Selectors

basic selectors

div
#itemid	element with id 'itemid'
.class	elements with class '­cla­ss'
div.class	with class '­cla­ss'
div#itemid	with id 'itemid'
div span	within
div, span	and
div + span	after
div > span	with parent
*	all elements
a[attr]	with attribute 'attr'
a[attr=x]	when 'attr' is 'x'

1, 4, 7... 1, 3, 5...pseudo class selectors

a:active	when pressed
a:focus	when focussed
a:hover	when hovered
:first-child	first child element
tr:nth-child(3n+1)
tr:nth-child(odd)

pseudo element selectors

::after	insert content after element
::before	insert content before element
::first-letter	first letter of element
::first-line	first line of element
::selection	selected part of element

form pseudo class selectors

input:checked	checked input
input:disabled	disabled input
input:enabled	enabled input
input:invalid	invalid input
input:required	required input
input:valid	valid input

units

units

px	a pixel
em	percentage of parent font size
rem	percentage of font size
%	percentage of width

text

fonts

color	text color, e.g. #9c6
font-family	e.g. Helvetica, Arial, sans-serif
font-size	px, rem, em or % small, smaller, large, larger
font-style	italic | normal
font-weight	bold | normal 100, 200, ..., 900

styling & spacing

letter-spacing	extra letter spacing, e.g. 2px
line-height	e.g. 1.4
text-align	hor. alig: left | center | right
text-decoration	none | underline
text-transform	uppercase | lowercase | capitalize
white-space	nowrap | pre
word-spacing	extra word spacing, e.g. 2px

lists

list-style-type	none | disc | square | decimal | ...
list-style-image	url(...)
list-style-position	inside | outside

colors & backgrounds

colors

#36f97c	hex color: R=36, G=f9, B=7c
#5c9	shorthand for #55cc99
#36F97C8D	hex color with transparency 8D
rgb(54,249,124)	RGB notation
rgba(54,249,124,0.7)	RGB notation, opacity 0.7
lightcoral	mnemonic notation (don't use)
lightcoral	mnemonic notation (don't use)

backgrounds & images

background-color	e.g. #fff
background-image	e.g. url(img/bg.png) e.g. linear-gradient(#0000, #0003);
background-repeat	no-repeat | repeat | repeat-x | repeat-y
background-size	% | cover | contain
background: #fff url(img_tree.png) no-repeat right top;	background-color: #fff; background-image: url(img_tree.png); background-repeat: no-repeat; background-position: right top;

box model

margins, paddings, border

border-color	e.g. #ccc
border-radius	e.g. 3px
border-style	none | solid | dashed | dotted
border-width	px, rem, em or %
border: 2px solid #900;	border-width: 2px; border-style: solid; border-color: #900;
margin: 10px (same for padding)	margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
margin: 5px 10px (same for padding)	margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;
margin: 5px 10px 15px 20px (same for padding)	margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;

dimensions (doesn't work on inline elements!)

box-sizing	border-box | content-box (include | exclude padding and border)
height	px, rem, em or %
max-width	px, rem, em or %
min-width	px, rem, em or %
width	px, rem, em or %

other

box-shadow

e.g. 10px 10px 5px #888; (left, top, blur, color)

other

transitions

transition-property	all | css property
transition-duration	number of seconds
transition: background 0.3s;	transition-property: background; transition-duration: 0.3s;

miscellaneous

cursor	auto | pointer | help | not-allowed
calc()	e.g. width: calc((100% - 250px) / 3)
var()
@media()

layout

appearance

display	none | block | inline | inline-block
opacity	e.g. 0.7 (70% opaque)
visibility	hidden | visible
overflow (same for overflow-x, overflow-y)	hidden | visible | scroll | auto

1, 4, 7... 1, 3, 5...pseudo class selectors

a:active	when pressed
a:focus	when focussed
a:hover	when hovered
:first-child	first child element
tr:nth-child(3n+1)
tr:nth-child(odd)

pseudo element selectors

::after	insert content after element
::before	insert content before element
::first-letter	first letter of element
::first-line	first line of element
::selection	selected part of element

form pseudo class selectors

input:checked	checked input
input:disabled	disabled input
input:enabled	enabled input
input:invalid	invalid input
input:required	required input
input:valid	valid input

units

units

px	a pixel
em	percentage of parent font size
rem	percentage of font size
%	percentage of width

text

fonts

color	text color, e.g. #9c6
font-family	e.g. Helvetica, Arial, sans-serif
font-size	px, rem, em or % small, smaller, large, larger
font-style	italic | normal
font-weight	bold | normal 100, 200, ..., 900

styling & spacing

letter-spacing	extra letter spacing, e.g. 2px
line-height	e.g. 1.4
text-align	hor. alig: left | center | right
text-decoration	none | underline
text-transform	uppercase | lowercase | capitalize
white-space	nowrap | pre
word-spacing	extra word spacing, e.g. 2px

lists

list-style-type	none | disc | square | decimal | ...
list-style-image	url(...)
list-style-position	inside | outside

colors & backgrounds

colors

#36f97c	hex color: R=36, G=f9, B=7c
#5c9	shorthand for #55cc99
#36F97C8D	hex color with transparency 8D
rgb(54,249,124)	RGB notation
rgba(54,249,124,0.7)	RGB notation, opacity 0.7
lightcoral	mnemonic notation (don't use)
lightcoral	mnemonic notation (don't use)

backgrounds & images

background-color	e.g. #fff
background-image	e.g. url(img/bg.png) e.g. linear-gradient(#0000, #0003);
background-repeat	no-repeat | repeat | repeat-x | repeat-y
background-size	% | cover | contain
background: #fff url(img_tree.png) no-repeat right top;	background-color: #fff; background-image: url(img_tree.png); background-repeat: no-repeat; background-position: right top;

box model

margins, paddings, border

border-color	e.g. #ccc
border-radius	e.g. 3px
border-style	none | solid | dashed | dotted
border-width	px, rem, em or %
border: 2px solid #900;	border-width: 2px; border-style: solid; border-color: #900;
margin: 10px (same for padding)	margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
margin: 5px 10px (same for padding)	margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;
margin: 5px 10px 15px 20px (same for padding)	margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;

dimensions (doesn't work on inline elements!)

box-sizing	border-box | content-box (include | exclude padding and border)
height	px, rem, em or %
max-width	px, rem, em or %
min-width	px, rem, em or %
width	px, rem, em or %

other

box-shadow

e.g. 10px 10px 5px #888; (left, top, blur, color)

other

transitions

transition-property	all | css property
transition-duration	number of seconds
transition: background 0.3s;	transition-property: background; transition-duration: 0.3s;

miscellaneous

cursor	auto | pointer | help | not-allowed
calc()	e.g. width: calc((100% - 250px) / 3)
var()
@media()

layout

appearance

display	none | block | inline | inline-block
opacity	e.g. 0.7 (70% opaque)
visibility	hidden | visible
overflow (same for overflow-x, overflow-y)	hidden | visible | scroll | auto

positioning (position element based on coordinates)

position	absolute | relative | fixed
top right bottom left	px, rem, em or %

float / clear (float / prevent content around element)

float	none | left | right
clear	none | left | right | both

Css Code Cheat Sheet

flexbox

display: flex	create flex container
flex-direction	row | row-reverse | column | column-reverse
flex-wrap	wrap | nowrap
justify-content	flex-start | flex-end | center | space-between (positioning items along flex direction)
align-items	flex-start | flex-end | center (positioning items across flex direction)
flex-flow: row nowrap	flex-direction: row; flex-wrap: nowrap;

Html Css Cheat Sheet Pdf

grid

display: grid	create grid container
grid-template-columns	e.g. 150px minmax(150px,650px) auto
grid-template-rows	e.g. 50px auto
grid-template-areas	e.g. grid-template-areas: 'topleft . topright' 'contentleft bottom contentright';
grid-area	e.g. grid-area: contentleft;