Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.
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 sheet
1. Font
PropertyValuesExamplefont-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. Text
PropertyValuesExampletext-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 Interface
PropertyValuesExampleappearance – 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. Backgrounds
PropertyValuesExamplebackground-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. Borders
PropertyValuesExampleborder-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 Model
PropertyValuesExamplefloatleft | 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. Margin
PropertyValuesExamplemargin-bottomauto/length %margin-bottom : 20pxmargin-leftauto/height %margin-left : automargin-rightauto/height %margin-right : 30%margin-topauto/length %margin-top : 40mm6.2. Padding
PropertyValuesExamplepadding-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 Layout
PropertyValuesExamplebox-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. Table
PropertyPossible valuesborder-collapsecollapse/separateempty-cellsshow/hideborder-spacing?%/?pxtable-layoutauto/fixedcaption-sidetop/bottom/left/right9. Columns
PropertyValuesExamplecolumn-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. Colors
PropertyValuesExamplecolorinherit/colorcolor : greenopacityinherit/number levelopacity : 411. Grid Positioning
PropertyValuesExamplegrid-columnsnone/inherit/?px/?%/x%-y%grid-columns : 10pxgrid-rowsnone/inherit/?px/?%/x%-y%grid-rows : 40%12. List and Markers
PropertyValueslist-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. Animations
PropertyValuesExampleanimation-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. Outline
PropertyValuesExampleoutline-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. Hyperlink
PropertyValuesExampletarget-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. Positioning
PropertyValuesExamplebottom/right/top/leftauto/%/lengthbottom: 20% top : auto left : 40px right : 25pxz-indexauto/numberz-index : 2clipshape/autoclip : autopositionfixed/static/relative/absoluteposition : static18. Transitions
PropertyValuesExampletransitions-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 Transform
PropertyValuesExamplebackface-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. Speech
PropertyValuesExamplecue-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-class
PropertyMeaning: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-element
PropertyMeaningExample::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 measurement
UnitRepresentationpxpixel 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 types
TypeMeaningExampleclassmultiple 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 Content
PropertyValueExamplebookmark-labelContent/attr/label stringbookmark-label : “This is bookmark”bookmark-levelNone/integerbookmark-level : 2;bookmark-targetSelf/url/attrbookmark-target : url[//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[//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 Box
PropertyValueExamplealignment-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
Conclusion
With 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.
We totally get it.
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.