CSS Cheat Sheet Tutorial: A Practical Guide

OVERVIEW

CSS, or Cascading Style Sheets, is an integral part of modern web design. It enhances the aesthetics of a website or web app by fine-tuning the layout to provide a flawless browsing experience. CSS standards have evolved quickly to meet the demands of modern design. However, web designers and developers often find it hard to recall everything and keep up with changes.

Whether you're developing a website or preparing for an interview for web development, you might want to brush up on CSS properties.

This CSS Cheat Sheet tutorial keeps you up-to-date on the latest developments while polishing your CSS skills.

BACKGROUNDS

The background property defines the background style properties like color, image, position, origin, size, and repeat method.

background-image

Definition: Sets one or more background images for an element
Syntax: background-image: url | none

  • url: The image URL
  • none: No background image
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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.
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 4.0, 1.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.6 -moz- | Safari 4.1, 3.0 -webkit- | Opera 10.5, 10.0 -o-

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 9.0 | Firefox 4.0 | Safari 3.0 | Opera 10.5

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
Browser Compatibility: Chrome 4.0 | Edge 9.0 | Firefox 4.0 | Safari 3.0 | Opera 10.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

BORDERS

The border property specifies the border of an element like border-width, border-style, and border-color.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

border-color

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

  • color: Defines the border color
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 5.5 | Firefox 1.0 | Safari 1.0 | Opera 9.2

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

border-top-color

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

  • color: Defines the border color
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 10.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.5 -moz- | Safari 5.1, 3.1 -webkit- | Opera 10.5

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.2 | Opera 4.0

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 16.0, 4.0 -webkit- | Edge 11.0 | Firefox 15.0, 3.5 -moz- | Safari 6.0, 3.1 -webkit- | Opera 15, 11.0 -o-

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 5.5 | Firefox 1.0 | Safari 1.0 | Opera 9.2

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 5.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.0 -moz- | Safari 5.0, 3.1 -webkit- | Opera 10.5

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
Browser Compatibility: Chrome 5.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.0 -moz- | Safari 5.0, 3.1 -webkit- | Opera 10.5

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
Browser Compatibility: Chrome 5.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.0 -moz- | Safari 5.0, 3.1 -webkit- | Opera 10.5

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
Browser Compatibility: Chrome 5.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.0 -moz- | Safari 5.0, 3.1 -webkit- | Opera 10.5

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
Browser Compatibility: Chrome 5.0, 4.0 -webkit- | Edge 9.0 | Firefox 4.0, 3.0 -moz- | Safari 5.0, 3.1 -webkit- | Opera 10.5

BOX MODEL

The CSS box model is used for design and layout purpose. It consists of a box that wraps around each HTML element and made up of the following elements: margins, borders, padding, and content.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 7.0 | Firefox 1.0 | Safari 2.0.2 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 7.0 | Firefox 1.0 | Safari 2.0.2 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 7.0 | Firefox 1.0 | Safari 2.0.2 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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.
Browser Compatibility: Chrome 4.0 | Edge 8.0 | Firefox 3.0 | Safari 3.1 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 4.0 | Edge 9.0, 8.0 -ms- | Firefox 3,5 | Safari 3.0 | Opera 9.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 4.0

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 6.0

3D/2D TRANSFORM

CSS Transforms in 2D allows elements to be rendered in two dimensions, whereas CSS 3D Transforms allows elements to be rendered in three dimensions.

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
Browser Compatibility: Chrome 36.0, 12.0 -webkit- | Edge 10.0 | Firefox 16.0, 10.0 -moz- | Safari 4.0, -webkit- | Opera 23.0, 15.0 -webkit-

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
Browser Compatibility: Chrome 36.0, 12.0 -webkit- | Edge 10.0 | Firefox 16.0, 10.0 -moz- | Safari 4.0, -webkit- | Opera 23.0, 15.0 -webkit-

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 | %
Browser Compatibility: Chrome 36.0, 12.0 -webkit- | Edge 11.0 | Firefox 16.0, 10.0 -moz- | Safari 9.0, 4.0.3 -webkit- | Opera 23.0, 15.0 -webkit-

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
Browser Compatibility For 2D Transform: Chrome 36.0, 12.0 -webkit- | Edge 10.0 9.0 -ms- | Firefox 16.0, 10.0 -moz- | Safari 9.0, 4.0.3 -webkit- | Opera 23.0, 15.0 -webkit- 10.5 -o-Browser Compatibility For 3D Transform: Chrome 36.0, 12.0 -webkit- | Edge 12.0 | Firefox 10.0 | Safari 9.0, 4.0 -webkit- | Opera 23.0, 15.0 -webkit-

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
Browser Compatibility For Two-Value Syntax: Chrome 36.0, 12.0 -webkit- | Edge 11.0 | Firefox 16.0, 10.0 -moz- | Safari 9.0, 4.0.3 -webkit- | Opera 23.0, 15.0 -webkit-Browser Compatibility For Three-Value Syntax: Chrome 36.0, 12.0 -webkit- | Edge 10.0 | Firefox 16.0, 10.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 23.0, 15.0 -webkit-

COLUMN

The CSS column property specifies the number of columns to use when rendering the contents of an element, and the widths of those columns.

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
Browser Compatibility: Chrome 50.0, 4.0 -webkit- | Edge 10.0 | Firefox 52.0, 2.0 -moz- | Safari 9.0, 3.1 -webkit- | Opera 37.0, 15.0 -webkit-, 11.0

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
Browser Compatibility: Chrome 50.0 | Edge 10.0 | Firefox 52.0, 13.0 -moz- | Safari 10.0, 7.0 -webkit- | Opera 37.0

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
Browser Compatibility For column-gap (in multiple columns): Chrome 50.0 | Edge 10.0 | Firefox 52.0 | Safari 10.0 | Opera 37.0Browser Compatibility For column-gap (in grid): Chrome 66.0 | Edge 16.0 | Firefox 61.0 | Safari 12.0 | Opera 53.0Browser Compatibility For column-gap (in flexbox): Chrome 84.0 | Edge 84.0 | Firefox 63.0 | Safari 14.1 | Opera 70.0

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
Browser Compatibility: Chrome 50.0, 4.0 -webkit- | Edge 10.0 | Firefox 52.0, 2.0 -moz- | Safari 9.0 3.1 -webkit- | Opera 37.0, 15.0 -webkit, 11.0

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.
Browser Compatibility: Chrome 50.0, 4.0 -webkit- | Edge 10.0 | Firefox 71.0 | Safari 9.0 3.1 -webkit- | Opera 37.0, 15.0 -webkit, 11.1

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
Browser Compatibility: Chrome 50.0, 4.0 -webkit- | Edge 10.0 | Firefox 52.0 2.0 -moz- | Safari 9.0 3.1 -webkit- | Opera 37.0, 15.0 -webkit, 11.1

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
Browser Compatibility: Chrome 50.0, 4.0 -webkit- | Edge 10.0 | Firefox 52.0 2.0 -moz- | Safari 9.0 3.1 -webkit- | Opera 37.0, 15.0 -webkit, 11.1

COLORS

The CSS color property specifies the color of the text.

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
Browser Compatibility: Chrome 1.0 | Edge 3.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 4.0 | Edge 9.0 | Firefox 2.0 | Safari 3.1 | Opera 9.0

GRID POSITIONING

CSS Grid splits a page into significant sections or defines the relationship between parts of an HTML primitive control in size, position, and layer.

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
Browser Compatibility: Chrome 57.0 | Edge 16.0 | Firefox 52.0 | Safari 10 | Opera 44

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
Browser Compatibility: Chrome 57.0 | Edge 16.0 | Firefox 52.0 | Safari 10 | Opera 44

PAGED MEDIA

The CSS-paged media properties control how content is presented in print and other media that divide content into separate pages. It lets you customize page breaks, the printable area, the style of the left and right pages, and the break inside elements.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.2 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 19.0 | Safari 1.3 | Opera 7.0

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
Browser Compatibility: Chrome 25.0 | Edge 8.0 | Firefox Not Supported | Safari 3.1 | Opera 10.0

CSS SNIPPETS

CSS3 tools and interactive examples are available in the CSS snippet collection. It contains samples for handling user interactions, and also modern techniques for creating standard layouts, designing, and animating elements.

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

The font CSS shorthand property like font, font-family, font-size-adjust controls all of an element's font properties. It can also change the font of an element to a system font.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome Not Supported | Edge 4.0 | Firefox Not Supported | Safari Not Supported | Opera Not Supported

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 1.0 | Edge 5.5 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 2.0 | Edge 4.0 | Firefox 1.0 | Safari 1.3 | Opera 3.5

LINE BOX

A line box in CSS is a rectangular space that includes the boxes that make up a line. When a single line box can't contain all of the inline-level boxes horizontally, they're split amongst two or more vertically stacked line boxes. As a result, a paragraph is nothing more than a vertical stack of line boxes.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

LIST STYLE

In CSS, the list-style property is a shortcut for specifying all of the list style properties in one go.

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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)
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

ANIMATIONS

CSS Animations property animates transitions from one CSS style configuration to another. It is made up of two parts: a style that describes the CSS animation and a series of keyframes that identify the animation's start and end states, as well as potential intermediate checkpoints.

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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)
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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)
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

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
Browser Compatibility: Chrome 43.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 5.0 -moz- | Safari 9.0, 4.0 -webkit- | Opera 30.0, 15.0 -webkit-, 12.0 -o-

POSITIONING

The position of an element in a document is defined by the CSS position property. This attribute is used in conjunction with the left, right, top, bottom, and z-index properties to define an element's final position on a page.

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 6.0

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 6.0

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 5.0

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 5.0

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)
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 7.0 | Firefox 1.0 | Safari 1.0 | Opera 4.0

OUTLINE

An outline CSS property allows you to draw a line outside the border of an element. This method is used to set all the properties of the outline at once.

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.5 | Safari 1.2 | Opera 7.0

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
Browser Compatibility: Chrome 4.0 | Edge 15.0 | Firefox 3.5 | Safari 3.1 | Opera 10.5

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.5 | Safari 1.2 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.5 | Safari 1.2 | Opera 7.0

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
Browser Compatibility: Chrome 10.0, 4.0 -webkit- | Edge 8.0 | Firefox 29.0, 2.0 -moz- | Safari 1.2 | Opera 9.5

TABLE

A CSS table is used to apply different styling properties to HTML table elements in order to organise data in rows and columns in a more intricate and well-organized manner.

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
Browser Compatibility: Chrome 1.0 | Edge 5.0 | Firefox 1.0 | Safari 1.2 | Opera 4.0

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.0 | Safari 1.2 | Opera 4.0

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.0 | Safari 1.0 | Opera 4.0

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
Browser Compatibility: Chrome 14.0 | Edge 5.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 1.0 | Safari 1.0 | Opera 4.0

TEXT

The CSS Text property specifies methods to modify text, like line breaks, justification and alignment, handling white space, and text transformation.

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
Browser Compatibility: Chrome 2.0 | Edge 5.5 | Firefox 1.0 | Safari 1.3 | Opera 9.2

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
Browser Compatibility: Chrome Not supported | Edge Not supported | Firefox Not supported | Safari 10+ | Opera Not supported

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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.
Browser Compatibility: Chrome 2.0 | Edge 5.5 | Firefox 1.0 | Safari 1.3 | Opera 9.2

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 3.5 | Safari 3.0 | Opera 9.5

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
Browser Compatibility: Chrome 1.0 | Edge 8.0 | Firefox 3.5 | Safari 3.0 | Opera 9.5

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
Browser Compatibility: Chrome 1.0 | Edge 3.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome Supported * | Edge 11.0 | Firefox 55.0 | Safari 10.0.3 | Opera Supported *

* The Enable Experimental Web Platform Features preference must be set to Enabled to enable this feature. In Chrome, type "chrome://flags" to change preferences. In Opera, type "flags" to change preferences.

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
Browser Compatibility: Chrome 4.0 | Edge 10.0 | Firefox 3.5 | Safari 4.0 | Opera 9.6

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
Browser Compatibility: Chrome 1.0 | Edge 3.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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
Browser Compatibility: Chrome 47.0 | Edge 5.5 * | Firefox 49.0, 12.0 -moz- | Safari Not Supported | Opera 34.0

In IE 11, the ‘start’ and ‘end’ values are unsupported

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
Browser Compatibility: Chrome 1.0 | Edge 3.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

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."
Browser Compatibility: Chrome 4.0 | Edge 5.5 | Firefox 15.0 | Safari 3.1 | Opera 15.0

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
Browser Compatibility: Chrome 4.0 | Edge 5.5 | Firefox 15.0 | Safari 3.1 | Opera 10.5

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
Browser Compatibility: Chrome 1.0 | Edge 4.0 | Firefox 1.0 | Safari 1.0 | Opera 7.0

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
Browser Compatibility: Chrome 1.0 | Edge 6.0 | Firefox 1.0 | Safari 1.0 | Opera 3.5

TRANSITIONS

CSS transitions control the animation speed when CSS properties are changed. You can delay the effect of property changes on a property instead of having them take place immediately.

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
Browser Compatibility: Chrome 26.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 4.0 -moz- | Safari 6.1, 3.1 -webkit- | Opera 12.1, 10.5 -o-

transition-delay

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

  • time: Defines the start time of the transition effect
Browser Compatibility: Chrome 26.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 4.0 -moz- | Safari 6.1, 3.1 -webkit- | Opera 12.1, 10.5 -o-

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
Browser Compatibility: Chrome 26.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 4.0 -moz- | Safari 6.1, 3.1 -webkit- | Opera 12.1, 10.5 -o-

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
Browser Compatibility: Chrome 26.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 4.0 -moz- | Safari 6.1, 3.1 -webkit- | Opera 12.1, 10.5 -o-

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
Browser Compatibility: Chrome 26.0, 4.0 -webkit- | Edge 10.0 | Firefox 16.0, 4.0 -moz- | Safari 6.1, 3.1 -webkit- | Opera 12.1, 10.5 -o-


...

USER INTERFACE

By setting the user interface property, an element can be changed into any of the standard user interface elements.

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
Browser Compatibility: Chrome 4.0 | Edge 79.0 | Firefox 5.0, 4.0 -moz- | Safari 4.0 | Opera 15.0

Author's Profile

...

Salman Khan

Salman Khan works as an Assistant Marketing Manager at LambdaTest. He is a Computer Science Engineer by degree and an experienced tech writer who loves to share his thoughts about the latest tech trends.

Hubs: 05

  • Linkedin

Reviewer's Profile

...

Shahzeb Hoda

Shahzeb currently holds the position of Senior Product Marketing Manager at LambdaTest and brings a wealth of experience spanning over a decade in Quality Engineering, Security, and E-Learning domains. Over the course of his 3-year tenure at LambdaTest, he actively contributes to the review process of blogs, learning hubs, and product updates. With a Master's degree (M.Tech) in Computer Science and a seasoned expert in the technology domain, he possesses extensive knowledge spanning diverse areas of web development and software testing, including automation testing, DevOps, continuous testing, and beyond.

  • Twitter
  • Linkedin

Did you find this page helpful?

Helpful

NotHelpful