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 :5 |
| 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/capitalize |
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 <id> [current | root | <target-name> 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-down |
auto | inherit <id> [current | root | <target-name> |
nav-down: #b2; |
| nav-left |
auto | inherit <id> [current | root | <target-name> |
nav-left: #b1; |
| nav-right |
auto | inherit <id> [current | root | <target-name> |
nav-right: #b2; |
| resize |
none | both | horizontal | vertical | inherit |
resize: horizontal; |
| icon |
auto | inherit url |
icon: url(“like.png”); |
Build Responsive Real-World Websites with HTML and CSS
4. Backgrounds
| Property |
Values |
Example |
| background-size |
auto/cover/?px/?% |
background-size: cover |
| background-image |
url/none |
background-image: none |
| background-repeat |
no-repeat/repeat-x/repeat-y/repeat |
background-repeat: repeat |
| background-attachment |
fixed/scroll |
background-attachment: fixed |
| background-color |
color/transparent |
background-color: white |
| background-position |
can 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-origin |
the starting point of the background |
background-origin: 0; |
| 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-clip/?%/?px |
background-clip: no-clip |
5. Borders
| Property |
Values |
Example |
| border-width |
thin/thick/medium/?px |
border-width: medium border-width: 20px |
| border-style |
none/dashed/dotted/inset/double/solid |
border-style : dotted |
| border-color |
name of the color |
border-color: 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-right-color : black border-right-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-bottom-color : black border-bottom-width : 15px |
| border-decoration-break |
maintain consistent design amongst fragments of broken element slice/clone |
border-decoration-break: 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-image : repeat border-image : 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 |
| margin-left |
auto/height % |
margin-left : auto |
| margin-right |
auto/height % |
margin-right : 30% |
| margin-top |
auto/length % |
margin-top : 40mm |
6.2. Padding
| Property |
Values |
Example |
| padding-bottom |
length % |
padding-bottom : 20px |
| padding-top |
length % |
padding-top : 20px |
| padding-right |
length % |
padding-right : 20px |
| padding-left |
length % |
padding-left : 20px |
| display |
none/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-group |
display : inline |
| marquee-direction |
forward/reverse |
marquee-direction : forward |
| marquee-loop |
infinite/integer |
marquee-loop : 10 |
| marquee-play-count |
infinite/integer |
marquee-play-count : 50 |
| marquee-speed |
slow/normal/fast |
marquee-speed : slow |
| 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-point |
position (paired value off-set) |
rotation-point : 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-collapse |
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-count |
auto/number |
column-count : 10 |
| column-fill |
auto/balance/balance-all |
column-fill : balance |
| column-gap |
normal/?px |
column-gap : 5px |
| column-rule-width |
thin/medium/thick/?px |
column-rule-width : medium column-rule-width : 2px |
| column-rule-style |
border-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inherit |
column-rule-style : dotted |
| column-rule-color |
color |
column-rule-color : black |
| column-width |
auto/?px |
column-width : 10px |
| column-span |
1/all |
column-span : all |
10. Colors
| Property |
Values |
Example |
| color |
inherit/color |
color : green |
| opacity |
inherit/number level |
opacity : 4 |
11. Grid Positioning
| Property |
Values |
Example |
| grid-columns |
none/inherit/?px/?%/x%-y% |
grid-columns : 10px |
| grid-rows |
none/inherit/?px/?%/x%-y% |
grid-rows : 40% |
12. List and Markers
| Property |
Values |
| list-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
| Property |
Values |
Example |
| animation-name |
none/ID |
animation-name : myfirstanim |
| animation-duration |
time |
animation-duration : 5s |
| animation-timing-function |
ease/linear/ease-in/easeout/ease-in-out/cubic-Bezier(number, number, number, number) |
animation-timing-function : linear; |
| animation-delay |
time |
animation-delay : 5ms |
| animation-iteration-count |
inherit/number |
animation-iteration-count : 5 |
| animation-direction |
normal/alternate |
animation-direction : alternate |
| animation-play-state |
running/paused |
animation-play-state : running |
| animation-fill-mode |
None/backwards/ forwards/both/initial/inherit |
animation-fill-mode : both |
14. Outline
| Property |
Values |
Example |
| outline-color |
Color name |
outline-color : green |
| outline-style |
none/dotted/dashed/solid/double/groove/ridge/inset/outset |
outline-style : solid |
| outline-width |
thin/medium/thick/?px |
outline-width : medium outline-width : 20px |
| outline-offset |
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-before |
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 |
| position |
fixed/static/relative/absolute |
position : static |
18. Transitions
| Property |
Values |
Example |
| transitions-delay |
time (ms/s) |
transitions-delay : 20ms |
| transitions-duration |
time (ms/s) |
transitions-duration : 2s |
| transitions-property |
none/all |
transitions-property: none |
| transition-timing-function |
ease/linear/ease-in/ease-out/ease-in-out/cubicBezier(number, number, number, number) |
transition-timing-function: ease-in-out; |
| Property |
Values |
Example |
| backface-visibility |
visible/hidden |
backface-visibility : hidden |
| perspective |
length | none | initial | inherit |
perspective : 100px |
| perspective-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; |
| transform |
none/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rotateZ/
skewX/skewY/skew/perspective |
transform: skewy(40deg); transform: scalex(10); transform: rotate(50deg); |
| transform-origin |
[ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] <length> ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] |
transform-origin : 20% 50%; transform-origin : center; transform-origin : 20px 50px; |
| transform-style |
flat/preserve-3d |
transform-style : 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 |
<time> | none | x-weak | weak | medium | strong | x-strong |
pause-before : 25ms |
| pause-after |
<time> | none | x-weak | weak | medium | strong | x-strong |
pause-after : 25ms |
| phonemes – give a phonetic pronunciation to elements |
<string> |
#computer |
| voice-stress |
normal | strong | moderate | none | reduced |
voice-stress : moderate; |
| voice-pitch |
<frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]] |
voice-pitch: high; voice-pitch: 350hz; voice-pitch: 45% |
| voice-duration |
auto | <time> |
voice-duration: auto; voice-duration: 60s; |
| voice-volume |
silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>] |
voice-volume: 25db; voice-volume: silent; voice-volume: soft; |
| voice-family |
[[<name> | <generic-voice>],]* [<name> | <generic-voice>] | preserve <generic-voice> = [<age>? <gender> <integer>?] |
voice-family : “child”, “female” |
| voice-rate |
[normal | x-slow | slow | medium | fast | x-fast] || <percentage> |
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 |
<time> | none | x-weak | weak | medium | strong | x-strong |
rest-before: medium; rest-before: 20ms; |
| rest-after |
<time> | 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 |
| :hover |
element when you mouse over |
| :checked |
Checked element |
| :selection |
an element currently selected or highlighted by the user |
| :lang |
allows the author to specify a language to use in a speciï¬ed 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 |
| :ï¬rst-child |
ï¬rst sibling |
| :last-child |
last sibling |
| :only-child |
only 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 |
| :ï¬rst-of-type |
ï¬rst sibling of its type |
| :last-of-type |
an element that is the last sibling of its type |
| :only-of-type |
only child of its type |
| :empty |
Element with no children |
| :root |
Root element of the document |
| :target |
Target specified by a URL |
| :not(x) |
element not represented by the argument ‘x’ |
23. Pseudo-element
| Property |
Meaning |
Example |
| ::ï¬rst-letter |
Adds special style to the ï¬rst letter of a text |
p::first-letter { font-size: 150%; color: #FFF00; } |
| ::ï¬rst-line |
Adds special style to the ï¬rst line of a text |
p::first-letter { font-size: 150%; color: black; } |
| ::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 |
Representation |
| 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 h2 |
| type |
element of the specified type |
p |
| tree descendant |
element that is below another (any level) |
# elementname h3 |
| child |
element one below the parent element |
# elementname > h3 |
| 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 |
| bookmark-label |
Content/attr/label string |
bookmark-label : “This is bookmark” |
| bookmark-level |
None/integer |
bookmark-level : 2; |
| bookmark-target |
Self/url/attr |
bookmark-target : url(http://hackr.io); |
| counter-reset |
None/number |
counter-reset : 5 |
| crop |
Auto/shape |
Crop : auto |
| display |
none/inline/block/inline-block |
Display : block; |
| content |
normal | none | inhibit url |
Content : normal |
| float-offset |
length |
float-offset : 20px 20px |
| hyphenate-after |
auto/integer |
hyphenate-after : 15 |
| hyphens |
none/auto/manual |
hyphens : manual |
| hyphenate-lines |
no-limit/integer |
hyphenate-lines : no-limit |
| hyphenate-resource |
none/url |
hyphenate-resource : url(http://hackr.io) |
| hyphenate-before |
auto/integer |
hyphenate-before : 10 |
| hyphenate-character |
auto/string |
hyphenate-character : “\1234” |
| counter-increment |
none/number |
counter-increment : 10 |
| marks |
crop | cross/none |
marks : crop |
| move-to |
normal/here/id |
move-to : normal |
| image-resolution |
auto/normal/dpi |
image-resolution : auto |
| page-policy |
start/first/last |
page-policy : last |
| quotes |
none/string |
quotes : “’” “’” |
| string-set |
[id string] [id string] |
string-set : header content(); |
| text-replace |
none [string string] |
text-replace : “foo” “bar” |
28. Line Box
| 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-align |
central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | % |
drop-initial-after-align : 30% |
| drop-initial-before-align |
caps-height | <alignment-baseline> |
drop-initial-before-align : central |
| drop-initial-before-adjust |
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-shift |
sub | super | length % |
baseline-shift : super |
| dominant-baseline |
baseline/hanging/middle |
dominant-baseline : middle x=25 y = 50 |
| line-stacking-shift |
consider-shifts | disregard-shifts |
line-stacking-shift : disregard-shifts |
| line-stacking-strategy |
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-align |
Baseline | 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:
