Download CSS Cheat Sheet PDF and more Summaries Design in PDF only on Docsity!
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
Property Values Example font-style normal/italic/inherit/oblique font-style: normal font-variant normal/inherit/small-caps font-variant: small-caps font-weight normal/bold/bolder/lighter/100-900/inherit font-weight:bold font-size ?px/?%/small/medium/large font-size: large font-size : font-family verdana/calibri.. etc… font-family: verdana
2. Text
Property Values Example text-align left/right/center/justify text-align: justify; letter spacing normal/length/?% letter spacing : 3%; Text-outline None/length/color Text-outline: red word-wrap normal/length word-wrap: normal; direction ltr/rtl/inherit Direction: ltr; text-wrap normal/unrestricted/none text-wrap: normal
text-indent ?%/?px text-indent: 2% word-spacing normal/?%/?px word-spacing: normal text-transform none/uppercase/lowercase/capitaliz e text-transform: lowercase text-emphasis none/dot/open/filled/circle/triangle text-emphasis: filled text-justify auto/distribute/inter-word text-justify:distribute
3. User Interface
Property Values Example appearance – apply platform specific styling normal | 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; cursor auto | 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 number nav-index: 1; nav-up auto | 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;
background-clip - lets you control how much of the background image should extend beyond the element’s content or padding content-box/padding-box/border-box/no-cli p/?%/?px background -clip: no-clip
5. Borders
Property Values Example border-width thin/thick/medium/?px border-widt h: medium border-widt h: 20px border-style none/dashed/dotted/inset/double/sol id border-styl e : dotted border-color name of the color border-col or: black border-left: border-left-color border-left-width border-left- color: black border-left- width : 10px border-right: border-right-color border-right-width border-righ t-color : black border-righ t-width : 15px border-top: border-top-width border-top-color border-top- width : 10px border-top- color : blue
border-bottom: border-bottom-color border-bottom-width border-bott om-color : black border-bott om-width : 15px border-decoration-break maintain consistent design amongst fragments of broken element slice/clone border-dec oration-bre ak: slice; border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius ?px border-top- left-radius : 20px border-image ?%/stretch/repeat/round/none border-ima ge : repeat border-ima ge : 12px
6. Box Model
Property Values Example float left | right | none float : right height auto length % height : 10px max-height none length % max-height : 10px max-width none length % max-width : 120% min-height none length % min-height : 50% min-width auto % length min-width : 30px 6.1. margin Property Values Example margin-bottom auto/length % margin-bottom : 20px
marquee -style scroll/slide/alternate marquee -style : scroll overflow visible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-y overflow : visible overflow- style auto/marquee-line/marquee-block overflow- style : auto overflow- x visible/hidden/scroll/auto/no-display/no-content overflow- x : scroll rotation angle rotation : 20deg rotation-p oint position (paired value off-set) rotation-p oint : 50% 50% visibility visible/hidden/collapse visibility: hidden clear left/right/both/none clear: left
7. Template layout
Property Values Example box-align start/end/center/base box-align : start box-direction normal/reverse box-direction : normal box-flex normal box-flex : normal box-flex-group integer box-flex-group : 2 box-lines single/multiple box-lines : single box-orient horizontal/vertical/inline-axis/block-axis box-orient : inline box-pack start/end/center/justify box-pack : justify box-sizing content-box/padding-box/border-box/margin-box box-sizing : margin-box
tab-side top/bottom/left/right tab-side : left
8. Table
Property Possible values border-collaps e collapse/separate empty-cells show/hide border-spacing ?%/?px table-layout auto/fixed caption-side top/bottom/left/right
9. Columns
Property Values Example column-co unt auto/number column-count : 10 column-fill auto/balance/balance-all column-fill : balance column-ga p normal/?px column-gap : 5px column-rul e-width thin/medium/thick/?px column-rule-width : medium column-rule-width : 2px column-rul e-style border-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inherit column-rule-style : dotted column-rul e-color color column-rule-color : black column-wi dth auto/?px column-width : 10px column-sp an 1/all column-span : all
10. Colors
marker-offset : auto
13. Animations
Property Values Example animation-nam e none/ID animation-name : myfirstanim animation-durat ion time animation-duration : 5s animation-timin g-function ease/linear/ease-in/easeout/ease-in-out/cubic-Bezie r(number, number, number, number) animation-timing-fun ction : linear; animation-dela y time animation-delay : 5ms animation-iterat ion-count inherit/number animation-iteration-c ount : 5 animation-direc tion normal/alternate animation-direction : alternate animation-play- state running/paused animation-play-state : running animation-fill-m ode None/backwards/ forwards/both/initial/inherit animation-fill-mode : both
14. Outline
Property Values Example outline-col or Color name outline-color : green outline-sty le none/dotted/dashed/solid/double/groove/ridge/inset/out set outline-style : solid outline-wi dth thin/medium/thick/?px outline-width : medium outline-width : 20px outline-off set inherit/?px outline-offset : 15px
15. Hyperlink
Property Values Example target-name current/root/parent/new/modal/"string" target-name : parent target-new tab/window/none target-new : window target-position front/back/above/behind target-position : front
16. Paged Media
Property Values Example fit fill/hidden/meet/slice fit : fill fit-position top/center/bottom or left/center/right ?%/?px fit-position : top 35% orphans integer orphans : 4 image-orientation auto/angle (deg/rad/turn/grad) image-orientation : 0grad page auto/id page : auto page-break-after auto/always/avoid/left/right page-break-after : always page-break-befor e auto/always/avoid/left/right page-break-before: left page-break-inside auto/avoid page-break-inside : avoid size auto/landscape/portrait/?px Size : landscape windows integer Windows : 4
17. Positioning
Property Values Example bottom/right/top/left auto/%/length bottom: 20% top : auto left : 40px right : 25px z-index auto/number z-index : 2 clip shape/auto clip : auto
rotate(50deg) ; transform- origin [ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] transform-ori gin : 20% 50%; transform-ori gin : center; transform-ori gin : 20px 50px; transform- style flat/preserve-3d transform-sty le : preserve-3d
21. Speech
Property Values Example cue-before – play a sound file before an element url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit] .voice; cue-after - play a sound file after an element url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit] .voice; pause Time pause: 25ms pause-before | none | x-weak | weak | medium | strong | x-strong pause-before : 25ms pause-after | none | x-weak | weak | medium | strong | x-strong pause-after : 25ms phonemes – give a phonetic pronunciation to elements #computer voice-stress normal | strong | moderate | none | reduced voice-stress : moderate;
voice-pitch && absolute | [[x-low | low | medium | high | x-high] || [ | | ]] voice-pitch: high; voice-pitch: 350hz; voice-pitch: 45% voice-duration auto | voice-duration: auto; voice-duration: 60s; voice-volume silent | [[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%; speak none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit-number speak : none; caption-side – position for table caption top | bottom | left | right | inherit caption-side: left; rest-before | none | x-weak | weak | medium | strong | x-strong rest-before: medium; rest-before: 20ms; rest-after | none | x-weak | weak | medium | strong | x-strong rest-after: medium; rest-after: 20ms;
22. Pseudo-class
Property Meaning :active the active element :focus Element in focus :link an unvisited link :enabled an element when enabled :disabled an element when disabled
::before Inserts some content before an element p::before { content: "Welcome to hackr: "; } ::after Inserts some content after an element p::after { content: "Thank you for watching"; } Absolute Measurements Symbol Representation % percentage ms millisecond s second in inches mm millimetre cm centimetre pt point (1/72 inch) pc pica (12 points)
24. Angles/Time/Frequency
Unit Representatio n deg degree grad gradient rad radian turn turns ms millisecond s second Hz hertz khz kilohertz
25. Relative measurement
Unit Representation px pixel of the device gd grid defined by layout-grid em font size of current element rem font size of root element ex x-height of the element’s font vh viewport height vm viewport height or width (lower value) vw viewport width
26. Selector types
Type Meaning Example class multiple elements of various types .class id single element #id universal applicable to all elements * group apply style to multiple elements p h1 h type element of the specified type p tree descendant element that is below another (any level) # elementnam e h child element one below the parent element # elementnam e > h sibling adjacent general adjacent share the same parent and in the same immediate sequence general share the same parent but can be in any sequence h2 + p h2 ~ p
27. Generated content
Property Value Example
Property Value Example alignment- adjust auto | baseline | before-edge | text-before-edge | middle | central | after-edge | textafter-edge | ideographic | alphabetic | hanging | mathematical length | % alignment-adjust : middle alignment- baseline baseline | ise-script | beforeedge | text-before-edge | afteredge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical alignment-baseline : hanging drop-initial -after-alig n central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | % drop-initial-after-align : 30% drop-initial -before-ali gn caps-height | drop-initial-before-align : central drop-initial -before-ad just before-edge | text-before-edge | central | middle | hanging | mathematical | length | % drop-initial-before-adjust : 10px drop-initial-before-adjust : 10% drop-initial-before-adjust : middle drop-initial -value initial integer drop-initial-value : 20 drop-initial -size auto integer % line drop-initial-size : 25% baseline-s hift sub | super | length % baseline-shift : super dominant- baseline baseline/hanging/middle dominant-baseline : middle x=25 y = 50 line-stacki ng-shift consider-shifts | disregard-shifts line-stacking-shift : disregard-shifts line-stacki ng-strateg y inline-line-height | block-line-height | max-height | grid-height line-stacking-strategy: max-height
inline-box- align Initial | last| integer inline-box-align : 2 inline-box-align : initial line-height Normal/number/ length/ % line-height : 30% text-height auto | font-size | text-size | max-size text-height : auto vertical-ali gn Baseline | sub | super | top | text-top | middle | bottom | text-bottom length | % vertical-align : middle
