HTML CSS Cheat Sheet PDF
Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Show
CSS stands for Cascading Style Sheets. The documents written in HTML are formatted and presented using CSS. There are many features in HTML and CSS is the most popular addition to it. Rather than changing the web page itself, with CSS, only the styles need to be changed, which means fewer chances to the overall code. Further, HTML contained a lot of repeated code for each web page, which can be put in a common file with CSS and used across web pages. CSS contains – selector and declaration block. A declaration block consists of property-value pairs. Example, #title Here, title is the selector and the declaration block is the entire thing inside the curly braces. Saved as - .css file CSS Cheat sheet1. FontPropertyValuesExamplefont-stylenormal/italic/inherit/obliquefont-style: normalfont-variantnormal/inherit/small-capsfont-variant: small-capsfont-weightnormal/bold/bolder/lighter/100-900/inheritfont-weight:boldfont-size?px/?%/small/medium/largefont-size: large font-size :5font-familyverdana/calibri.. etc…font-family: verdana2. TextPropertyValuesExampletext-alignleft/right/center/justifytext-align: justify;letter spacingnormal/length/?%letter spacing : 3%;Text-outlineNone/length/colorText-outline: redword-wrapnormal/lengthword-wrap: normal;directionltr/rtl/inheritDirection: ltr;text-wrapnormal/unrestricted/nonetext-wrap: normaltext-indent?%/?pxtext-indent: 2%word-spacingnormal/?%/?pxword-spacing: normaltext-transformnone/uppercase/lowercase/capitalizetext-transform: lowercasetext-emphasisnone/dot/open/filled/circle/triangletext-emphasis: filledtext-justifyauto/distribute/inter-wordtext-justify:distribute3. User InterfacePropertyValuesExampleappearance – apply platform specific stylingnormal | inherit | [icon | window | desktop | work-space | document | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password]appearance: password;cursorauto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | swresize | s-resize | w-resize | text | wait | help.help { cursor: help; }nav-index - specifies the sequential navigation order of current element. Similar to tab index in html. Values can be auto or a positive number representing the navigation order. First value is 1.auto | inherit numbernav-index: 1;nav-upauto | inherit[current | root |auto (browser decides where to navigate to)/ id (specific ID to be navigated to)/ target_name (target frame to navigate to)/inherit (value computed based on element’s parent; root or current)nav-up: auto;nav-downauto | inherit[current | root |nav-down: #b2;nav-leftauto | inherit[current | root |nav-left: #b1;nav-rightauto | inherit[current | root |nav-right: #b2;resizenone | both | horizontal | vertical | inheritresize: horizontal;iconauto | inherit urlicon: url(“like.png”);Build Responsive Real-World Websites with HTML and CSS 4. BackgroundsPropertyValuesExamplebackground-sizeauto/cover/?px/?%background-size: coverbackground-imageurl/nonebackground-image: nonebackground-repeatno-repeat/repeat-x/repeat-y/repeatbackground-repeat: repeatbackground-attachmentfixed/scrollbackground-attachment: fixedbackground-colorcolor/transparentbackground-color: whitebackground-positioncan be any position from different combinations like top left, top right, top center. Same with bottom. can be mentioned in terms of position x-% and y-%background-position: top-left;background-originthe starting point of the backgroundbackground-origin: 0;background-clip - lets you control how much of the background image should extend beyond the element’s content or paddingcontent-box/padding-box/border-box/no-clip/?%/?pxbackground-clip: no-clip5. BordersPropertyValuesExampleborder-widththin/thick/medium/?pxborder-width: medium border-width: 20pxborder-stylenone/dashed/dotted/inset/double/solidborder-style : dottedborder-colorname of the colorborder-color: blackborder-left: border-left-color border-left-widthborder-left-color: black border-left-width : 10pxborder-right: border-right-color border-right-widthborder-right-color : black border-right-width : 15pxborder-top: border-top-width border-top-colorborder-top-width : 10px border-top-color : blueborder-bottom: border-bottom-color border-bottom-widthborder-bottom-color : black border-bottom-width : 15pxborder-decoration-breakmaintain consistent design amongst fragments of broken element slice/cloneborder-decoration-break: slice;border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius?pxborder-top-left-radius : 20pxborder-image?%/stretch/repeat/round/noneborder-image : repeat border-image : 12px6. Box ModelPropertyValuesExamplefloatleft | right | nonefloat : rightheightauto length %height : 10pxmax-heightnone length %max-height : 10pxmax-widthnone length %max-width : 120%min-heightnone length %min-height : 50%min-widthauto % lengthmin-width : 30px6.1. MarginPropertyValuesExamplemargin-bottomauto/length %margin-bottom : 20pxmargin-leftauto/height %margin-left : automargin-rightauto/height %margin-right : 30%margin-topauto/length %margin-top : 40mm6.2. PaddingPropertyValuesExamplepadding-bottomlength %padding-bottom : 20pxpadding-toplength %padding-top : 20pxpadding-rightlength %padding-right : 20pxpadding-leftlength %padding-left : 20pxdisplaynone/inline/block/inline-block/list-item/run-in/compact/table/inline-table/table-row-group/table-headergroup/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/ruby/ruby-base/ruby-text/ruby-base-group/ruby-text-groupdisplay : inlinemarquee-directionforward/reversemarquee-direction : forwardmarquee-loopinfinite/integermarquee-loop : 10marquee-play-countinfinite/integermarquee-play-count : 50marquee-speedslow/normal/fastmarquee-speed : slowmarquee-stylescroll/slide/alternatemarquee-style : scrolloverflowvisible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-yoverflow : visibleoverflow-styleauto/marquee-line/marquee-blockoverflow-style : autooverflow-xvisible/hidden/scroll/auto/no-display/no-contentoverflow-x : scrollrotationanglerotation : 20degrotation-pointposition (paired value off-set)rotation-point : 50% 50%visibilityvisible/hidden/collapsevisibility: hiddenclearleft/right/both/noneclear: left7. Template LayoutPropertyValuesExamplebox-alignstart/end/center/basebox-align : startbox-directionnormal/reversebox-direction : normalbox-flexnormalbox-flex : normalbox-flex-groupintegerbox-flex-group : 2box-linessingle/multiplebox-lines : singlebox-orienthorizontal/vertical/inline-axis/block-axisbox-orient : inlinebox-packstart/end/center/justifybox-pack : justifybox-sizingcontent-box/padding-box/border-box/margin-boxbox-sizing : margin-boxtab-sidetop/bottom/left/righttab-side : left8. TablePropertyPossible valuesborder-collapsecollapse/separateempty-cellsshow/hideborder-spacing?%/?pxtable-layoutauto/fixedcaption-sidetop/bottom/left/right9. ColumnsPropertyValuesExamplecolumn-countauto/numbercolumn-count : 10column-fillauto/balance/balance-allcolumn-fill : balancecolumn-gapnormal/?pxcolumn-gap : 5pxcolumn-rule-widththin/medium/thick/?pxcolumn-rule-width : medium column-rule-width : 2pxcolumn-rule-styleborder-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inheritcolumn-rule-style : dotted column-rule-colorcolorcolumn-rule-color : blackcolumn-widthauto/?pxcolumn-width : 10pxcolumn-span1/allcolumn-span : all10. ColorsPropertyValuesExamplecolorinherit/colorcolor : greenopacityinherit/number levelopacity : 411. Grid PositioningPropertyValuesExamplegrid-columnsnone/inherit/?px/?%/x%-y%grid-columns : 10pxgrid-rowsnone/inherit/?px/?%/x%-y%grid-rows : 40%12. List and MarkersPropertyValueslist-style-typenone/asterisks/box/check/circle/diamond/disc/hyphen/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin/hebrew/armenian/georgian/cjk-ideographic/hiragana/katakana/hiragana-iroha/katakana-iroha/footnotes Example: { list-style-type : upper-roman} list-style-position?%/?px Example: list-style-position : 20px list-style-imagenone/url Example: list-style-image : url(‘hackrhome.gif’); marker-offsetauto/?px Example: marker-offset : auto 13. AnimationsPropertyValuesExampleanimation-namenone/IDanimation-name : myfirstanimanimation-durationtimeanimation-duration : 5sanimation-timing-functionease/linear/ease-in/easeout/ease-in-out/cubic-Bezier(number, number, number, number)animation-timing-function : linear;animation-delaytimeanimation-delay : 5msanimation-iteration-countinherit/numberanimation-iteration-count : 5animation-directionnormal/alternateanimation-direction : alternateanimation-play-staterunning/pausedanimation-play-state : runninganimation-fill-modeNone/backwards/ forwards/both/initial/inheritanimation-fill-mode : both14. OutlinePropertyValuesExampleoutline-colorColor nameoutline-color : greenoutline-stylenone/dotted/dashed/solid/double/groove/ridge/inset/outsetoutline-style : solidoutline-widththin/medium/thick/?pxoutline-width : medium outline-width : 20pxoutline-offsetinherit/?pxoutline-offset : 15px15. HyperlinkPropertyValuesExampletarget-namecurrent/root/parent/new/modal/"string"target-name : parenttarget-newtab/window/nonetarget-new : windowtarget-positionfront/back/above/behindtarget-position : frontPropertyValuesExamplefitfill/hidden/meet/slicefit : fillfit-positiontop/center/bottom or left/center/right ?%/?pxfit-position : top 35%orphansintegerorphans : 4image-orientationauto/angle (deg/rad/turn/grad)image-orientation : 0gradpageauto/idpage : autopage-break-afterauto/always/avoid/left/rightpage-break-after : alwayspage-break-beforeauto/always/avoid/left/rightpage-break-before: leftpage-break-insideauto/avoidpage-break-inside : avoidsizeauto/landscape/portrait/?pxSize : landscapewindowsintegerWindows : 417. PositioningPropertyValuesExamplebottom/right/top/leftauto/%/lengthbottom: 20% top : auto left : 40px right : 25pxz-indexauto/numberz-index : 2clipshape/autoclip : autopositionfixed/static/relative/absoluteposition : static18. TransitionsPropertyValuesExampletransitions-delaytime (ms/s)transitions-delay : 20mstransitions-durationtime (ms/s)transitions-duration : 2stransitions-propertynone/alltransitions-property: nonetransition-timing-functionease/linear/ease-in/ease-out/ease-in-out/cubicBezier(number, number, number, number)transition-timing-function: ease-in-out;19. 3D / 2D TransformPropertyValuesExamplebackface-visibilityvisible/hiddenbackface-visibility : hiddenperspectivelength | none | initial | inheritperspective : 100pxperspective-origin[ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ]perspective-origin : 10px 30px perspective-origin : 10% 30% perspective-origin : left center;transformnone/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rotateZ/ skewX/skewY/skew/perspectivetransform: skewy(40deg); transform: scalex(10); transform: rotate(50deg);transform-origin[ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ]]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ]transform-origin : 20% 50%; transform-origin : center; transform-origin : 20px 50px;transform-styleflat/preserve-3dtransform-style : preserve-3d 21. SpeechPropertyValuesExamplecue-before – play a sound file before an elementurl [ silent | x-soft | soft | medium | loud | x-loud | none | inherit].voice;cue-after - play a sound file after an elementurl [ silent | x-soft | soft | medium | loud | x-loud | none | inherit].voice;pauseTimepause: 25mspause-before| none | x-weak | weak | medium | strong | x-strongpause-before : 25mspause-after| none | x-weak | weak | medium | strong | x-strongpause-after : 25msphonemes – give a phonetic pronunciation to elements#computervoice-stressnormal | strong | moderate | none | reducedvoice-stress : moderate;voice-pitch&& absolute | [[x-low | low | medium | high | x-high] || [||]]voice-pitch: high; voice-pitch: 350hz; voice-pitch: 45%voice-durationauto |voice-duration: auto; voice-duration: 60s;voice-volumesilent | [[x-soft | soft | medium | loud | x-loud] ||]voice-volume: 25db; voice-volume: silent; voice-volume: soft;voice-family[[|],]* [|] | preserve= [??]voice-family : “child”, “female”voice-rate[normal | x-slow | slow | medium | fast | x-fast] ||voice-rate: slow; voice-rate: 30%;speaknone | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit-numberspeak : none;caption-side – position for table captiontop | bottom | left | right | inheritcaption-side: left;rest-before| none | x-weak | weak | medium | strong | x-strongrest-before: medium; rest-before: 20ms;rest-after| none | x-weak | weak | medium | strong | x-strongrest-after: medium; rest-after: 20ms;22. Pseudo-classPropertyMeaning:activethe active element:focusElement in focus :linkan unvisited link:enabledan element when enabled:disabledan element when disabled:hoverelement when you mouse over :checkedChecked element:selection an element currently selected or highlighted by the user:langallows the author to specify a language to use in a specified element:nth-child(n)an element that is the nth sibling:nth-last-child(n)an element that is the nth sibling counting from the last sibling:first-childfirst sibling:last-childlast sibling:only-childonly child element:nth-of-type(n)an element that is the n-th sibling of its type:nth-last-of-type(n)n-th sibling of its type counting from the last sibling:first-of-typefirst sibling of its type:last-of-typean element that is the last sibling of its type:only-of-typeonly child of its type:emptyElement with no children:rootRoot element of the document:targetTarget specified by a URL:not(x)element not represented by the argument ‘x’23. Pseudo-elementPropertyMeaningExample::first-letterAdds special style to the first letter of a textp::first-letter { font-size: 150%; color: #FFF00; }::first-lineAdds special style to the first line of a textp::first-letter { font-size: 150%; color: black; }::beforeInserts some content before an elementp::before { content: "Welcome to hackr: "; }::afterInserts some content after an elementp::after { content: "Thank you for watching"; }Absolute Measurements SymbolRepresentation%percentagemsmillisecondssecondininchesmmmillimetrecmcentimetreptpoint (1/72 inch)pcpica (12 points)UnitRepresentationdegdegreegradgradientradradianturnturnsmsmillisecondssecondHzhertzkhzkilohertz25. Relative measurementUnitRepresentationpxpixel of the devicegdgrid defined by layout-gridemfont size of current elementremfont size of root elementexx-height of the element’s fontvhviewport heightvmviewport height or width (lower value)vwviewport width26. Selector typesTypeMeaningExampleclassmultiple elements of various types.classidsingle element#iduniversalapplicable to all elements*groupapply style to multiple elementsp h1 h2typeelement of the specified typeptree descendantelement that is below another (any level)# elementname h3childelement one below the parent element# elementname > h3sibling adjacent generaladjacent share the same parent and in the same immediate sequence general share the same parent but can be in any sequenceh2 + p h2 ~ p27. Generated ContentPropertyValueExamplebookmark-labelContent/attr/label stringbookmark-label : “This is bookmark”bookmark-levelNone/integerbookmark-level : 2;bookmark-targetSelf/url/attrbookmark-target : url(http://hackr.io);counter-resetNone/numbercounter-reset : 5cropAuto/shapeCrop : autodisplaynone/inline/block/inline-blockDisplay : block;contentnormal | none | inhibit urlContent : normalfloat-offsetlength float-offset : 20px 20pxhyphenate-afterauto/integerhyphenate-after : 15hyphensnone/auto/manualhyphens : manualhyphenate-linesno-limit/integerhyphenate-lines : no-limithyphenate-resourcenone/urlhyphenate-resource : url(http://hackr.io)hyphenate-beforeauto/integerhyphenate-before : 10hyphenate-characterauto/stringhyphenate-character : “\1234”counter-incrementnone/numbercounter-increment : 10markscrop | cross/nonemarks : cropmove-tonormal/here/idmove-to : normalimage-resolutionauto/normal/dpiimage-resolution : autopage-policystart/first/lastpage-policy : lastquotesnone/stringquotes : “’” “’”string-set[id string] [id string]string-set : header content();text-replacenone [string string]text-replace : “foo” “bar”28. Line BoxPropertyValueExamplealignment-adjustauto | baseline | before-edge | text-before-edge | middle | central | after-edge | textafter-edge | ideographic | alphabetic | hanging | mathematical length | %alignment-adjust : middlealignment-baselinebaseline | ise-script | beforeedge | text-before-edge | afteredge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematicalalignment-baseline : hangingdrop-initial-after-aligncentral | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | %drop-initial-after-align : 30%drop-initial-before-aligncaps-height |drop-initial-before-align : centraldrop-initial-before-adjustbefore-edge | text-before-edge | central | middle | hanging | mathematical | length | %drop-initial-before-adjust : 10px drop-initial-before-adjust : 10% drop-initial-before-adjust : middledrop-initial-valueinitial integerdrop-initial-value : 20drop-initial-sizeauto integer % linedrop-initial-size : 25%baseline-shiftsub | super | length %baseline-shift : superdominant-baselinebaseline/hanging/middledominant-baseline : middle x=25 y = 50line-stacking-shiftconsider-shifts | disregard-shiftsline-stacking-shift : disregard-shiftsline-stacking-strategyinline-line-height | block-line-height | max-height | grid-heightline-stacking-strategy: max-heightinline-box-alignInitial | last| integer inline-box-align : 2 inline-box-align : initialline-heightNormal/number/ length/ %line-height : 30%text-heightauto | font-size | text-size | max-sizetext-height : autovertical-alignBaseline | sub | super | top | text-top | middle | bottom | text-bottom length | %vertical-align : middleDownload CSS Cheat Sheet PDF ConclusionWith that comes to an end of the CSS cheat sheet. This you way can brush up your skills while you are creating a website or preparing for CSS interview. You may also want to read types of CSS and difference between CSS, CSS2, CSS3 to understand CSS better. You can live up your webpage with the CSS skills so go ahead and bright it up. People are also reading: Already have an account? Login Didn’t recieve the password reset link? Resend × We recognized you are using an ad blocker. Still, ads support Hackr and our community. That's why we give you the option to donate to us, and we will switch ads off for you. |