Page 1 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

BACKGROUND BORDER BOX MODEL

background background-image border-top border-top-width float left | right | none

background-position border-style
background-size border-color height auto
background-repeat length
background-attachment border-top-color border-color %
background-origin
border-top-style border-style max-height none
background-clip
length
background-color border-top-width thin | medium | thick %
length
background-attachment scroll | fixed
max-width none
border-width thin | medium | thick length
background-break bounding-box | each-box |
length %
continuous
border-radius border-top-right-radius min-height none | inherit
background-clip length
border-bottom-right-radius length
%
border-bottom-left-radius %
border-box | padding-box |
border-top-left-radius
content-box | no-clip
min-width none | inherit
border-top-right-radius length length
background-color color
transparent %
border-bottom-right-radius length
background-image url width auto
border-bottom-left-radius length %
none
length
background-origin border-box | padding-box | border-top-left-radius length
content-box margin margin-top
box-shadow inset || [ length, length, margin-right
background-position top left | top center | top length, length || <color> ] margin-bottom
right | center left | center none margin-left
center | center right |
border-style none | hidden | dotted | margin-bottom auto
bottom left | bottom center
dashed | solid | double | length
| bottom right
groove | ridge | inset | %
x-% y-%
outset
x-pos y-pos
margin-left auto
FONT length
background-repeat repeat | repeat-x | repeat-
y | no-repeat %
font font-style
font-variant margin-right auto
background-size length
font-weight length
%
font-size/line-height %
auto | cover | contain
font-family
caption | icon | menu | margin-top auto
BORDER
message-box | small- length
border border-width caption | status-bar %
border-style
font-family family-name padding padding-top
border-color
generic-family padding-right
border-break border-width inherit padding-bottom
border-style padding-left
color font-size xx-small | x-small | small |
medium | large | x-large | padding-bottom length
close
xx-large | smaller | larger | %
border-bottom border-bottom-width inherit
length padding-left length
border-style
border-color % %

font-size-adjust none| inherit padding-right length

border-bottom-color border-color
number %
border-bottom-style border-style padding-top length
font-stretch normal | wider | narrower |
ultra-condensed | extra- %
border-bottom-width thin | medium | thick
condensed | condensed |
length marquee-direction forward | reverse
semi-condensed | semi-
border-collapse collapse | separate expanded | expanded | marquee-loop infinite
extra-expanded | ultra- number
border-color color expanded | inherit
marquee-play-count infinite
border-image image font-style normal | italic | oblique | integer
[ number / % inherit
border-width marquee-speed slow | normal | fast
stretch | repeat | round ] font-variant normal | small-caps | inherit
none marquee-style scroll | slide | alternate
font-weight normal | bold | bolder |
border-left border-left-width lighter | 100 | 200 | 300 | overflow visible | hidden | scroll |
border-style 400 | 500 | 600 | 700 | 800 auto | no-display | no-
border-color | 900 | inherit content
overflow-x
border-left-color border-color BOX MODEL overflow-y

border-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar-
quee-block
border-left-width thin | medium | thick display none | inline | block | inline-
length block | list-item | run-in | overflow-x visible | hidden | scroll |
compact | table | inline- auto | no-display | no-
border-right border-right-width table | table-row-group | content
border-style table-header-group | table-
border-color footer-group | table-row | overflow-y visible | hidden | scroll |
table-column-group | table- auto | no-display | no-
border-right-color border-color column | table-cell | table- content
caption | ruby | ruby-base |
border-right-style border-style rotation angle
ruby-text | ruby-base-group
border-right-width thin | medium | thick | ruby-text-group
rotation-point position (paired value off-
length set)

visibility visible | hidden | collapse

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

Page 2 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

TEXT TEMPLATE LAYOUT SPEECH
direction ltr | rtl | inherit box-align start | end | center | base- voice-family inherit | [ <specific-voice,
age, generic-voice, num-
hanging-punctuation none | [ start | end | end- ber> ]
edge ] box-direction normal | reverse
voice-rate x-slow | slow | medium |
letter-spacing normal box-flex number fast | x-fast | inherit
length %
% box-flex-group integer
voice-pitch x-low | low | medium | high
punctuation-trim none | [start | end | adja- box-lines single | multiple
| x-high | inherit
cent] number
box-orient horizontal | vertical | inline-
text-align start | end | left | right | axis | block-axis %
center | justify voice-pitch-range x-low | low | medium | high
box-pack start | end | center | justify
text-align-last start | end | left | right | | x-high | inherit
center | justify box-sizing content-box | padding-box | number
border-box | margin-box
text-decoration none | underline | overline | voice-stress strong | moderate | none |
line-through | blink tab-side top | bottom | left | right reduced | inherit

text-emphasis none | [ [ accent | dot | circle TABLE voice-volume silent | x-soft | soft | me-
| disc] [ before | after ]? ] dium | loud | x-loud | inherit
border-collapse collapse | separate number
text-indent length %
% border-spacing length length
LIST & MARKERS
text-justify auto | inter-word | inter- caption-side top | bottom | left | right
ideograph | inter-cluster | list-style list-style-type
distribute | kashida | tibetan empty-cells show | hide list-style-position
list-style-image
text-outline none table-layout auto | fixed
color list-style-image none
length SPEECH url

text-shadow none cue cue-before list-style-position Inside | outside

color cue-after
length list-style-type none | asterisks | box |
cue-before uri [ silent | x-soft | soft | check | circle | diamond |
text-transform none | capitalize | uppercase medium | loud | x-loud] | disc | hyphen | square |
| lowercase none | inherit ] decimal | decimal-leading-
number zero | lower-roman | upper-
text-wrap normal | unrestricted | none % roman | lower-alpha | up-
| suppress per-alpha | lower-greek |
cue-after uri [ silent | x-soft | soft | lower-latin | upper-latin |
unicode-bidi normal | embed | bidi- medium | loud | x-loud] | hebrew | armenian | geor-
override none | inherit ] gian | cjk-ideographic |
number hiragana | katakana | hira-
white-space normal | pre | nowrap | pre-
% gana-iroha | katakana-iroha
wrap | pre-line
| footnotes
mark mark-before
white-space-collapse preserve | collapse | pre-
mark-after marker-offset auto
serve-breaks | discard
length
mark-before string
word-break normal | keep-all | loose |
break-strict | break-all ANIMATIONS
mark-after string
word-spacing normal animation animation-name
length pause pause-before animation-duration
% pause-after animation-timing-function
animation-delay
word-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count
medium | strong | x-strong animation-direction
COLUMN | inherit
time animation-delay time
column-count auto
number pause-after none | x-weak | weak | animation-direction normal | alternate
medium | strong | x-strong
column-fill auto | balance | inherit animation-duration time
time
column-gap normal animation-iteration-count inherit
length phonemes string number

column-rule column-rule-width rest rest-before animation-name none | IDENT

column-rule-style rest-after
column-rule-color animation-play-state running | paused
rest-before none | x-weak | weak |
column-rule-color color medium | strong | x-strong animation-timing-function ease | linear | ease-in |
| inherit ease-out | ease-in-out |
column-rule-style border-style time cubic-Bezier (number, num-
ber, number, number)
column-rule-width thin | medium | thick rest-after none | x-weak | weak |
length medium | strong | x-strong TRANSITIONS
| inherit
columns column-width transition transition-property
time
column-count transition-duration
speak none | normal | spell-out | transition-timing-function
column-span 1 | all transition-delay
digits | literal-punctuation |
column-width auto no-punctuation | inherit
transition-delay time
length
voice-balance left | center | right | left-
transition-duration time
COLOR wards | rightwards | inherit
number transition-property none | all
color inherit
color voice-duration time transition-timing-function ease | linear | ease-in |
ease-out | ease-in-out |
opacity inherit cubic-Bezier (number, num-
number ber, number, number)

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

Page 3 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

GRID POSITIONING GENERATED CONTENT LINE BOX
grid-columns none | inherit hyphenate-after auto line-height normal
[ length percentage relative integer number
length ] length
hyphenate-before auto %
grid-rows none | inherit integer
[ length percentage relative line-stacking line-stacking-strategy
length ] hyphenate-character auto line-stacking-ruby
string line-stacking-shift
OUTLINE
hyphenate-lines no-limit line-stacking-strategy inline-line-height | block-
outline outline-color integer line-height | max-height |
outline-style grid-height
outline-width hyphenate-resource none
uri line-stacking-ruby exclude-ruby | include-ruby
outline-color color
invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard-
image-resolution normal | auto shifts
outline-offset inherit
length dpi text-height auto | font-size | text-size |
marks [ crop || cross ] | none max-size
outline-style None | dotted | dashed |
solid | double | groove | vertical-align Baseline | sub | super | top
move-to normal | here
ridge | inset | outset | text-top | middle | bottom
identifier
| text-bottom
outline-width thin | medium | thick length
page-policy start | first | last
length %
quotes none
3D / 2D TRANSFORM HYPERLINK
string string string string
backface-visibility visible | hidden target target-name
string-set identifier
content-list target-new
perspective none
target-position
number
text-replace none
[<string> <string>]+ target-name current | root | parent | new
perspective-origin [ [ [ percentage> |
| modal
<length> | left | center |
LINE BOX string
right ] [ <percentage> |
<length> | top | center | target-new window | tab | none
bottom ]? ] <length> ] | alignment-adjust auto | baseline | before-
[ [ [ left | center | right ] || edge | text-before-edge | target-position above | behind | front |
[ top | center | bottom ] ] middle | central | after-edge back
<length> ] | text-after-edge | ideo-
graphic | alphabetic | hang- POSITIONING
transform none | matrix | matrix3d | ing | mathematical
translate3d | translateX | length bottom auto
translateY | translateZ | % %
scale | scale3d | scaleX | length
scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be-
rotate3d | rotateX | rotateY fore-edge | text-before- clip shape
| rotateZ | skewX | skewY | edge | after-edge | text- auto
skew | perspective after-edge | central | middle
| ideographic | alphabetic | left auto
transform-origin [ [ [ <percentage> | hanging | mathematical %
<length> | left | center | length
right ] [ <percentage> | baseline-shift baseline | sub | super
length position static | relative | absolute |
<length> | top | center | fixed
bottom ]? ] <length> ] | %
[ [ [ left | center | right ] || right auto
dominant-baseline auto | use-script | no-
[ top | center | bottom ] ] %
change | reset-size | alpha-
<length> ] length
betic | hanging | ideo-
transform-style flat | preserve-3d graphic | mathematical |
top auto
central | middle | text-after-
%
GENERATED CONTENT edge | text-before-edge length
bookmark-label content drop-initial-after-align alignment-baseline
z-index auto
attr number
drop-initial-after-adjust central | middle | after-edge
string
| text-after-edge | ideo-
RUBY
bookmark-level none graphic | alphabetic |
integer mathematical ruby-align auto | start | left | center |
length end | right | distribute-letter
bookmark-target self % | distribute-space | line-
uri edge
attr drop-initial-before-align caps-height
alignment-baseline ruby-overhang auto | start | end | none
border-length auto
length drop-initial-before-adjust before-edge | text-before- ruby-position before | after | right | inline
edge | central | middle |
content normal | none | inhibit hanging | mathematical ruby-span attr(x) | none
uri length
%
counter-increment none
identifier number drop-initial-value initial
integer
counter-reset none
identifier number drop-initial-size auto
integer
crop auto %
shape line
display normal | none | list-item inline-box-align initial | last
integer
float-offset length length

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

Page 4 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

PAGED MEDIA

fit fill | hidden | meet | slice

fit-position [top | center | bottom] ||

[left | center | right]
length
%

image-orientation auto
angle

orphans integer

page auto
identifier

page-break-after auto | always | avoid | left |

right

page-break-before auto | always | avoid | left |

right

page-break-inside auto | avoid

size auto | landscape | portrait

length

windows integer

UI

appearance 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 | signa-
ture | password]

cursor auto | crosshair | default |

pointer | move | e-resize |
ne-resize | nw-resize | n-
resize | se-resize | sw-resize
| s-resize | w-resize | text |
wait | help
url

icon auto | inherit

url

nav-index auto | inherit

number

nav-up auto | inherit

<id> [ current | root |
<target-name> ]

nav-right auto | inherit

<id> [ current | root |
<target-name> ]

nav-down auto | inherit

<id> [ current | root |
<target-name> ]

nav-left auto | inherit

<id> [ current | root |
<target-name> ]

resize none | both | horizontal |

vertical | inherit

• Values in italics are place holders for an actual value (like 1px,
1em, 1%), values in normal text are values that can be used as
the actual value
• CSS Properties in Dark Red are shorthand properties and each
value must be defined. The exception is where the property can
define from one to four of the sides of a box element property
(Top-Right-Bottom-Left) - i.e. border-width

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

Page 5 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

PSEUDO-CLASS UNITS SELECTOR TYPES

:active an activated element ABSOLUTE MEASUREMENT Name Info Example

:focus an element while the % percentage Universal Any element * { font: 10px Arial; }
element has focus
cm centimeter Type Any element of h1 { text-decoration:
:visited a visited link that type underline; }
in inch
:hover an element when you mouse Grouping Multiple h1, h2, h3 { font-family:
over it mm millimeter elements of Verdana; }
different types
:link an unvisited link
pc pica (1p = 12 points)
Class Multiple .sampleclass { text-
:disabled an element while the elements of decoration: underline; }
element is disabled pt point (1pt = 1/72 inch)
different types
RELATIVE MEASUREMENT when you don’t
:enabled an element while the want to affect
element is enabled all instances of
ch width of the "0" glyph found in
:checked an element (form element the font for the font size used to that type
control) that is checked render
Id A single #sampleid { text-
:selection an element that is currently em 1em = current font size of element type decoration: underline; }
selected of highlighted by current element when you don’t
the user want to affect
ex x-height of the element's font all instances of
:lang Allows the author to specify that type
gd the grid defined by 'layout-grid'
a language to use in a
specified element Descendant An element that #gallery h1 { text-
px pixel of the viewing device is below (in the decoration: underline; }
:nth-child(n) an element that is the n-th rem the font size of the root element document tree)
sibling another
vh the viewport's height element—no
:nth-last-child(n) an element that is the n-th matter how
sibling counting from the vw the viewport's width many levels
last sibling below
vm viewport's height or width,
:first-child an element that is the first whichever is smaller of the two Child An element that #title > p { font-weight:
sibling is directly below bold; }
ANGLES (in the
:last-child an element that is the last document tree)
sibling deg degrees
another
grad grads element
:only-child an element that is the only
child Adjacent All elements h1 + p { font-style:
rad radians
Sibling that share the italic; }
:nth-of-type(n) an element that is the n-th
turn turns same parent
sibling of its type.
and elements
TIME are in the same
:nth-last-of-type(n) an element that is the n-th
sibling of its type counting immediate
ms milli-seconds
from the last sibling sequence
s seconds
:last-of-type an element that is the first General All elements h1 ~ p { font-style:
sibling of its type FREQUENCY Sibling that share the italic; }
same parent
:first-of-type an element that is the last Hz hertz and elements
sibling of its type are in the same
kHz kilo-hertz sequence (not
:only-of-type an element that is the only necessarily
child of that type COLORS
immediate)
:empty an element that has no color name red, blue, green, dark green
Attribute An element with E[selected] - att whatever
children that matches the value
rgb(x,y,z) red = rgb(255,0,0)
the attribute E[att="val"] - att with a
:root root element within the
rgb(x%,y%,z%) red = rgb(100%,0,0) listed specific value
document
E[rel~="next"] - att with
:not(x) an element not represented rgba(x,y,z, alpha) red = rgba(255,0,0) a value is a whitespace
by the argument ‘x’ separated list
#rrggbb red = #ff0000 (or shorthand = *[lang|="en"] - att value
:target a target element as specified #f00) either being exactly "val"
by a target in a URI or beginning with "val"
hsl(hue, saturation, red = hsl(0, 100%, 50%) immediately followed by
PSEUDO-ELEMENT lightness) "-"
E[att^="val"] - att value
::first-letter Adds special style to the first hsla(hue, saturation, red = hsl(0, 100%, 50%)
that begins with the prefix
letter of a text lightness, alpha)
"val"
::first-line Adds special style to the first flavor An accent color (typically chosen E[att$="val"] - att value
line of a text by the user) to customize the that end with the suffix
user interface of the user agent "val"
::before Inserts some content before itsel E[att*="val"] - att value
an element contains at least one
currentColor computed value of the instance of the substring
::after Inserts some content after an 'currentColor' keyword is the "val"
element computed value of the 'color'
property

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

 Cascading Style Sheets Cheatsheet&66 
page 1 of 2

Font Properties Text Properties

Font-Family Word-Spacing
Changes the font family of certain words, sentences, Defines an additional amount of space between words.
paragraphs, etc. P EM { word-spacing: 0.4em; }
P { font-family: "New Century Schoolbook", Times, serif; } P.note { word-spacing: -0.2em; }

Font-Style Letter-Spacing
Changes text: normal, oblique, and italics. Defines an additional amount of space between characters.
H1 { font-style: oblique; } H1 { letter-spacing: 0.1em; }
P { font-style: normal; } P.note { letter-spacing: -0.1em; }

Font-Variant Text-Decoration
Used to display font in normal or small-caps. Allows text to be decorated through one of five properties:
SPAN { font-variant: small-caps; } underline, overline, line-through, blink, none.
A:link, A:visited, A:active { text-decoration: none; }
Font-Weight
Used to specify the weight of the font. Vertical-Align
H1 { font-weight: 800; } or P { font-weight: normal; } Used to alter the vertical positioning of an inline element,
relative to its parent element or to the element's line.
Font-Size IMG.middle { vertical-align: middle; }
Used to modify the size of the displayed font. IMG { vertical-align: 50%; }
H1 { font-size: large; } or P { font-size: 12pt; } .exponent { vertical-align: super; }
LI { font-size: 90%; }
STRONG { font-size: larger; } Text-Transform
Allows for capitalizing the first letter of each word (capitalize),
Font capitalizing all letters of a word (uppercase), using all small
Used to combine all properties of fonts. letters in each word(lowercase), and the inital value(none).
P { font: italic bold 12pt/14pt Times, serif; } H1 { text-transform: uppercase; }
H2 { text-transform: capitalize; }

Color and Background Properties Text-Align

Color Used to justify text left, center, right, and justify.
Changes the color of text. H1 { text-align: center; }
H1 { color: blue; } or H2 { color: #000080; } P.newspaper { text-align: justify; }

Background-Color Text-Indent
Sets the background color of an element. Used to specify the amount of indentation prior to the first line
BODY { background-color: white; } of text.
H1 { background-color: #000080; } P { text-indent: 5em; }

Background-Image Line-Height
Sets the background image of an element. Used to control the spacing between baselines of text.
BODY { background-image: url(/images/foo.gif); } P { line-height: 200%; }
P { background-image: url(http://www.htmlhelp.com/bg.png); }

Background-Repeat Classification Properties

Determines how a specified background image is repeated. List-Style-Type
The repeat-x value will repeat the image horizontally while the Specifies the type of list-item marker, and is used if list-style-
repeat-y value will repeat the image vertically. image is none or if image loading is turned off.
BODY { background: white url(candybar.gif); LI.square { list-style-type: square; }
background-repeat: repeat-x; } UL.plain { list-style-type: none; }
OL { list-style-type: upper-alpha; } /* A B C D E etc. */
OL OL { list-style-type: decimal; } /* 1 2 3 4 5 etc. */
Background-Attachment
OL OL OL { list-style-type: lower-roman; } /* i ii iii iv v etc. */
Determines if a specified background image will scroll with the
content or be fixed with regard to the canvas. List-Style-Image
BODY { background: white url(candybar.gif);
Specifies the image that will be used as list-item marker when
background-attachment: fixed; }
image loading is turned on, replacing the marker specified in
Background the list-style-type property.
UL.check { list-style-image: url(/LI-markers/checkmark.gif); }
Used to combine all properties of background.
UL LI.x { list-style-image: url(x.png); }
BODY { background: white url(http://www.htmlhelp.com/foo.gif); }
BLOCKQUOTE { background: #7fffd4; }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed; } List-Style-Position
TABLE { background: red url(leaves.jpg) no-repeat bottom right; } Determines where the marker is placed in regard to the list
item. If the value inside is used, the lines will wrap under the
marker instead of being indented. outside is default.
UL { list-style-position: inside; }
 Cascading Style Sheets Cheatsheet (CSS 1&2)
page 2 of 2

Box Properties
Margin-Top Border-Left-Width
Sets the top margin of an element by specifying a length or a Used to specify the width of an element's left border.
percentage. P { border-left: 20%; }
BODY { margin-top: 5pt; }
Border-Width
Margin-Right Used to set the width of an element's border (either all
Sets the right margin of an element by specifying a length or a borders, or specifying top border, right border, bottom border,
percentage. left border).
P.narrow { margin-right: 50%; } P { border-width: 20%; }
P { border-width: 10px 5px 10px 5px; }
Margin-Bottom
sets the bottom margin of an element by specifying a length or Border-Color
a percentage. Used to set the color of an element's border.
DT { margin-bottom: 3em; } P { border-color: #00000; }

Margin-Left Border-Style
sets the left margin of an element by specifying a length or a Sets style of a border - none, dotted, dashed, solid, double.
percentage. P { border-style: dotted; }
ADDRESS { margin-left: 50%; }
Border-Top
Margin Sets the width, style, and color of an element's top border.
Sets the margins of an element by specifying top, bottom, left P { border-top: 10px, red, double; }
and right margins -- all either specifying length or percentage.
BODY { margin: 5em; } /* all margins 5em */ Border-Right
P { margin: 2em 4em; } /* top & bottom 2em, left & right 4em */ Sets the width, style, and color of an element's right border.
DIV { margin: 1em 2em 3em 4em; } P { border-right: 10px, red, double; }
/* top margin 1em, right 2em, bottom 3em, left 4em */
Border-Bottom
Padding-Top Sets the width, style, and color of an element's bottom border.
Describes the amount of space between the top border and P { border-bottom: 10px, red, double; }
the content of the selector.
P { padding-top: 20%; } Border-Left
Sets the width, style, and color of an element's left border.
Padding-Right P { border-left: 10px, red, double; }
Describes the amount of space between the right border and
the content of the selector. Border
P { padding-right: 20 px; } Sets the width, style, and color of an element's border.
P { border: 10px, red, double; }
Padding-Bottom
Describes the amount of space between the bottom border Width
and the content of the selector. Each block-level or replaced element can be given a width,
P { padding-bottom: 5 em; } specified as a length, a percentage, or as auto.
P { width: 15px; }
Padding-Left H1 { width: 35%; }
Describes the amount of space between the left border and .foo { width: auto; }
the content of the selector.
P { padding-left: 15 pt; } Height
Each block-level or replaced element can be given a height,
Padding specified as a length or as auto.
Shorthand for the padding-top, padding-right, padding-bottom, P { height: 15px; }
H1 { height: 35%; }
and padding-left properties.
.foo { height: auto; }
BLOCKQUOTE { padding: 2em 4em 5em 4em; }
Float
Border-Top-Width
Allows text to wrap around an element (left, right, none).
Used to specify the width of an element's top border.
P { float: left; }
P { border-top: 20%; }
H1 { float: right; }
.foo { float: none; }
Border-Right-Width
Used to specify the width of an element's right border.
Clear
P { border-right: 20%; }
Specifies whether an element allows floating elements to its
sides (left, right, none).
Border-Bottom-Width
P { clear: left; }
Used to specify the width of an element's bottom border. H1 { clear: right; }
P { border-bottom: 20%; } .foo { clear: none; }
<>
♥ iLoveCoding
CSS Cheatsheet
Comprehensive video course on HTML & CSS
https://ilovecoding.org/courses/htmlcss

1 Syntax to write CSS 3 Selectors and their syntax

Basic Selectors Combinators Pseudo Selectors
Selectors selectors {
The element(s) on which the style should be applied elementname selectorA + selectorB Adjacent sibling :active
....property: value;
.classname selectorA ~ selectorB General sibling :hover
Property and its value }
#idname parent > child Direct child :visited
This is the actual style to be applied to the element(s)
[attr=value] parent descendent Descendent :focus
*
2 3 places to write CSS 4 Common CSS properties (by group) margin

border
(A) Inline styles
TEXT: BACKGROUND: padding
<element style="property: value;"> color background
content
font background-attachment
(B) In the <style> element font-family background-color
font-size background-image
<head> font-weight background-position
....<style> letter-spacing background-repeat
........ selectors { property: value; } line-height
text-align DISPLAY: BOX: POSITION:
....</style>
text-decoration display border position
</head>
text-indent float border-color top
text-transform clear border-style bottom
(C) In a dedicated file (style.css)
vertical-align overflow border-width left
& refer that file via the <link> element
visibility height right
<head> LIST: margin z-index

....<link rel="stylesheet" list-style OTHER: padding

list-style-image cursor width
........ href="style.css" />
list-style-position box-sizing
</head>
< > iLoveCoding
list-style-type
♥

https://iLoveCoding.org