• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Memento of CSS properties

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

This page provides a non-exhaustive list of the CSS properties available in CSS3. Although, for the most part, we've seen these properties during the course, there are a few new ones that we haven't addressed.

The list is not exhaustive as my aim is not to draw up a list of all the CSS properties that may exist: there are really too many of them (more than two hundred!) and some are very rarely used.

Memento

Text formatting properties

I'll summarize here most of the text formatting properties.

What is text formatting? It's everything that concerns the presentation of the text itself: bold, italics, underline, font, alignment, etc.

Property

Values (examples)

Description

font-family

police1, police2, police3, serif, sans-serif, monospace

Font name

@font-face

Font source and name

Custom font

font-size

1.3em, 16px, 120%...

Text size

font-weight

bold, normal

Bold

font-style

italic, oblique, normal

Italic

text-decoration

underline, overline, line-through, blink, none

Underline, overline, strikethrough or blinking

font-variant

small-caps, normal

Small caps

text-transform

capitalize, lowercase, uppercase

Capitals

font

-

Font super property Combine: font-weight, font-style, font-size, font-variant, font-family.

text-align

left, center, right, justify

Horizontal alignment

vertical-align

baseline, middle, sub, super, top, bottom

Vertical alignment (table cells or inline-block items only)

line-height

18px, 120%, normal...

Line height

text-indent

25px

Subparagraph

white-space

pre, nowrap, normal

Hyphenation

word-wrap

break-word, normal

Forced hyphenation

text-shadow

5px 5px 2px blue
(horizontal, vertical, fade, color)

Text shadow

Color and background properties

Property

Values (examples)

Description

color

name, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Text color

background-color

Same as color

Background color

background-image

url('image.png')

Background image

background-attachment

fixed, scroll

Fixed background

background-repeat

repeat-x, repeat-y, no-repeat, repeat

Background repetition

background-position

(x y), top, center, bottom, left, right

Background position

background

-

Background super property. Combine: background-image, background-repeat, background-attachment, background-position

opacity

0.5

Transparency

Box properties

Property

Values (examples)

Description

width

150px, 80%...

Width

height

150px, 80%...

Height

min-width

150px, 80%...

Minimum width

max-width

150px, 80%...

Maximum width

min-height

150px, 80%...

Minimum height

max-height

150px, 80%...

Maximum height

margin-top

23px

Top margin

margin-left

23px

Left margin

margin-right

23px

Right margin

margin-bottom

23px

Bottom margin

margin

23px 5px 23px 5px
(top, right, bottom, left)

Margin super property.
Combine: margin-top, margin-right, margin-bottom, margin-left.

padding-left

23px

Inner margin on the left

padding-right

23px

Inner margin on the right

padding-bottom

23px

Inner margin at the bottom

padding-top

23px

Inner margin at the top

padding

23px 5px 23px 5px
(top, right, bottom, left)

Inner margin super property.
Combine: padding-top, padding-right, padding-bottom, padding-left.

border-width

3px

Border width

border-color

name, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Border color

border-style

solid, dotted, dashed, double, groove, ridge, inset, outset

Border type

border

3px solid black

Border super property. Combine border-width, border-color, border-style.
Also available for the following versions border-top, border-right, border-bottom, border-left.

border-radius

5px

Rounded border

box-shadow

6px 6px 0px black
(horizontal, vertical, fade, color)

Box shadow

Display positioning properties

Property

Values (examples)

Description

display

block, inline, inline-block, table, table-cell, none...

Item type (block, inline, inline-block, none…)

visibility

visible, hidden

Visibility

clip

rect (0px, 60px, 30px, 0px)
rect (top, right, bottom, left)

Display of a portion of the item

overflow

auto, scroll, visible, hidden

Behaviour in case of overflow

float

left, right, none

Floating

clear

left, right, both, none

Stop a floating

position

relative, absolute, static

Positioning

top

20px

Position relative to the top

bottom

20px

Position relative to the bottom

left

20px

Position relative to the left

right

20px

Position relative to the right

z-index

10

Display order if overlap.
The highest value is displayed above the others.

List properties

Property

Values (examples)

Description

list-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

List type

list-style-position

inside, outside

Indent position

list-style-image

url('puce.png')

Custom bullet

list-style

-

List super property. Combine list-style-type, list-style-position, list-style-image.

Table properties

Property

Values (examples)

Description

border-collapse

collapse, separate

Merge borders

empty-cells

hide, show

Display blank cells

caption-side

bottom, top

Table title position

Other properties

Property

Values (example)

Description

cursor

crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...

Mouse cursor

Exemple de certificat de réussite
Exemple de certificat de réussite