CSS Cheat Sheet Tutorial: A Practical Guide

background-position

Definition: Sets the position of the background image
Syntax: background-position: value;

• left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom: On specifying one keyword, the other value will default to center
• x% y%: The first number represents the horizontal position, while the second represents the vertical position
• xpos ypos: The first number represents the horizontal position, while the second represents the vertical position.

background-size

Definition: Sets the size of the background image
Syntax: background-size: auto | length | cover | contain | %

• auto: The background image will display in its original size
• length: Specify the width and height of the background image
• cover: Resize the background image to fill the entire container
• contain: Resize the background image to ensure the image is entirely visible
• %: Specify the width and height of the background image in percentages

background-repeat

Definition: Sets how a background image will be repeated
Syntax: repeat | repeat-x | repeat-y | no-repeat

• repeat: The background image will repeat horizontally and vertically
• repeat-x: The background image will repeat horizontally
• repeat-y: The background image will repeat vertically
• no-repeat: The background image will not repeat

background-attachment

Definition: Defines whether a background image will scroll with the remaining page or be fixed
Syntax: background-attachment: scroll | fixed

• scroll: The background image will scroll with the web page
• fixed: The background image will not scroll with the web page

background-origin

Definition: Defines whether a background image will scroll with the remaining page or be fixed
Syntax: background-origin: padding-box | border-box | content-box

• padding-box: The background image begins in the upper left corner of the padding
• border-box: A background image starts at the upper left corner of the border
• content-box: The background image begins at the upper left corner of the webpage

background-clip

Definition: Defines how far the background extends within an element
Syntax: background-clip: border-box | padding-box | content-box

• padding-box: Background extends beyond the inside edge of the border
• border-box: A background extends beyond the border
• content-box: The background extends beyond the edge of the content box

background-color

Definition: Sets the background color of an element
Syntax: background-color: color | transparent

• color: Sets the border color
• transparent: Sets the border color that is transparent

border-width

Definition: Sets the width of the four borders on an element
Syntax: border-width: medium thin | thick | length

• medium: Sets the medium border
• thin: Sets the thin border
• length: Sets the thickness of the border

border-style

Definition: Sets the style of the four borders on an element
Syntax: border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: Sets the medium border
• hidden: Sets the thin border
• dotted: Sets the thick border
• dashed: Sets the thickness of the border
• solid: Sets the medium border
• double: Sets the thin border
• groove: Sets the thick border
• ridge: Sets the thickness of the border
• inset: Sets the thick border
• outset: Sets the thickness of the border

border-color

Definition: Sets the colors of the four borders on an element
Syntax: border-color: color

• color: Defines the border color

border-left-width

Definition: Sets the width of the left border of an element
Syntax: border-bottom-width: medium | thin | thick | length

• medium: Sets the thin width of left border
• thin: Sets the thin width of left border
• thick: Sets the thick width of left border
• length: Sets the thickness of left border

border-left-style

Definition: Sets the style of the left border of an element
Syntax: border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: Sets the medium border
• hidden: Sets the thin border
• dotted: Sets the thick border
• dashed: Sets the thickness of the border
• solid: Sets the medium border
• double: Sets the thin border
• groove: Sets the grooved border in 3D
• ridge: Sets the ridged border in 3D
• inset: Sets the inset border in 3D
• outset: Sets the outset border in 3D

border-top-width

Definition: Sets the width of the top border of an element
Syntax: border-top-width: medium | thin | thick | length

• medium: Sets the thin width of top border
• thin: Sets the thin width of top border
• thick: Sets the thick width of top border
• length: Sets the thickness of top border

border-top-width

Definition: Sets the width of the top border of an element
Syntax: border-top-width: medium | thin | thick | length

• medium: Sets the thin width of top border
• thin: Sets the thin width of top border
• thick: Sets the thick width of top border
• length: Sets the thickness of top border

border-top-color

Definition: Sets the color of the top border of an element
Syntax: border-top-color: color

• color: Defines the border color

border-shadow

Definition: Adds one or more shadows to an element
Syntax: border-shadow: none | h-offset | v-offset | blur | spread | color | inset

• none: No shadow will be displayed
• h-offset: Set the horizontal offset of a shadow
• v-offset: Set the vertical offset of a shadow
• blur: A higher number means a blurrier shadow
• spread: A higher number increases a shadow’s size
• color: Sets the shadow’s color
• inset: Transforms the outer shadow into an inner shadow

border-collapse

Definition: Specifies whether table borders should be collapsed into one or separated
Syntax: border-shadow: separate | collapse

• separate: Separates the border with each cell having its own border
• collapse: Collapse the border into a single one

border-right-width

Definition: Specifies the width of the right border
Syntax: border-right-width: medium | thin | thick | length

• medium: Sets the medium border
• thin: Sets the thin border
• thick: Sets the thick border
• length: Sets the thickness of the border

border-image

Definition: Specify an image to use as an element's border
Syntax: border-image: source | slice | width | outset | repeat

• source: The image path to use as a border
• slice: Defines how the image should be sliced
• width: Sets the width of the image’s border
• outset: Specifies how far the border image area extends beyond the border box
• repeat: Sets whether to repeat, round, space, or stretch the border image

border-top-width

Definition: Specifies the width of the top border
Syntax: border-top-width: medium | thin | thick | length

• medium: Sets the medium top border
• thin: Sets the thin top border
• thick: Sets the thick top border
• length: Sets the thickness of the top border

border-bottom-color

Definition: Specifies the color of the bottom border
Syntax: background-color: color | transparent

• color: Sets the border color
• transparent: Sets the border color that is transparent

border-bottom-style

Definition: Sets the style of the element’s bottom border
Syntax: border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: Default with no border
• hidden: This is same as ‘none’ property other than border conflict resolution for table elements
• dotted: Sets the dotted border
• dashed: Sets the dashed border
• solid: Sets the solid border
• double: Sets the double border
• groove: Sets the grooved border in 3D
• ridge: Sets the ridged border in 3D
• inset: Sets the inset border in 3D
• outset: Sets the outset border in 3D

border-left-color

Definition: Sets the style of the element’s left border
Syntax: border-left-color: color | transparent

• color: Sets the border color
• transparent: Sets the border color that is transparent

border-left-width

Definition: Sets the width of the element’s left border
Syntax: border-left-width: medium | thin | thick | length

• medium: Sets the medium left border
• thin: Sets the thin left border
• thick: Sets the thick left border
• length: Sets the thickness of the left border

border-right-style

Definition: Sets the style of the element’s right border
Syntax: border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: Default with no border
• hidden: This is same as ‘none’ property other than border conflict resolution for table elements
• dotted: Sets the dotted border
• dashed: Sets the dashed border
• solid: Sets the solid border
• double: Sets the double border
• groove: Sets the grooved border in 3D
• ridge: Sets the ridged border in 3D
• inset: Sets the inset border in 3D
• outset: Sets the outset border in 3D

border-right-width

Definition: Specifies the width of the top border
Syntax: border-right-width: medium | thin | thick | length

• medium: Sets the medium right border
• thin: Sets the thin right border
• thick: Sets the thick right border
• length: Sets the thickness of the right border

border-top-right-radius

Definition: Sets the radius of the top-right corner of an element
Syntax: border-top-right-radius: length |% [length|%] | initial | inherit

• length: Sets the shape of the top-right corner
• %: Sets the shape of the top-right corners in %
• initial: This property's value is set to its default
• inherit: This property is inherited from its parent element

border-top-left-radius

Definition: Sets the radius of the element’s top-left corners
Syntax: border-top-left-radius: length | % [length|%] |initial | inherit

• length: Sets the shape of the top-left corner
• %: Sets the shape of the top-left corners in %
• initial: This property's value is set to its default
• inherit: This property is inherited from its parent element

border-bottom-right-radius

Definition: Sets the radius of the bottom-right corners
Syntax: border-bottom-right-radius: length | % [length|%] | initial | inherit

• length: Sets the shape of the bottom-right corner
• %: Sets the shape of the bottom-right corners in %
• initial: This property's value is set to its default
• inherit: This property is inherited from its parent element

border-bottom-left-radius

Definition: Sets the radius of the element’s bottom-left corners
Syntax: border-bottom-left-radius: length | % [length|%] | initial | inherit

• length: Sets the shape of the bottom-left corner
• %: Sets the shape of the bottom-left corners in %
• initial: This property's value is set to its default
• inherit: This property is inherited from its parent element

border-top-left-radius

Definition: Sets the radius of the element’s top-left corners
Syntax: border-top-left-radius: length | % [length|%] | initial | inherit

• length: Sets the shape of the top-left corner
• %: Sets the shape of the top-left corners in %
• initial: This property's value is set to its default
• inherit: This property is inherited from its parent element

height

Definition: Defines the height of an element
Syntax: height: auto | length | %

• auto: Height is determined by the browser. It is by default
• length: Specifies the height in px,cm etc
• %: Calculates the height in percentage of the containing block

max-height

Definition: Defines the maximum height of an element
Syntax: max-height: none | length | %

• none: There is no maximum height
• length: Specifies the height in px,cm etc
• %: Calculates the height in percent of the containing block

max-width

Definition: Defines the maximum width of an element
Syntax: max-width: none | length | %

• none: There is no maximum width
• length: Specifies the maximum width in px,cm etc
• %: Calculates the maximum width in percentage of the containing block

min-height

Definition: Defines the minimum height of an element
Syntax: min-height: length | %

• length: Specifies the minimum height in px,cm etc
• %: Calculates the minimum height in percentage of the containing block

width

Definition: Defines the width of an element
Syntax: width: auto | length | %

• none: Width is determined by the browser. It is by default
• length: Specifies the width in px,cm etc
• %: Calculates the width in percent of the containing block

padding

Definition: Padding is the space between an element's content and its border
Syntax: padding: length | %

• length: Specifies the padding in px,cm, pt etc
• %: Calculates the padding in percent of the containing block

padding-top

Definition: Defines the top padding of an element
Syntax: padding-top: length | %

• length: Specifies the top padding in px,cm, pt etc
• %: Calculates the top padding in percent of the containing block

padding-right

Definition: Defines the right padding of an element
Syntax: padding-right: length | %

• length: Specifies the right padding in px,cm, pt etc
• %: Calculates the right padding in percent of the containing block

padding-bottom

Definition: Defines the bottom padding of an element
Syntax: padding-bottom: length | %

• length: Specifies the bottom padding in px,cm, pt etc
• %: Calculates the bottom padding in percent of the containing block

padding-left

Definition: Defines the left padding of an element
Syntax: padding-bottom: length | %

• length: Specifies the left padding in px,cm, pt etc
• %: Calculates the left padding in percent of the containing block

display

Definition: Specifies how an element will display
Syntax: display: value

• inline: Shows an element as an inline element. No effect of any height and width properties
• block: Shows an element as a block element. It begins on a new line and spans the entire width
• contents: Removes the container, causing the child elements to be the next level in the DOM
• flex: An element is shown as a block-level flex container
• grid: An element is shown as a block-level grid container
• inline-block: An element is shown as an inline-level block container. This element is formatted as an inline element, however, you can set its height and width
• inline-flex: An element is shown as an inline-level flex container
• inline-grid: An element is shown as an inline-level grid container
• inline-table: An element is shown as an inline-level table
• list-item: Make the element behave like a li element
• run-in: Displays an element as either block or inline, depending on the context
• table: Depending on the context, displays an element as block or inline
• table-caption: Make the element behave like a caption element
• table-column-group: Make the element behave like a colgroup element
• table-header-group: Make the element behave like a thead element
• table-footer-group: Make the element behave like a tfoot element
• table-row-group: Make the element behave like a tbody element
• table-cell: Make the element behave like a td element
• table-column: Make the element behave like a col element
• table-row: Make the element behave like a tr element
• none: An element has been entirely eliminated
• initial: This property is set to its default value
• Inherits this property from its parent element.

margin

Definition: Sets an element's margins
Syntax: margin: length | auto | %

• auto: Margin is determined by the browser. It is by default
• length: Specifies the margin in px,cm, pt etc
• %: Calculates the margin in percent of the containing block

margin-top

Definition: Sets an element's top margin
Syntax: margin-top: length | auto | %

• auto: Top margin is determined by the browser
• length: Specifies the top margin in px,cm, pt etc
• %: Calculates the top margin in percent of the containing block

margin-right

Definition: Sets an element's right margin
Syntax: margin-right: length | auto | %

• auto: Right margin is determined by the browser
• length: Specifies the right margin in px,cm, pt etc
• %: Calculates the right margin in percent of the containing block

margin-bottom

Definition: Sets an element's bottom margin
Syntax: margin-right: length | auto | %

• auto: Bottom margin is determined by the browser
• length: Specifies the bottom margin in px,cm, pt etc
• %: Calculates the bottom margin in percent of the containing block

margin-left

Definition: Sets an element's left margin
Syntax: margin-right: length | auto | %

• auto: Left margin is determined by the browser
• length: Specifies the left margin in px,cm, pt etc
• %: Calculates the left margin in percent of the containing block

overflow

Definition: Defines what should happen if the content of an element's box overflows
Syntax: overflow: visible | hidden | clip | scroll | auto

• visible: The overflow has not been clipped. It displays outside the box of the element. This is the default
• hidden: The overflow has been clipped, and the remaining content will be invisible. Programmatic scrolling of content is allowed
• clip: The overflow has been clipped, and the remaining content will be invisible. Scrolling is restricted, including programmatic scrolling
• scroll: The overflow has been clipped, but a scroll bar is added to view the remaining content
• auto: If the overflow is clipped, a scroll bar should be added to allow the user to see the remaining content

overflow-x

Definition: When a block-level element overflows at the left and right edges, this property defines whether to clip the content, add a scroll bar, or show overflow content
Syntax: overflow-x: visible | hidden | scroll | auto

• visible: The content is not clipped and may extend beyond the left and right edges. This is the default
• hidden: The content is clipped, and there is no scrolling mechanism
• scroll: The content is clipped, and there is a scrolling mechanism
• auto: This should result in a scrolling mechanism being given for overflowing boxes

visibility

Definition: Specifies if the element is visible or invisible
Syntax: visibility: visible | hidden | collapse

• visible: The element can be seen
• hidden: The element is invisible
• collapse: This value deletes a row or column but has no effect on the table layout. The row or column's space will be freed up for additional content

clear

Definition: Specifies what happens to the element adjacent to a floating element
Syntax: clear: none | left | right| both

• none: The element is not moved below the left or right floating elements
• left: The element is placed below the floating elements on the left
• right: The element is placed below the floating elements on the right
• both: The element is placed beneath both the left and right floating elements

backface-visibility

Definition: Specifies whether or not the back face of an element should be shown while facing the user
Syntax: backface-visibility: visible | hidden

• visible: Default value. The backside will be visible
• hidden: The backside is invisible

perspective

Definition: Used to give some perspective to a 3D-positioned element. It represents the distance between the item and the user
Syntax: perspective: length | none

• length: The distance between the element and the viewer
• none: The default value. The perspective is not fixed

perspective-origin

Definition: Specifies the position from which the user is viewing the 3D-positioned element
Syntax: perspective-origin: x-axis y-axis

• x-axis: Specifying the location of the view on the x-axis Values: left | center | right | length | %
• y-axis: Specifying the location of the view on the y-axis Values: top | center | bottom | length | %

transform

Definition: Specifies the position from which the user is viewing the 3D-positioned element
Syntax: perspective-origin: x-axis y-axis

• none: No transformation will take place
• matrix: Uses a six-valued matrix to define a 2D transformation.
• matrix3d: Uses a 4x4 matrix of 16 values to define a 3D transformation.
• translate(x,y): Specifies a 2D translation
• translate3d(x,y,z): Specifies a 3D translation
• translateX(x): Specifies a translation using just the X-axis value
• translateY(y): Specifies a translation using just the Y-axis value
• translateZ(z): Specifies a 3D translation using just the Z-axis value
• scale(x,y): Specifies a 2D scale transformation
• scale3d(x,y,z): Specifies a 3D scale transformation
• scaleX(x): Gives a value for the X-axis to define a scale transformation
• scaleY(y): Gives a value for the Y-axis to define a scale transformation
• scaleZ(z): Gives a value for the Z-axis to define a scale 3D transformation
• rotate(angle): The angle is defined in the parameter, which defines a 2D rotation
• rotate3d(x,y,z,angle): Specifies a 3D rotation
• rotateX(angle) Specifies a 3D rotation along the X-axis
• rotateY(angle) : Specifies a 3D rotation along the Y-axis
• rotateZ(angle): Specifies a 3D rotation along the Z-axis
• skew(x-angle,y-angle): Specifies a 2D skew transformation along the X- and the Y-axis
• skewX(angle): Specifies a 2D skew transformation along the X-axis
• skewY(angle) Specifies a 2D skew transformation along the Y-axis
• perspective(n): Specifies a perspective view for a 3D transformed element

transform-origin

Definition: Lets you modify the position of transformed elements
Syntax: transform-origin: x-axis y-axis z-axis

• x-axis: Specifying the location of the view on the x-axis Values: left | center | right | length | %
• y-axis: Specifying the location of the view on the y-axis Values: top | center | bottom | length | %
• z-axis: Specifying the location of the view on the z-axis (for 3-D transformations) Values: length

column-count

Definition: Defines the number of columns into which an element should be split
Syntax: column-count: number | auto

• number: The optimum number of columns into which the element's content will be flowing
• auto: Other properties, such as "column-width," will define the number of columns

column-fill

Definition: Specifies whether columns should be filled in a balanced or unbalanced manner
Syntax: column-fill: balance | auto

• balance: Fills every column with nearly the same amount of content, but columns cannot be taller than the height
• auto: Fills each column till it reaches its height, then repeats the process until the content runs out

column-gap

Definition: Defines the gap between columns
Syntax: column-gap: length | normal

• length: The gap between the columns will be determined by a specified length
• normal: Sets the space between the columns to a standard value

column-rule-width

Definition: Determines the width of the rule between columns
Syntax: column-rule-width: medium | thin | thick | length

• medium: Specifies a medium rule. It is the default
• thin: Specifies a thin rule
• thick: Specifies a thick rule
• length: Defines the rule’s width

column-span

Definition: The number of columns that an element should span is specified.
Syntax: column-span: none | all

• none: Default. The element will span across one column
• all: The element will span across all columns.

column-rule

Definition: Defines the width, style, and color of the rule between columns
Syntax: column-rule: column-rule-width | column-rule-style | column-rule-color

• column-rule-width: Default value is medium. The width of the rule between columns is specified
• all: The element will span across all columns
• column-rule-style: Default value is none. The style of the rule between columns is specified
• column-rule-color: Default value is element’s color. The color of the rule between columns is specified

column-rule-style

Definition: Defines the style of the rule between columns
Syntax: column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: No rule is defined. This is default
• dotted: Sets the dotted rule
• dashed: Sets the dashed rule
• solid: Sets the medium rule
• double: Sets the thin rule
• groove: Sets the grooved rule in 3D
• ridge: Sets the rigid rule in 3D
• inset: Sets the inset rule in 3D
• outset: Sets the outset rule in 3D

color

Definition: Defines the color of the text
Syntax: color: color | initial | inherit

• color: Defines the text’s color
• inherit: This property is inherited from its parent element
• initial: This property is set to its default value

opacity

Definition: Sets an element's opacity level
Syntax: opacity: number | initial | inherit

• number: Defines the opacity from 0.0 to 0.1 [ entirely transparent to entirely opaque]
• inherit: This property is inherited from its parent element
• initial: This property is set to its default value

grid-column

Definition: Defines the size and position of a grid item in a grid layout
Syntax: grid-column: grid-column-start / grid-column-end

• grid-column-start: Specifies which column the item should be displayed in
• grid-column-end: Specifies where to end displaying the item or how many columns to span

grid-rows

Definition: Defines the size and position of a grid item in a grid layout
Syntax: grid-row: grid-row-start / grid-row-end

• grid-row-start: Specifies which row the item should be displayed in
• grid-row-end: Specifies where to end displaying the item or how many rows to span

page-break-after

Definition: This property inserts a page break before after a specified element
Syntax: page-break-before: auto | always | avoid | left | right

• auto: Default. Enables Automatic page-break
• always: Inserts a page break before the element
• avoid: Avoid inserting a page break before the element
• left: Inserts a page break before the element to make the following page a left page
• right: Inserts a page break before the element to make the following page a right page

page-break-inside

Definition: Determines whether or not a page break should be avoided within a specific element
Syntax: page-break-inside: auto | avoid

• auto: Default. Enables Automatic page-break
• avoid: Avoid inserting a page break inside the element

orphans

Definition: Sets the minimum number of lines that must be left at the bottom of a page or column
Syntax: orphans: integer

• integer: Defines the minimum number of lines required at the bottom of a page or column. Negative values are not accepted

snippets include

selector { property - value }

sidebar attributes snippets

#sidebar { position: relative; float: left; width: 100px; color: blue; font-size: 40% border-left: solid 2px blue; }

font shorthand property to define all properties in one statement

#selector { font: italic bold 12px/30px georgia, serif; }

hover over/anchor snippets

a: active {color: red;}
a: link {color: yellow;}
a: visited {color: blue;}
a: hover {color: green;}

background color snipper

#selector { background: #e3eae2 }

multi-border using a psuedo shadowbox snippet

box-shadow: [inset][horizontal offset][vertical offset][blur radius][optional spread radius[color]

creative page layout snippet

.columns { column-count:5; column-gap: 20px; }

text align snippet

ta_l { text-align: left; }

font weight snippet

bold { font-weight: bold; }

snippet to align text with display and margin property

center { text-align: center: margin: auto; display: block; }

text decoration snippet

no_td: hover { text-decoration: none }

clear and float snippet

clear { float: none; clear: both; }

font

Definition: It is a shorthand property for font-style, font-variant, font-weight, font-size/line-height, font-family
Syntax: font: font-style | font-variant | font-weight | font-size/line-height | font-family | caption | icon | menu | message-box | small-caption | status-bar

• font-style: Sets the font style. The default value is "normal"
• font-variant: Sets the font variant. The default value is "normal"
• font-weight: Sets the font weight. The default value is "normal"
• font-size/line-height: Sets the font size and the line-height. The default value is "normal"
• font-family: Sets the font family. The default value depends on the browser
• caption: Uses the captioned controls' font (like buttons, drop-downs, etc.)
• icon: Uses the same font as the icon labels
• menu: Uses the same font as the dropdown menus
• message-box: Uses the same font as the dialog boxes
• small-caption:The caption font is smaller
• status-bar: Uses the same font as the status bar

font-size-adjust

Definition: When the initial font you choose is not available, you have more flexibility over the font size
Syntax: font-size-adjust: number | none

• number: Specifies the aspect value to be used
• none: The default value. There is no font size adjustment

font-family

Definition: The font for an element is specified
Syntax: font-family: family-name / generic-family

• family-name / generic-family: A prioritized list of font and or generic family names

font-style

Definition: Specifies a text's font style
Syntax: font-style: normal | italic | oblique

• normal: Displays a normal font style
• italic: Displays an italic font style
• oblique: Displays an oblique font style

font-variant

Definition: Defines whether a text should be shown in the small-caps font
Syntax: font-variant: normal | small-caps

• normal: Displays a normal font by the browser
• small-caps: Displays a small-caps font by the browser

font-size

Definition: Defines the size of a font
Syntax: font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | %

• medium: Specifies the medium font size. This is default
• xx-small: Specifies the font size to an xx-small
• x-small: Specifies the font size to an extra small
• small: Specifies the font size to a small
• large: Specifies the font size to a large
• x-large: Specifies the font size to an extra-large
• xx-large: Specifies the font-size to an xx-large
• smaller: Sets the font size to be smaller than the parent element
• larger: Sets the font size to be larger than the parent element
• length: Sets the font size to a fixed value in px, cm, etc
• %: Sets the font size to a percentage of the font size of the parent element

font-weight

Definition: Determines whether thick or thin text characters should be rendered
Syntax: font-weight: normal | bold | bolder | lighter | number | inherit

• medium: Specifies the medium font size. This is default
• normal: Sets characters that are normal
• bold: Sets thick characters
• small: Specifies the font size to a small
• bolder: Sets thicker characters
• lighter: Defines lighter characters
• 100, 200, 300, 400, 500, 600, 700, 800, 900: Defines characters varying from thin to thick. 400 is equivalent to normal, while 700 is equivalent to bold
• inherit: This property is inherited from its parent element

line-height

Definition: Determines the height of the line
Syntax: line-height: normal | number | length | initial | inherit

• normal: Height of a normal line
• number: A value that will be multiplied by the existing font size to determine the line
• length: A line of fixed height in px, pt, cm, etc
• inherit: This property is inherited from its parent element

list-style

Definition: Shorthand property for list-style-type, list-style-position, list-style-image
Syntax: list-style: list-style-type | list-style-position | list-style-image

• list-style-type: Defines the type of list-item marker. "disc" is the default value
• list-style-position: Sets where the list-item marker should be placed. The default value is "outdoor"
• list-style-image: Defines the kind of list-item marker. "none" is the default value

list-style-image

Definition: Replaces an image for the list-item marker
Syntax: list-style-image: none | url

• none: There will be no image visible. However, the list-style-type property specifies the type of list marker that will be displayed. This is the default
• url: The URL of the image to be used as a list-item marker

list-style-type

Definition: Replaces an image for the list-item marker
Syntax: list-style-type: value

• armenian: Traditional Armenian numbering is used for the marking
• circle: A circle works as the marker
• cjk-ideographic: The marker consists of simple ideographic numbers.
• decimal: A number functions as the marker
• decimal-leading-zero: A number with leading zeros is used as the marker like 01, 02, 03, and so on
• georgian: The numbering on the marker is traditional Georgian.
• hebrew: The numbering on the marker is traditional Hebrew
• hiragana: The numbering on the marker is traditional Hiragana
• hiragana-iroha: The numbering on the marker is traditional Hiragana iroha
• katakana: The numbering on the marker is traditional Katakana
• katakana-iroha: The numbering on the marker is traditional Katakana iroha
• lower-alpha: The marker shows a lowercase letter (like a, b, c, d, e)
• lower-greek: The marker shows a lowercase classical greek
• lower-latin: The marker shows a lowercase-latin (like a, b, c, d, e)
• lower-roman: The marker shows a lower-roman (like i, ii, iii, iv, v)
• none: No marker is displayed
• square: The marker functions as a square
• upper-alpha: The marker shows an upper-alpha (like A, B, C, D, E)
• upper-greek: The marker shows an upper-greek
• upper-latin: The marker shows an upper-latin (like A, B, C, D, E)
• upper-roman: The marker shows an upper-roman (like I, II, III, IV, V)

animation

Definition: Replaces an image for the list-item marker
Syntax: animation: name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

• animation-name: Specifies the name of the keyframe to be bound to the selector
• animation-duration: Defines how many seconds or milliseconds it takes for an animation to complete
• animation-timing-function: Defines the animation's speed curve
• animation-delay: Specifies the amount of time before the animation begins
• animation-iteration-count: The number of times an animation should be played
• animation-direction: Defines if the animation should be played reverse on alternate cycles
• animation-fill-mode: Specifies which values are used by the animation while it is not running
• animation-play-state: Determines whether the animation is active or halted

animation-name

Definition: Provides the @keyframes animation a name
Syntax: animation-name: keyframename | none

• keyframename: Specifies the name of the keyframe to which the selector should be bound
• none: No animation will take place. This is the default

animation-duration

Definition: Specifies how long it should take an animation to complete one cycle
Syntax: animation-duration: time

• time: Defines how many seconds or milliseconds it takes for an animation to complete

animation-timing-function

Definition: Defines the animation’s speed curve
Syntax: animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier

• linear: From start to end, the animation moves at the same speed
• ease: The default value. The animation begins slowly, then fast, and finally slowly    
• ease-in: The animation begins slowly
• ease-out: The animation ends slowly
• ease-in-out: The animation has a slow start and end
• step-start: Equivalent to steps(1, start)
• cubic-bezier(n,n,n,n): This Lets you specify values in the cubic-bezier function
• (from 0 to 1)

animation-timing-function

Definition: Defines the animation’s speed curve
Syntax: animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier

• linear: From start to end, the animation moves at the same speed
• ease: The default value. The animation begins slowly, then fast, and finally slowly    
• ease-in: The animation begins slowly
• ease-out: The animation ends slowly
• ease-in-out: The animation has a slow start and end
• step-start: Equivalent to steps(1, start)
• cubic-bezier(n,n,n,n): This Lets you specify values in the cubic-bezier function
• (from 0 to 1)

animation-delay

Definition: Provides a delay for the animation's onset
Syntax: animation-delay: time

• time: Defines how many seconds (s) or milliseconds (ms) to wait before the animation begins

animation-iteration-count

Definition: Specifies how many times an animation should be repeated
Syntax: animation-iteration-count: number

• number: Specifies the number of times an animation should be played

animation-direction

Definition: Determines whether an animation should be rendered forward, backward, or periodically
Syntax: animation-direction: normal

• normal: The animation is being played normally or forwards.The default value

animation-play-state

Definition: Defines whether animation is in running or paused state
Syntax: animation-play-state: paused | running

• paused: Specifies that the animation has been paused
• running: Specifies that the animation has been running

bottom

Definition: Modifies a positioned element's vertical position. This property has no effect on items that are not positioned
Syntax: bottom: auto | length | %

• auto: Allows the browser to compute the position of the bottom edge. This is the default
• length: Specifies the bottom edge position in px, cm, and so on. Negative values are accepted
• %: Defines the position of the bottom edge in the percentage of the contained element. Negative values are accepted

top

Definition: Modifies a positioned element's vertical position. This property has no effect on items that are not positioned
Syntax: top: auto | length | %

• auto: Allows the browser to compute the position of the top edge. This is the default
• length: Specifies the top edge position in px, cm, and so on. Negative values are accepted
• %: Defines the position of the top edge in the percentage of the contained element. Negative values are accepted

right

Definition: Modifies a positioned element's horizontal position This property has no effect on elements that are not positioned
Syntax: right: auto | length | %

• auto: Allows the browser to compute the position of the right edge. This is the default
• length: Specifies the right edge position in px, cm, and so on. Negative values are accepted
• %: Defines the position of the right edge in the percentage of the contained element. Negative values are accepted

left

Definition: Modifies a positioned element's horizontal position This property has no effect on elements that are not positioned
Syntax: left: auto | length | %

• auto: Allows the browser to compute the position of the left edge. This is the default
• length: Specifies the left edge position in px, cm, and so on. Negative values are accepted
• %: Defines the position of the left edge in the percentage of the contained element. Negative values are accepted

clip

Definition: Allows you to define a rectangle to clip an element that is completely positioned
Syntax: clip: auto | shape

• auto: There will be no clipping. This is the default
• shape: An element is clipped. rect is the only accepted value (top, right, bottom, left)

position

Definition: Specifies the technique of positioning for an element (static, relative, absolute, fixed, or sticky)
Syntax: position: static | absolute | fixed | relative | sticky

• static: The default value. Elements are shown in the order of appearance in the document flow
• absolute: Elements are positioned relative to their first positioned (not static) parent elements
• fixed: The element is positioned in relation to the browser window
• relative: The element is positioned in accordance with its normal position.
• sticky: The element's position is determined by the user's scroll position

outline

Definition: It is a shorthand property for outline-width, outline-style, and outline-color
Syntax: outline: outline-width | outline-style | outline-color

• outline-width: Defines the outline’s width
• outline-style: Defines the outline’s style
• outline-color: Defines the outline’s color

outline-offset

Definition: Creates space between an element's shape and its edge or border
Syntax: outline-offset: length

• length: The distance between the outline and the border edge. The default value is 0

outline-style

Definition: Defines the style of an outline
Syntax: outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

• none: No outline is defined. This is default
• hidden: Sets the hidden outline
• dotted: Sets the dotted outline
• dashed: Sets the dashed outline
• solid: Sets the solid outline
• double: Sets the double outline
• groove: Sets the grooved outline in 3D
• ridge: Sets the rigid outline in 3D
• inset: Sets the inset outline in 3D
• outset: Sets the outset outline in 3D

outline-width

Definition: Defines the width of an outline
Syntax: outline-width: medium | thin | thick | length

• medium: Sets the medium outline.
• thin: Sets the thin outline
• thick: Sets the thick outline
• length: Sets the thickness of the outline

box-sizing

Definition: Specifies how an element's width and height are calculated. Whether padding and borders are included or not
Syntax: box-sizing: content-box | border-box

• content-box: Only the content is included in the width and height properties. Padding and borders are not included. This is the default
• border-box: Content, padding, and a border are all part of the width and height properties

border-collapse

Definition: Determines whether table borders should be combined into a single border or divided as in standard HTML
Syntax: border-collapse: separate | collapse

• separate: Borders are segregated; each cell will have its own set of borders. This is the default
• collapse: When applicable, borders are merged into a single border

empty-cells

Definition: Sets whether empty cells in a table should have borders or not
Syntax: empty-cells: show | hide

• show: Show borders on empty cells. This is the default
• hide: Strip the borders from empty cells

border-spacing

Definition: Determines the distance between adjacent cell borders
Syntax: border-spacing: length

• length: Defines the distance between adjacent cell borders in px, cm, etc. Negative values are not allowed
  1. If just one value is entered, it determines both the horizontal and vertical spacing between cells
  2. If two values are given, the first determines horizontal spacing and the second determines vertical spacing

table-layout

Definition: Configure table cells, rows, and columns
Syntax: table-layout: auto | fixed

• auto: Browsers employ an algorithm for an automatic table layout. The width of the column is determined by the widest unbreakable content in the cells. The layout will be determined by the content
• fixed: Specifies a predefined table layout algorithm

caption-side

Definition: Defines where a table caption should be placed
Syntax: caption-side: top | bottom

• top: The caption is shown above the table. This is the default
• bottom: The caption is shown below the table

direction

Definition: Place the caption above the table. This is the default
Syntax: direction: ltr | rtl

• ltr: The text direction is from left to right. This is the default
• rtl: The text direction is from right to left

hanging-punctuation

Definition: Determines whether a punctuation mark may be inserted outside the line box at the beginning or end of a whole line of text
Syntax: hanging-punctuation: none | first | last | allow-end | force-end

• none: There may not be a punctuation mark placed outside the line box either at the beginning or end of a full line of text
• first: Punctuation may extend beyond the first line's start edge
• last: Punctuation may extend beyond the first line's end edge
• allow-end: Punctuation may extend outside the end edge of all lines if it does not otherwise fit prior to justification
• force-end: Punctuation may extend outside the end edge of all lines. If justification is enabled on this line, the punctuation will hang

letter-spacing

Definition: Changes the amount of space between characters in a text
Syntax: letter-spacing: normal | length

• normal: Default. Defines a standard space between characters
• length: Defines the length of the space between characters

unicode-bidi

Definition: Used in conjunction with the direction property to specify or return whether the text should be overridden in order to accommodate several languages in the same document
Syntax: unicode-bidi: normal | embed | bidi-override

• normal: Default. The element does not allow for a further level of embedding.
• embed: This value allows for an additional level of embedding for inline elements.
• bidi-override: This results in an override for inline elements. For block elements, it provides an override for inline-level descendants that are not included within another block element.

white-space

Definition: Describes how white space within an element should be addressed
Syntax: white-space: normal | nowrap | pre | pre-line | pre-wrap

• normal: Whitespace sequences will be combined into a single whitespace. When required, the text will be wrapped. It is the default
• nowrap: Whitespace sequences will be merged into a single whitespace. The text will never be wrapped to the next line. The text remains on the same line until it encounters a <br> tag
• pre: The browser preserves whitespace. Only line breaks will cause text to wrap. In HTML, this is equivalent to the <pre> tag
• pre-line: Whitespace sequences will be merged into a single whitespace. Text will wrap as needed, and line breaks will be ignored
• pre-wrap: The browser preserves whitespace. Text will wrap as required, and line breaks will be ignored

white-space

Definition: Describes how white space within an element should be addressed
Syntax: white-space: normal | nowrap | pre | pre-line | pre-wrap

• normal: Whitespace sequences will be combined into a single whitespace. When required, the text will be wrapped. It is the default
• nowrap: Whitespace sequences will be merged into a single whitespace. The text will never be wrapped to the next line. The text remains on the same line until it encounters a <br> tag
• pre: The browser preserves whitespace. Only line breaks will cause text to wrap. In HTML, this is equivalent to the <pre> tag
• pre-line: Whitespace sequences will be merged into a single whitespace. Text will wrap as needed, and line breaks will be ignored
• pre-wrap: The browser preserves whitespace. Text will wrap as required, and line breaks will be ignored

text-indent

Definition: The indentation of the first line of a text block is specified
Syntax: text-indent: length | %

• length: Specifies a uniform indentation in px, pt, cm, em. Default value is 0
• %: Defines the indentation as a percentage of the parent element's width

text-justify

Definition: When text-align is set to "justify," this property determines the text's justification technique
Syntax: text-justify: auto | inter-word | inter-character | none

• auto: The justification algorithm is determined by the browser
• inter-word: Changes the amount of spacing between words
• inter-character: Changes the amount of spacing between characters
• none: Methods of justification are disabled

text-shadow

Definition: Add a shadow to a text
Syntax: text-shadow: h-shadow | v-shadow | blur-radius | color |none

• h-shadow: The horizontal shadow's position
• v-shadow: The vertical shadow's position
• blur-radius: Defines a blur radius
• color: Specifies the color of the shadow
• none: No shadow

text-align

Definition: Determines how the text in an element should be aligned horizontally
Syntax: text-align: left | right |center | justify

• left: Text is aligned to the left
• right: Text is aligned to the right
• center: Text is aligned to the center
• justify: Stretches the lines so that they are all the same width

text-align-last

Definition: Defines how to align a text's last line
Syntax: text-align-last: auto | left | right | center | justify | start | end

• auto: Default. Justifies the last and aligned it to the left
• left: The last line is left aligned
• right: The last line is right-aligned
• center: The last line is center aligned
• justify: Justifies the last line as the remaining lines
• start: Aligns the last line at the start of the line
• end: Aligns the last line at the end of the line

text-decoration

Definition: Defines the decoration given to the text
Syntax: text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness

• text-decoration-line: Specifies the type of text-decoration to be used like underline, overline, line-through
• text-decoration-color: Specifies the color of the text-decoration
• text-decoration-style: Specifies the style of the text-decoration
• text-decoration-thickness: Specifies the thickness of the decoration line

word-break

Definition: Specifies how words will break when they reach the end of a line
Syntax: word-break: normal | break-all | keep-all | break-word

• normal: The default value. The default line break rules are used.
• break-all: To avoid overflow, the word can be broken at any character.
• keep-all: Specifies the style of the text-decoration.
• break-word: For Chinese/Japanese/Korean (CJK) text, no word breaks are used. The behavior of non-CJK text is the same as the value "normal."

word-wrap

Definition: Enable large words to be broken and wrapped to the next line
Syntax: word-wrap: normal | break-word

• normal: The default value. The default line break rules are used
• break-word: Let's break the unbreakable words

text-transform

Definition: Handle the text capitalization
Syntax: text-transform: none | capitalize | uppercase | lowercase

• none: The default value. There is no capitalization
• capitalize: Each word's first character is transformed to uppercase
• uppercase: All characters are transformed to uppercase
• lowercase: All characters are transformed to lowercase

word-spacing

Definition: Increases or decreases the amount of white space between words
Syntax: word-spacing: normal | length

• normal: The default value. Adds normal space between words
• length: Specifies an extra space between words in px, pt, cm, em

transition

Definition: Shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay
Syntax: transition: transition-property | transition-duration | transition- timing-function | transition-delay

• transition-property: The name of the CSS property for which the transition effect is specified
• transition-duration: Specifies how many seconds or milliseconds it takes for the transition effect to perform
• transition- timing-function: Specifies the transition effect's speed curve
• transition-delay: When the transition effect will begin is specified

transition-delay

Definition: When the transition effect will begin is specified
Syntax: transition-delay: time

• time: Defines the start time of the transition effect

transition-timing-function

Definition: Specifies the transition effect's speed curve
Syntax: transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)

• ease: Default value. Specifies a transition effect with a slow start, then quick, and finally a slow end
• linear: Defines a transition effect that moves at the same pace from beginning to end
• ease-in: This property specifies a transition effect with a slow start
• ease-out: This property specifies a transition effect with a slow end
• ease-in-out: A transition effect with a slow start and end is specified
• step-start: Equal to steps(1, start)
• step-end: Equal to steps(1, end)
• steps(int, start|end): Specifies a stepping function with two arguments. The first argument sets the number of intervals in the function. It must be a positive integer (greater than 0). The second argument, which is optional, has the value "start" or "end" and defines the point at which the values change inside the interval. If the second argument is not specified, the value "end" is used.
• cubic-bezier(n,n,n,n): In the cubic-bezier function, you may define your own values. Numeric values ranging from 0 to 1 are possible

transition-duration

Definition: Defines the number of seconds (s) or milliseconds (ms) it takes for a transition effect to finish
Syntax: transition-duration: time

• time: Specifies how many seconds or milliseconds it takes for a transition effect to finish. The default value is 0s, which means there will be no effects

transition-property

Definition: Defines the number of seconds (s) or milliseconds (ms) it takes for a transition effect to finish
Syntax: transition-property: none | all | property

• none: No transition effect on the property
• all: Default. The transition effect is applied to all properties
• property: Defines a comma-separated list of CSS property names for which the transition effect is intended

cursor

Definition: When pointing over an element, this property defines the mouse cursor that will be shown
Syntax: cursor: value

• alias: The cursor indicates that alias for something is about to be generated
• all-scroll: The pointer shows that something can be scrolled in any direction  
• auto: Default. The browser places a cursor 
• cell: The cursor shows that a cell (or group of cells) can be chosen    
• context-menu: The cursor indicates the availability of the context menu   
• col-resize: The cursor shows that the column can be horizontally resized    
• copy: The cursor indicates to copy something    
• crosshair: The cursor displays as a crosshair    
• default: A default cursor    
• e-resize: Denotes that a box's right edge should be moved    
• ew-resize: Represents a bidirectional resize cursor   
• grab: Cursor denotes grabbing something
• grabbing: The cursor denotes that something is ready to be grabbed    
• help: The cursor implies that help is possible    
• move: The cursor indicates to move something    
• n-resize: The cursor indicates that a box's edge is to be moved up
• ne-resize: The cursor indicates that one edge of a box should be moved up and to the right
• nesw-resize: Denotes a bidirectional resize cursor    
• ns-resize: Denotes a bidirectional resize cursor    
• nw-resize: The cursor indicates that a box's edge should be moved up and left. (north/west)    
• nwse-resize: Denotes a bidirectional resize cursor    
• no-drop: The cursor indicates that the moved item cannot be dropped in this location   
• none: There is no cursor for the element
• not-allowed: The cursor shows that the desired action will not be carried out
• pointer: The cursor would be a pointer that represents a link    
• progress: The cursor shows that the application is in use    
• row-resize: The cursor shows that the row can be vertically resized    
• s-resize: The cursor shows that the box's edge should be moved down. (south)    
• se-resize: The cursor shows that the box's edge should be moved down and right (south/east)    
• sw-resize: The cursor shows that the box's edge should be moved down and left (south/west)    
• text: The cursor indicates text that can be selected    
• URL: A set of URLs to custom cursors separated by commas
• w-resize: The cursor shows that the box's edge should be moved left (west)    
• wait: The cursor shows that the application is in use
• zoom-in: The cursor shows that something can be zoomed in on
• zoom-out: The cursor shows that something can be zoomed out on