Skip to content

Latest commit

 

History

History
178 lines (178 loc) · 7.59 KB

css_advanced_cheatsheet.md

File metadata and controls

178 lines (178 loc) · 7.59 KB

Properties align-contentbehavior of the flex-wrap property align-itemsalignment for items inside the container align-selfalignment for the selected item allchanges all properties animationbinds an animation to an element animation-delaydelays animation start animation-directionreverse animation or in alternate cycles animation-durationanimation duration in seconds or ms animation-fill-modestyle when the animation is not playing animation-iteration-countnumber of an animation replays animation-namename for the @keyframes animation animation-play-statethe animation is running or paused animation-timing-functionspeed curve of an animation backface-visibilityis element visible when not facing the screen backgroundall background properties in one declaration background-attachmentis the background image fixed or scrolls background-blend-modeblending mode of each background layer background-clippainting area of the background background-colorbackground color background-imagebackground image background-originwhere the background image is positioned background-positionstarting position of the background image background-repeatthe way the background image is repeated background-sizebackground image size bordersets all border properties in one line border-bottombottom border properties in one line border-bottom-colorcolor of the bottom border border-bottom-left-radiusborder bottom left radius border-bottom-right-radiusborder bottom right radius border-bottom-styleborder bottom style border-bottom-widthborder bottom width border-collapseborder collapse border-colorborder color border-imagesets an image as border border-image-outsetborder image area extends beyond the border box border-image-repeatborder image repeated, rounded or stretched border-image-slicehow to slice the border image border-image-sourcepath to the border image border-image-widthborder image width border-leftleft border properties in one line border-left-colorborder left color border-left-styleborder left style border-left-widthborder left width border-radiusborder radius of the four rounded corners border-rightright border properties in one line border-right-colorborder right color border-right-styleborder right style border-right-widthborder right width border-spacingborder spacing border-styleborder style border-toptop border properties in one line border-top-colorborder top color border-top-left-radiusborder top left radius border-top-right-radiusborder top right radius border-top-styleborder top style border-top-widthborder top width border-widthborder width bottombottom offset for relative and absolute elements box-shadowshadow to element box-sizingbox sizing properties caption-sideplacement of a table caption cleardeny floating of an element clipclip an absolutely positioned element colortext color column-countdivide the content in columns column-fillbalanced fill or not column-gapgap between the columns column-ruleseparator between columns, like border column-rule-colorcolumn rule color column-rule-stylecolumn rule style column-rule-widthcolumn rule width column-spancolumn span column-widthcolumn width columnsset column-width and column-count contentinsert content :before and :after elements counter-incrementcount sections counter-resetreset counter cursorcursor type when element is hovered directionwriting direction, Arabic is using rtl displaybox display type empty-cellshide borders and background on empty table cells filterimage effects: grayscale, blur, invert etc. flexitem length, relative to others inside the container flex-basisinitial length of a flexible item flex-directiondirection of the flexible items flex-flowshorthand for flex-direction and flex-wrap flex-growhow much the item will grow relative other items flex-shrinkhow to shrink the item relative to other items flex-wrapwrap flexible items floatfloat elements left or right fontall font properties in one line @font-facedeclare non-web-safe fonts font-familyfont of the element font-sizefont size font-size-adjustcontrol font size if the first declared option is not available font-stretchwiden or narrow text font-stylefont style: normal, italic, oblique font-variantset small-caps font-weightuse bold or thin characters hanging-punctuationcan a punctuation mark be placed outside the line box? heightheight of the element justify-contentjustifies flexible container's items horizontally if necessary @keyframesspecifies the animation code leftleft offset for relative and absolute elements letter-spacingspace between characters line-heightline height of text or inline-block elements list-styleall list properties in one line list-style-imagereplace the list item marker with an image list-style-positionlist item markers inside or outside the content flow list-style-typeset the type of the list item marker marginset the top, right, bottom and left margins in one line margin-bottombottom margin margin-leftleft margin margin-rightright margin margin-topmargin top max-heightmaximum height of element max-widthmaximum width of element @mediasee media queries min-heightminimum height min-widthminimum width nav-downwhere to navigate when the the arrow-down button is pressed nav-indexsets sequential navigation order nav-leftwhere to navigate when the the arrow-left button is pressed nav-rightwhere to navigate when the the arrow-right button is pressed nav-upwhere to navigate when the the arrow-up button is pressed opacitytransparency level of an element orderreorder elements in a container outlinedrow an outer border around elements outline-coloroutline color outline-offsetgap between the element and the outline outline-styleoutline style outline-widthoutline width overflowhide, display or scroll if the content overflows its container overflow-xhorizontal overflow overflow-yvertical overflow paddingpadding between the element border and content padding-bottompadding bottom padding-leftpadding left padding-rightpadding right padding-toppadding top page-break-afteradds page break after an element page-break-beforeadds page break before an element page-break-insideallow page break inside an element perspectivehow many pixels the 3D element is placed from the view perspective-originwhere is the 3D element based in the x- and y-axis positionpositioning type: absolute, fixed, relative, static quotesset quotation marks to wrap an element resizedeclare resizable elements rightright offset for relative and absolute elements tab-sizetab character space length table-layouttable layout algorithm text-alignhorizontal alignment of text text-align-lasthorizontal alignment of last line of text text-decorationoverline, underline or line-through the text text-indentindentation of the first line of the text text-overflowthe way how overflowed content is marked (ellipsis) text-shadowtext shadow text-transformcapitalization of text toptop offset for relative and absolute elements transform2D 3D transformation. See widget. transform-originchanges the position of transformed elements transform-stylerender nested elements in 3D transitiontransition properties in one line transition-delaydelay before transition effect start transition-durationtransition effect duration transition-propertywhich CSS property is the transition affecting transition-timing-functionspeed curve of the transition unicode-bidishould the text be overridden to support more languages user-selectdisable user content selection vertical-alignvertical alignment visibilityvisibility:hidden elements leave a gap white-spacehow are white-spaces handled widthwidth of an element word-breaktext breaking rules when text reaches the end of the container word-spacingsize of white space between words word-wrapbreak long words and wrap onto the next line z-indexstack order of the element