Css Positioning Cheat Sheet

Posted : admin On 1/29/2022

Layout mechanics

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). CSS Cheat Sheet What makes a website unique is it’s styling. A must have skill for every web developer. ##### TABLE OF CONTENTS Backgrounds 4 Border 5 Box Model 7 Font 9 Text 10 Column 11 Colors 12 Grid Positioning 12 Template Layout 12 Table 13 Speech 13 List & Markers 15 Animations 16 Transitions 16 UI 17 Pseudo-class 18 Pseudo-element 19. Jump To Section: CSS Selectors CSS Box Model CSS Dimensions CSS Margins CSS Padding CSS Borders CSS Positioning CSS Lists CSS Backgrounds CSS Fonts CSS Text CSS Selectors. selects all elements p selects all elements #container selects element with ID 'container'.box selects all elements with CLASS 'box' h1, h2 selects all.

  • Display

    • Controls how an element is represented within the flow.

    • display: inline

    • Allows other elements beside; margin, padding & width don’t work.

    • display: block

    • Takes up an entire line; margin, padding & width work.

    • display: inline-block

    • Allows other elements beside; margin, padding & width work. Can create columns, but will force a space between boxes.

    • Controls whether text is wrapped around the element.

    • float: left right none

    • Allows other elements to wrap around the element.

    • Multiple floats

    • Can create columns with boxes touching sides.

    • clear: left right both

    • Force the element below floated elements.

    • overflow: hidden

    • Use on a parent element to force it to wrap around the floated children—a clearfix.

  • Position

    • Gives strict, coordinate-based control over layout.

    • position: absolute

    • Move an element around based on coordinates.

    • position: relative

    • Added to a parent element to reset absolute child’s coordinates.

    • position: fixed

    • Forces an element to not move when the page is scrolled.

    • z-index

    • Control the stacking order of elements—higher number is closer.

Centering elements

    • Works only on display: inline & inline-block elements.

    • Must be applied to the parent element.

  • margin: 0 auto

    • Works only on display: block elements.

    • The element must have a width

    • You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom.

    • Works only on display: inline & inline-block elements.

  • Centering absolute

    • Use transform & 50% coordinates to center an absolutely positioned element.

    • Or vertical centering too…

    • There’s no float: center

    • You cannot center floated elements.

  • Centering with flexbox

    • Flex box has a bunch of different alignment classes—that are always applied to the parent.

    • This will be completely centered within the box.

Common code

    • Used to change layout math for width & padding.

    • Put at the top of every CSS file.

  • Clearfix for float

    • Add to the parent elements of floats to force the parent to surround the floated element.

    • Can be used instead of overflow: hidden

    • Use width & display to make images flex to their parent’s size.

A

align-contentPacks text lines to the left of the flex container
align-itemsSpecifies the default alignment for items inside a specific flex container
align-selfSpecifies the alignment for a selected item in a flex container
allResets all the properties to either inherited or initial value
animationA shorthand for the eight properties used for animation
animation-delaySpecifies the delay before an animation starts playing
animation-directionDefines if the animation plays in reverse or alternate cycles
animation-durationSets the duration of an animation cycle
animation-fill-modeSets the style for an element while the animation is not active (finished or delayed)
animation-iteration-countDefines the number of times an animation should normally repeat
animation-nameSpecifies the name of the animation
animation-timing-functionSpecifies the duration of time for an element to transition from one set of styles to another

B

backface-visibilityDefines if the element’s back is visible when it is not facing the screen
backgroundA shorthand for the eight properties used for background
background-clipSpecifies the area to which a background should extend
background-colorSets a background color
background-imageSets a background image for an element
background-originSpecifies where to position the background image
background-positionSpecifies the initial position of the background image
background-sizeDefines the size of the background image
borderA shorthand for the three properties used for borders
border-bottom-left-radiusDefines the rounded corners for an element
border-imageSpecifies the image to be used instead of a regular border
border-image-outsetSpecifies how much of the border image goes outside of the border box
border-image-repeatSpecifies if the border image is rounded, repeated or stretched
border-image-sliceSpecifies how a border image should be sliced
border-image-sourceSpecifies the path to access the image that you want to use as a border
border-image-widthSpecifies the border image width
border-radiusA shorthand for the four properties used for border radius
border-styleDefines the style of the border lines
border-top-left-radiusDefines the shape of the top left corner border
border-top-right-radiusDefines the shape of the top right corner border
border-bottom-left-radiusDefines the shape of the bottom left corner border
border-bottom-right-radiusDefines the shape of the bottom right corner border
box-shadowAdds a shadow to a box element
box-sizingSpecifies whether the height and width values represent the content box or the border box

C

colorSets the color of text
column-countSpecifies the number of columns an element should be divided into
column-gapDefines the gap between columns
column-ruleA shorthand for the three properties used for column rules
column-rule-colorSpecifies the color of the column rule
column-rule-styleSpecifies the style of the column rule
column-rule-widthSpecifies the width of of the column rule
column-spanSpecifies how many columns an element should span across
column-widthSpecifies the optimal width of a column
columnsA shorthand for column-width and column-count

D

displaySpecifies what kind of container the element will use

F

filterDefines visual effects for elements
flexA shorthand for flex-grow, flex-shrink and flex-basis
flex-basisSets the initial length of a flex item
flex-directionSpecifies the placement of flex items
flex-flowA shorthand for flex-direction and flex-wrap
flex-growSpecifies how much a flex item should grow when there's too much space in a flex container
flex-shrinkSpecifies how much a flex item should shrink when there's too little space in a flex container
fontA shorthand for the seven properties used for fonts
font-familyDefines what font an element will use when it has text in it
font-sizeSets the default size of text characters
font-size-adjustControls the sizing of lowercase letters
font-stretchDefines how wide or narrow the characters should be
font-styleDefines the text font style
font-weightDefines how thick or thin the characters should be

H

hanging-punctuationDefines if punctuation marks should be displayed outside of the lines to keep them properly aligned

J

justify-contentAligns flex items along the horizontal axis of the container

L

line-heightDefines the line height

M

marginAdds space around an element

N

nav-downDefines where the web page will navigate when the downwards arrow navigation key is pressed
nav-indexSets the sequence of navigation, or tabbing, order for elements
nav-leftDefines where the web page will navigate when the left arrow navigation key is pressed
nav-rightDefines where the web page will navigate when the right arrow navigation key is pressed
nav-upDefines where the web page will navigate when the upwards arrow navigation key is pressed

O

opacitySets the opacity level for an element
orderDefines the position of a specific flex item in the order of items in the same container
outlineDraws a line outside the element
outline-offsetAdds space between the outline and the border of the element
overflowDefines how the element behaves when the content cannot fit within its borders
overflow-xDefines how left and right sides of a container react to overflowing content
overflow-yDefines how top and bottom sides of a container react to overflowing content

P

Css Positioning Cheat Sheet Excel

paddingAdds space around an element
perspectiveDefines how far away an object is to create a 3D perspective
perspective-originSpecifies where a 3D element originates from on the x– and y– axis
positionSpecifies how an element is positioned

R

resizeSpecifies whether a user can resize the element

T

tab-sizeDefines how much space the tab character is going to take up in the text
text-alignDefines the horizontal text alignment inside of an element
text-align-lastDefines the horizontal alignment for the last line of text
text-decorationA shorthand for the three properties used for text decoration lines
text-decoration-colorSets the color for all text decoration lines
text-decoration-lineSpecifies where text decoration line is displayed (below, above or through the text)
text-decoration-styleDefines the style of text decoration line
text-emphasisA shorthand for text-emphasis-style and text-emphasis-color
text-overflowDefines how the presence of overflowed content that is not displayed will be shown to the user
text-shadowAdds a shadow to the text
text-transformControls the capitalization of the text
transformApplies various transformations to an element
transitionA shorthand for the four properties used for transition
transition-delaySpecifies the transition starting point in time
transition-durationSpecifies how long a transition takes to finish
transition-propertyDefines the CSS property that is affected by the transition effect
transition-timing-functionSpecifies the speed curve of a transition

Css Cheat Sheet Pdf

V

vertical-alignSpecifies the vertical alignment for items inside an element
Css Positioning Cheat Sheet

W

word-breakDefines the line breaking rules for words when they reach the end of the line
word-wrapAllows breaking long words and wrapping them in the next line

Z

z-indexDefines a position of an element on the z-axis

:@

Css Positioning Cheat Sheet 2020

Css coding cheat sheet pdf
:hoverDefines how elements should be styled when they are hovered on
@font-faceAllows you to use a font file and define the name of the font instead of having to use a web-safe font
@keyframesAllows specifying code for the animation
@mediaSpecifies different style rules for different devices and/or media types