CSS Cheat Sheet: essential notions and definitions, Cheat Sheet of Programming Languages

Very good cheat sheet on essential notions of the CSS programming language

Typology: Cheat Sheet

2019/2020

Uploaded on 10/09/2020

ekansh
ekansh 🇺🇸

4.3

(20)

266 documents

1 / 1

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Boxes
margin *
margin-top
margin-right
margin-bottom
margin-left
padding *
padding-top
padding-right
padding-bottom
padding-left
border *
border-top *
border-bottom *
border-right *
border-left *
border-color *
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style *
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width *
border-top-width
border-right-width
border-bottom-width
border-left-width
Positioning
display
position
top
right
bottom
left
float
clear
z-index
direction
unicode-bidi
overflow
clip
visibility
Dimensions
width
min-width
max-width
height
min-height
max-height
line-height
vertical-align
Miscellaneous
content
quotes
counter-reset
counter-increment
marker-offset
list-style *
list-style-type
list-style-image
list-style-position
Shorthand properties
are marked with *
Paging
size
marks
page-break-before
page-break-after
page-break-inside
page
orphans
widows
Color / Background
color
* background
background-color
background-image
background-repeat
background-attachment
background-position
Fonts
* font
font-family
font-style
font-variant
font-weight
font-stretch
font-size
font-size-adjust
Text
text-indent
text-align
text-decoration
text-shadow
letter-spacing
word-spacing
text-transform
white-space
Tables
caption-side
table-layout
border-collapse
border-spacing
empty-cells
speak-header
Interface
cursor
* outline
outline-width
outline-style
outline-color
Aural
volume
speak
* pause
pause-before
pause-after
* cue
cue-before
cue-after
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-numeral
Available free from
ILoveJackDaniels.com
*
div
div *
div span
div, span
div > span
div + span
.class
div.class
#itemid
div#itemid
a[class]
a[class='x']
a[class~='x']
a[lang|='en']
Styles apply to:
All elements
<div>
Elements within <div>
<span> within <div>
<div> and <span>
<span> with <div> as
parent
<span> preceded by
<div> ... </div>
Elements of class "class"
<div> of class "class"
Element with id "itemid"
<div> with id "itemid"
<a> with class attribute
<a> when class is "x"
<a> when class is a list
of space-seperated values
and one of those is 'x'
<a> when lang begins
with "en"
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
:first-child
:first-line
:first-letter
:hover
:active
:focus
:link
:visited
:lang(lang)
Styles apply to:
First child of element
First line of element
First letter of element
Element when mouse over
Active element
Element with focus
Non-active, unvisited
links without mouse over.
Visited links
Element with text of
language "lang"
px
em
ex
%
in
cm
mm
pt
pc
#789abc
#acf
rgb(0,25,50)
0
Pixels
1em equal to font size of
parent (same as 100%)
Height of lower case "x"
Percent age
Inches
Centimeters
Millimeters
1pt = 1/72in
1pc = 12pt
RGB Hex Notation
Equates to "#aaccff"
Value (0 to 255) of each
of red, green, and blue.
May also be percentages
0 requires no unit
Width
Margin
Padding
Visible Area
Height Border
azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
orphans
page
page-break-inside
quotes
speak
speak-header
text-align
text-indent
text-transform
volume
white-space
widows
word-spacing
css
/* Comment */
@media type {
selector {
property: values;
}
}(Media type optional)

Partial preview of the text

Download CSS Cheat Sheet: essential notions and definitions and more Cheat Sheet Programming Languages in PDF only on Docsity!

Boxes margin * margin-top margin-right margin-bottom margin-left

padding * padding-top padding-right padding-bottom padding-left

border * border-top * border-bottom * border-right * border-left *

border-color * border-top-color border-right-color border-bottom-color border-left-color

border-style * border-top-style border-right-style border-bottom-style border-left-style

border-width * border-top-width border-right-width border-bottom-width border-left-width

Positioning display position top right bottom left float clear z-index direction unicode-bidi overflow clip visibility

Dimensions width min-width max-width height min-height max-height line-height vertical-align

Miscellaneous content quotes counter-reset counter-increment marker-offset list-style * list-style-type list-style-image list-style-position

Shorthand properties are marked with *

Paging size marks page-break-before page-break-after page-break-inside page orphans widows

Color / Background color

  • background background-color background-image background-repeat background-attachment background-position

Fonts

  • font font-family font-style font-variant font-weight font-stretch font-size font-size-adjust

Text text-indent text-align text-decoration text-shadow letter-spacing word-spacing text-transform white-space

Tables caption-side table-layout border-collapse border-spacing empty-cells speak-header

Interface cursor

  • outline outline-width outline-style outline-color

Aural volume speak

  • pause pause-before pause-after
  • cue cue-before cue-after play-during azimuth elevation speech-rate voice-family pitch pitch-range stress richness speak-punctuation speak-numeral Available free from ILoveJackDaniels.com

div div * div span div, span div > span

div + span

.class div.class #itemid div#itemid a[class] a[class='x'] a[class~='x']

a[lang|='en']

Styles apply to: All elements

Elements within within and with as parent preceded by ... Elements of class "class" of class "class" Element with id "itemid" with id "itemid" with class attribute when class is "x" when class is a list of space-seperated values and one of those is 'x' when lang begins with "en"

all braille embossed handheld print

projection screen speech tty tv

:first-child :first-line :first-letter :hover :active :focus :link

:visited :lang(lang)

Styles apply to: First child of element First line of element First letter of element Element when mouse over Active element Element with focus Non-active, unvisited links without mouse over. Visited links Element with text of language "lang"

px em

ex % in cm mm pt pc #789abc #acf rgb(0,25,50)

Pixels 1em equal to font size of parent (same as 100%) Height of lower case "x" Percentage Inches Centimeters Millimeters 1pt = 1/72in 1pc = 12pt RGB Hex Notation Equates to "#aaccff" Value (0 to 255) of each of red, green, and blue. May also be percentages 0 requires no unit

Width

Padding Margin

Visible Area

Height (^) Border

azimuth border-collapse border-spacing caption-side color cursor direction empty-cells font font-family font-stretch font-size font-size-adjust font-style font-variant font-weight letter-spacing line-height

list-style list-style-image list-style-position list-style-type orphans page page-break-inside quotes speak speak-header text-align text-indent text-transform volume white-space widows word-spacing

css

/* Comment */ @media type { selector { property: values; } } (^) (Media type optional)