/

HTML / CSS / JavaScript Tutorial

CSS Properties

[this page | pdf | back links]

Set out below are different CSS properties (and rules):

 

Property

Description

More

Type

align-content

Modifies the behaviour of the flex-wrap property, aligning flex lines

Here

Flexible Container

align-items

Specifies the default alignment for items inside a flexible container

Here

Flexible Container

align-self

Specifies the alignment for selected item in a flexible container

Here

Flexible Container

all

Resets (almost) all properties to their initial or inherited values

Here

All

animation

A shorthand property combining (up to) 8 individual animation properties

Here

Animation

animation-delay

Specifies delay until start of animation

Here

Animation

animation-direction

Indicates direction of animation

Here

Animation

animation-duration

Indicates time an animation takes to play

Here

Animation

animation-fill-mode

Style element takes when the animation is not playing

Here

Animation

animation-iteration-count

Number of times an animation should play

Here

Animation

animation-name

Name of animation used in a @keyframes animation

Here

Animation

animation-play-state

Whether the animation is paused or not

Here

Animation

animation-timing-function

The speed curve of an animation

Here

Animation

backface-visibility

Whether element should remain visible when not facing the screen

Here

Transform

background

A shorthand property combining (up to) 8 background properties

Here

Background

background-attachment

Whether background image is fixed or scrolls with rest of page

Here

Background

background-blend-mode

The blending mode of each background layer

Here

Background

background-clip

Painting area of the background

Here

Background

background-color

Background colour of an element

Here

Background

background-image

One or more background images for element

Here

Background

background-origin

Where the background image for element is positioned

Here

Background

background-position

The (starting) position of a background image

Here

Background

background-repeat

How background image repeated

Here

Background

background-size

Size of background image(s)

Here

Background

border

A shorthand property combining (up to) 3 border properties

Here

Border

border-bottom

A shorthand property combining all main bottom border properties

Here

Border

border-bottom-color

Colour of bottom border of element

Here

Border

border-bottom-left-radius

Shape of the bottom-left corner of a border

Here

Border

border-bottom-right-radius

Shape of the bottom-right corner of a border

Here

Border

border-bottom-style

Style of bottom border of element

Here

Border

border-bottom-width

Width of bottom border of element

Here

Border

border-collapse

Whether table borders are collapsed

Here

Table

border-color

The colour of an element’s four borders

Here

Border

border-image

A shorthand property combining (up to) 5 border-image properties

Here

Border

border-image-outset

Amount by which a border image area extends beyond the border box

Here

Border

border-image-repeat

How border image should be repeated, rounded or stretched

Here

Border

border-image-slice

How any border image should be sliced

Here

Border

border-image-source

Path of image to be used as a border

Here

Border

border-image-width

Width of border image

Here

Border

border-left

A shorthand property combining all main left border properties

Here

Border

border-left-color

Colour of left border of element

Here

Border

border-left-style

Style of left border of element

Here

Border

border-left-width

Width of left border of element

Here

Border

border-radius

Adds rounded corners to element

Here

Border

border-right

A shorthand property combining all main right border properties

Here

Border

border-right-color

Colour of right border of element

Here

Border

border-right-style

Style of right border of element

Here

Border

border-right-width

Width of right border of element

Here

Border

border-spacing

Distance between borders of adjacent cells (if border-collapse property is separate )

Here

Table

border-style

Style of an element’s four borders

Here

Border

border-top

A shorthand property combining all main top border properties

Here

Border

border-top-color

Colour of top border of element

Here

Border

border-top-left-radius

Shape of the top -left corner of a border

Here

Border

border-top-right-radius

Shape of the top -right corner of a border

Here

Border

border-top-style

Style of top border of element

Here

Border

border-top-width

Width of top border of element

Here

Border

border-width

Width of an element’s four borders

Here

Border

bottom

Bottom edge of element relative to the corresponding edge of nearest positioned ancestor

Here

Box

box-shadow

Applies one or more shadows to element

Here

Border

box-sizing

What box sizing (height, width) should be applied to

Here

User Interface

caption-side

Where a table caption should be placed

Here

Table

clear

Which sides a floating element is not allowed to float

Here

Box

clip

What to do with an image that is larger than its containing element

Here

Box

color

Colour of text within an element

Here

Colour

column-count

Number of columns element should be divided into

Here

Column Layout

column-fill

How to fill columns

Here

Column Layout

column-gap

What gap to place between columns

Here

Column Layout

column-rule

A shorthand property combining (up to) 3 column-rule properties

Here

Column Layout

column-rule-color

Colour of any rule between columns

Here

Column Layout

column-rule-style

Style of any rule between columns

Here

Column Layout

column-rule-width

Width of any rule between columns

Here

Column Layout

column-span

How many columns an element should span across

Here

Column Layout

column-width

Suggested optimal width for columns

Here

Column Layout

columns

A shorthand property for setting certain column properties

Here

Column Layout

content

Pseudo-property used with the :before and :after pseudo-elements to insert generated content

Here

User Interface

counter-increment

Pseudo-property that increments one or more CSS counter values

Here

Counters

counter-reset

Pseudo-property that creates or resets one or more CSS counter values

Here

Counters

cursor

Type of cursor to be displayed

Here

User Interface

direction

Text or writing direction

Here

Text

display

Type of box to be used for element

Here

Box

empty-cells

Whether to display borders and background for empty table cells

Here

Table

filter

Applies visual effects like grayscale, blur and saturation

Here

Images

flex

A shorthand property for setting certain flex properties

Here

Flexible Container

flex-basis

Initial length of a flexible element

Here

Flexible Container

flex-direction

Direction of a flexible element

Here

Flexible Container

flex-flow

A shorthand property for setting certain flex properties

Here

Flexible Container

flex-grow

How much an element will grow relative to other flexible items in a container

Here

Flexible Container

flex-shrink

How much an element will shrink relative other flexible items in a container

Here

Flexible Container

flex-wrap

Whether flexible items should wrap

Here

Flexible Container

float

Whether element should float

Here

Box

font

A shorthand property for setting font properties

Here

Font

@font-face

A rule allowing designers to apply their own font

Here

Font, Rules

font-family

Font to be used

Here

Font

font-size

Size of font to be used

Here

Font

font-size-adjust

Refined sizing of font to be used

Here

Font

font-stretch

Makes text in an element narrower or more stretched out than usual

Here

Font

font-style

Font style to be used

Here

Font

font-variant

Whether text should be in small-caps font

Here

Font

font-weight

How thick or thin (i.e. bold or not) characters should be

Here

Font

hanging-punctuation

Whether a punctuation mark can be placed outside box at start or end of full line of text

Here

Text

height

Height of an element (excluding padding, borders and margins)

Here

Box

justify-content

How to align a flexible container’s items when the items do not use all available space along the horizontal axis

Here

Flexible Container

@keyframes

A rule allowing designers to specify animations

Here

Animation, Rules

left

Left edge of element relative to the corresponding edge of nearest positioned ancestor

Here

Box

letter-spacing

Amount of space between consecutive text characters

Here

Text

line-height

Height of lines of text

Here

Text

list-style

A shorthand property combining up to 3 list properties

Here

List

list-style-image

image to use as the list-item marker

Here

List

list-style-position

Whether a list marker is inside or outside the relevant content container

Here

List

list-style-type

Type of list-item marker

Here

List

margin

A shorthand property combining all four margin properties

Here

Margin

margin-bottom

Width of bottom margin of element

Here

Margin

margin-left

Width of left margin of element

Here

Margin

margin-right

Width of right margin of element

Here

Margin

margin-top

Width of top margin of element

Here

Margin

max-height

Maximum height element can become

Here

Box

max-width

Maximum width element can become

Here

Box

@media

A rule allowing designers to apply different styles for different devices and/or media types

Here

Rule

min-height

Minimum height element can become

Here

Box

min-width

Minimum width element can become

Here

Box

nav-down

Where to navigate with down arrow key

Here

User Interface

nav-index

The sequential navigation order (i.e. the ‘tabbing order’) for an element

Here

User Interface

nav-left

Where to navigate with left arrow key

Here

User Interface

nav-right

Where to navigate with right arrow key

Here

User Interface

nav-up

Where to navigate with up arrow key

Here

User Interface

opacity

Degree of opacity (transparency)

Here

Colour

order

Order of a flexible item relative to other flexible items inside the same container

Here

Flexible Container

orphans

Minimum number of lines of a paragraph in a paged media that can be left on an old page

Here

Paged media

outline

A shorthand property combining (up to) 3 outline properties

Here

User Interface

outline-color

Colour of outline

Here

User Interface

outline-offset

amount of space between an element’s outline and edge or border of element

Here

User Interface

outline-style

Style to outline

Here

User Interface

outline-width

Width to outline

Here

User Interface

overflow

What happens when content overflows an element’s box

Here

Box

overflow-x

What to with left/right edges of content overflowing an element’s box

Here

Box

overflow-y

What to with top/bottom edges of content overflowing an element’s box

Here

Box

padding

A shorthand property combining the 4 padding sub-properties

Here

Padding

padding-bottom

Width of the bottom padding

Here

Padding

padding-left

Width of the left padding

Here

Padding

padding-right

Width of the right padding

Here

Padding

padding-top

Width of the top padding

Here

Padding

page-break-after

Whether a page break should occur after element

Here

Page Media

page-break-before

Whether a page break should occur before element

Here

Page Media

page-break-inside

Whether a page break allowed inside element

Here

Page Media

perspective

How far 3D element is notionally placed behind the screen

Here

Transform

perspective-origin

Where 3D element is notionally placed

Here

Transform

position

How element should be positioned

Here

Box

quotes

How quotation marks should be rendered

Here

Text

resize

Whether element can be resized by user

Here

User Interface

right

Right edge of element relative to the corresponding edge of nearest positioned ancestor

Here

Box

tab-size

Size of space used for tab character

Here

 

table-layout

Algorithm used to define table layout

Here

Table

text-align

How text in element should be aligned

Here

Text

text-align-last

How last line of text in element should be aligned

Here

Text

text-decoration

The ‘decoration’ (e.g. underlining) added to text

Here

Text Decoration

text-decoration-color

Colour of text decoration added to text

Here

Text Decoration

text-decoration-line

Line type of text decoration added to text

Here

Text Decoration

text-decoration-style

Line style of text decoration added to text

Here

Text Decoration

text-indent

Indentation applied to first line of text

Here

Text

text-justify

Type of justification applied to first line of text (if applicable)

Here

Text

text-overflow

How text that has overflowed is to be rendered by browser

Here

Text, User Interface

text-shadow

What shadow should be added to text

Here

Text Decoration

text-transform

Capitalisation to use for text

Here

Text

top

Top edge of element relative to the corresponding edge of nearest positioned ancestor

Here

Box

transform

Applies 2D or 3D transformation

Here

Transform

transform-origin

Origin used by the transform property

Here

Transform

transform-style

How nested elements are to be rendered for 3D purposes when using the transform property

Here

Transform

transition

A shorthand property combining the 4 transition sub-properties

Here

Transitions

transition-delay

When transition should start

Here

Transitions

transition-duration

How long transition will take to complete

Here

Transitions

transition-property

Properties that change as part of a transition effect

Here

Transitions

transition-timing-function

Speed curve used for a transition effect

Here

Transitions

unicode-bidi

Whether text direction should be overridden to support multiple languages

Here

Text

user-select

Whether text of element can be selected

Here

Text

vertical-align

Vertical alignment of element

Here

Box

visibility

Whether element is visible

Here

Box

white-space

How white-space inside element is handled

Here

Text

widows

Minimum number of lines of a paragraph in a paged media that can fall to a new page

Here

Paged media

width

Width of an element (excluding padding, borders and margins)

Here

Basic

word-break

Way in which words can be broken at line ends for non-CJK scripts

Here

Text

word-spacing

Amount of whitespace between words

Here

Text

word-wrap

Whether long words can be broken at line ends and wrap onto the next line

Here

Text

z-index

Stack order of an element, i.e. whether it is “in front of” other elements, and hence is visible if several would otherwise appear in the same place

Here

Box

 

At the time of writing there were also some other CSS properties and rules being developed by some organisations including:

 

-        box-decoration-break

-        break-after

-        break-before

-        break-inside

-        @font-feature-values

-        font-feature-settings

-        font-kerning

-        font-language-override

-        font synthesis

-        font-variant-alternatives

-        font-variant-caps

-        font-variant-east-asian

-        font-variant-ligatures

-        font-variant-numeric

-        font-variant-position

-        hyphens

-        icon (is not currently supported by many major browsers)

-        image-orientation

-        image-rendering

-        image-resolution

-        ime-mode

-        line-break

-        mark

-        mark-after

-        mark-before

-        marks

-        marquee-direction

-        marquee-play-count

-        marquee-speed

-        marquee-style

-        mask

-        mask-type

-        object-fit

-        object-position

-        orphans

-        overflow-wrap

-        phonemes

-        rest

-        rest-after

-        rest-before

-        text-combine-upright

-        text-orientation

-        text-underline-position

-        voice-balance

-        voice-duration

-        voice-pitch

-        voice-pitch-range

-        voice-rate

-        voice-stress

-        voice-volume

-        widows

-        writing-mode

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile