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.



HTML CSS Cheat Sheet PDF

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: verdana

2. 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:distribute

3. 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-clip

5. 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 : 12px

6. 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 : 30px

6.1. Margin 

PropertyValuesExamplemargin-bottomauto/length %margin-bottom : 20pxmargin-leftauto/height %margin-left : automargin-rightauto/height %margin-right : 30%margin-topauto/length %margin-top : 40mm

6.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: left

7. 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 : left

8. Table

PropertyPossible valuesborder-collapsecollapse/separateempty-cellsshow/hideborder-spacing?%/?pxtable-layoutauto/fixedcaption-sidetop/bottom/left/right

9. 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 : all

10. Colors 

PropertyValuesExamplecolorinherit/colorcolor : greenopacityinherit/number levelopacity : 4

11. 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-type

none/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-image

none/url

Example:

list-style-image : url(‘hackrhome.gif’);

marker-offset

auto/?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 : both

14. 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 :  15pxPropertyValuesExampletarget-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 : 4

17. Positioning

PropertyValuesExamplebottom/right/top/leftauto/%/lengthbottom: 20% top : auto left : 40px right : 25pxz-indexauto/numberz-index : 2clipshape/autoclip : autopositionfixed/static/relative/absoluteposition : static

18. 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)UnitRepresentationdegdegreegradgradientradradianturnturnsmsmillisecondssecondHzhertzkhzkilohertz

25. 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 width

26. 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 ~ p

27. Generated Content

PropertyValueExamplebookmark-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 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 : middle

Download 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.