CASCADING STYLESHEET: PROPERTIES

1. Background Properties
​ Background Properties may be used to define the background of an HTML element. A
common use for the background property is for setting the background of the body.
PROPERTY DESCRIPTION VALUES
background-color Sets the background color ●​ color
●​ transparent (default – no
background)
background-image Sets the background image ●​ url (“URL”) – URL refers
to the location of the
image file.
●​ none
background-attachment Sets whether or not the ●​ scroll (default)
image will scroll with the ●​ fixed
page
background-position Sets the initial position of ●​ top left (default)
the background image ●​ top center
●​ top right
●​ center left
●​ center center
●​ center right
●​ bottom left
●​ bottom center
●​ bottom right
●​ x% y% (0%, 0% refer to
top left corner, 100%
100% refer to bottom
right corner)
background-repeat Sets how the background ●​ repeat (default)
will tile or repeat in the page ●​ repeat-x (repeat
horizontally)
●​ repeat-y (repeat
vertically)
●​ no-repeat
background-clip Sets the clipping position of ●​ border-box (default)
the background ●​ padding-box
●​ content-box
background-origin Sets the relative origin of the ●​ padding-box (default)
background-position ●​ border-box
●​ content-box
background-size Sets the size of the ●​ auto (default)
background-image ●​ length (indicate x, y)
●​ percentage (indicate x%,
y%)
●​ cover (set the image large
enough to cover the
background area; some
parts may not be visible)
●​ contain (set the image
large enough to cover the
area)

2. Text Properties
​ Text Properties may be used to define the style of text in an HTML element.
PROPERTY DESCRIPTION VALUES
color Sets the text color ●​ color name
●​ color in hexadecimal
format
direction Sets the direction of the text ●​ ltr (default)
●​ rtl
line-height Sets the space between lines ●​ normal (default)
●​ a number
●​ line height in px, em, cm,
etc.
●​ %
letter-spacing Sets the space between the ●​ normal
characters ●​ line spacing in px, em, cm,
etc.
text-align Sets the alignment of text ●​ left (default)
●​ right
●​ center
●​ justify
text-decoration Sets the decoration of the text ●​ none
●​ underline
●​ overline
●​ line-through
●​ blink
text-indent Sets the indention of first line ●​ text indent in px, em, cm,
of text etc.
●​ % (based on width of the
parent element)
text-transform Sets the case of the text ●​ none
●​ capitalize
●​ uppercase
●​ lowercase
white space Sets how white(blank) space ●​ normal (default)
is regarded ●​ pre
●​ nowrap
●​ pre-line
●​ pre-wrap
word-spacing Sets the space between words ●​ normal (default)
●​ text indent in px, em, cm,
etc.
vertical-align Sets the vertical alignment of ●​ baseline (default)
text ●​ value in in, px, em, cm, etc.
●​ %
●​ sub (subscript)
●​ sup (superscript)
●​ top
●​ text-top
●​ middle
●​ bottom
●​ text-bottom
text-overflow Sets the behavior when text ●​ clip (default)
overflows the parent element ●​ ellipsis
text-shadow Sets the text shadow (not ●​ h-shadow
supported in IE) ●​ v-shadow
●​ blur
●​ color
 word-break Sets word hyphenation rules ●​ normal (default)
for non-CJK (Chinese, ●​ break-all
Japanese, Korean) scripts (not ●​ keep-all
supported in Opera) ●​ break-word
word-wrap Sets the wrap behavior ●​ normal (default)
●​ break-word
3. Font Properties
​ Font Properties may be used to define the style of the text font in an HTML element.
PROPERTY DESCRIPTION VALUES
font-family Sets the list of fonts to be ●​ family-name
used
font-size Sets the size of the font ●​ small
●​ medium (default)
●​ large
●​ x-small
●​ xx-small
●​ x-large
●​ xx-large
●​ smaller
●​ larger
●​ font-size in px, em, cm, etc
●​ %
font-style Sets the style of the font ●​ normal (default)
●​ italic
●​ oblique
font-variant Sets whether or not text ●​ normal (default)
displayed in small caps ●​ small-caps
font-weight Sets the weight of the font ●​ normal (default)
●​ bold
●​ bolder
●​ lighter
●​ 100/200/300/400/500
/600/700/800/900 (400 is
same as normal; 700 is
same as bold)
@font-face Downloads and uses a font ●​ src:url(“URL”) – URL refers
to the location of the font
file
4. Border and Outline Properties
​ Border properties may be used to define the style of borders in an HTML element.
PROPERTY DESCRIPTION VALUES
border-style Sets the style of the border ●​ none
●​ hidden
●​ solid
●​ dotted
●​ dashed
●​ double
●​ groove
●​ inset
●​ outset
●​ ridge
border-width Sets the width of all borders ●​ thin
●​ medium (default)
●​ thick
●​ width in px, em, cm, etc.
border-color Sets the color of the border ●​ transparent (default)
●​ color
border-left-color Sets the color of the left, right, ●​ transparent (default)
border-right-color top, or bottom border ●​ color
border-top-color
border-bottom-color
border-left-style Sets the style of the left, right, ●​ none
border-right-style top, or bottom border ●​ hidden
border-top-style ●​ solid
border-bottom-style ●​ dotted
●​ dashed
●​ double
●​ groove
●​ inset
●​ outset
●​ ridge
border-top-left-radius Sets the shape of the border’ ●​ radius in %, px, em, cm,
border-top-right-radius corner etc.
border-bottom-left-radius
border-bottom-right-radius
box-shadow Adds a shadow to the box ●​ hshadow in px, em, cm,
etc.
●​ vshadow in px, em, cm,
etc.
●​ blur in px, em, cm, etc.
●​ spread in px, em, cm, etc.
●​ color
●​ inset
outline-color Sets the outline color ●​ invert (default)
●​ color
outline-style Sets the outline style ●​ none
●​ solid
●​ dotted
●​ dashed
●​ double
●​ groove
●​ inset
●​ outset
●​ ridge
outline-width Sets the outline width ●​ thin
●​ medium (default)
●​ thick
●​ width in px, em, cm, etc.
5. Margin Properties
​ Margin properties may be used to define the margins of an HTML element.
PROPERTY DESCRIPTION VALUES
margin-left Sets the left, right, top, and ●​ auto (default)
margin-right bottom margins ●​ margin in px, cm, em, %,
margin-top etc.
margin-bottom
6. Padding Properties
​ Padding Properties may be used to define the space between the border and content in an
HTML element.
PROPERTY DESCRIPTION VALUES
 padding-left Sets the left, right, top, and ●​ 0 (default)
padding-right bottom padding ●​ padding in px, cm, em, %,
padding-top etc.
padding-bottom
7. List Properties
​ List properties may be used to define the style of a list in an HTML element.
PROPERTY DESCRIPTION VALUES
list-style-type Sets the style of the list ●​ none
For Unordered lists
●​ disc (default)
●​ circle
●​ square
For Ordered lists
●​ decimal (default)
●​ decimal-leading-zero
●​ lower-roman
●​ upper-roman
●​ lower-alpha
●​ upper-alpha
●​ armenian
●​ cjk-ideographic
●​ georgian
●​ hebrew
●​ hiragana
●​ hiragana-iroha
●​ katakana
●​ katakana-iroha
●​ lower-greek
●​ upper-latin
●​ lower-latin
list-style-position Sets the indention of the ●​ outside (default)
items in a list ●​ inside
list-style-image Sets the image as the bullet ●​ none (default)
●​ url (“URL”)

8. Dimension Properties
​ Dimension properties may be used to define the width and height of an HTML element.
PROPERTY DESCRIPTION VALUES
height Sets the height and width ●​ auto (default)
width ●​ height or width in %, px,
em, cm, etc.
max-height Sets the maximum or ●​ none (default)
max-width minimum height and width ●​ value in %, px, em, cm, etc.
min-height
min-width
9. Positioning Properties
​ Positioning properties may be used to define how an HTML element is positioned in the
page or in another element.
PROPERTY DESCRIPTION VALUES
cursor Sets the cursor to be ●​ auto (default)
displayed when the mouse ●​ text
pointer moves over the ●​ wait
element ●​ help
●​ crosshair
●​ default
 ●​ pointer
●​ move
●​ e-resize
●​ ne-resize
●​ nw-resize
●​ n-resize
●​ se-resize
●​ sw-resize
●​ s-resize
●​ w-resize
●​ url (“URL”)
display Sets how the element is ●​ none
displayed ●​ inline (default)
●​ block
●​ list-item
●​ run-in
●​ compact
●​ marker
●​ table
●​ inline-table
●​ table-row-group
●​ table-header-group
●​ table-footer-group
●​ table-row
●​ table-column-group
●​ table-column
●​ table-cell
●​ table-caption
float Sets the element to float in ●​ left
another element ●​ right
●​ none (default)
clear Sets where floating elements ●​ left
are not allowed ●​ right
●​ both
●​ none (default)
visibility Sets the visibility of the ●​ visible (default)
element. Unlike in using the ●​ hidden
display property, invisible ●​ collapse – removes table
elements will still take up columns or rows
space.
overflow Sets the behavior of an ●​ auto (default)
element when its content goes ●​ visible
beyond its specified area. ●​ hidden
●​ scroll
clip Sets the shape of an HTML ●​ auto (default)
element; usually used with ●​ rect (top right bottom left)
images
position Sets how the element is ●​ static (default)
positioned in the page. ●​ relative – adds the value to
the current top and left
positioning inside the
parent element
●​ absolute – indicates the
exact position in the
ancestor element
 ●​ fixed – positioning is
relative to the browser’s
window
bottom Sets the bottom position of ●​ auto (default)
the element ●​ value in %, px, em. cm, etc.
Absolute position- bottom
edge is the bottom of the
containing element
Relative position- bottom edge
is the bottom of the current
position
left, right, top, bottom Sets the distance between the ●​ auto (default)
element from its parent ●​ value in %, px, em. cm, etc.
element
z-index Sets the stack order of the ●​ auto (default)
element. The default index is ●​ n (number)
zero. Negative indexes have
lower priorities and are
displayed behind the element
that has a higher index.
z-index only works with
absolute positioning.
10. Table Properties
​ Table properties may be used to control the appearance of tables in the page.
PROPERTY DESCRIPTION VALUES
border-collapse Sets the table to use a single ●​ separate (default)
border for both table and cell ●​ collapse
border-spacing Sets the spacing between cells ●​ hspace vspace (horizontal
(works only if border-collapse and vertical spacing in px,
is set to “separate”) em, cm, etc.)
caption-side Sets the placement of the ●​ top (default)
table’s caption ●​ bottom
empty-cells Sets whether or not empty ●​ show (default)
cells are shown (works only if ●​ hide
border-collapse is set to
“separate”)
table-layout Sets the horizontal layout of a ●​ auto (default; cell size
table depends on the content)
●​ fixed (cell size is fixed and
does not adjust to the
content)
Prepared By: Sir JM Vistal 😊