Just as we did with HTML elements in the previous chapter, we will go over the essential CSS properties used to design website layouts.
This list is once again non-exhaustive and classified by property type.
Most of the CSS properties we will review have already been covered in greater depths during the course of this tutorial, so if you need more details on how a certain property is declared you can find them in the associated chapters, a direct link is provided when relevant.
Just for the sake of accuracy and thoroughness, let's start by reviewing how CSS code is applied (figure below).
The syntax of CSS code declaration is covered in greater detail in the setting up CSS chapter.
Remember that you can add as many properties as you want, for each selector, between the curly brackets.
Text formatting properties
Text formatting is everything that affects the presentation of textual content: bold, italics, underline, font, alignment, letter spacing...
Here are the main relevant properties.
| Property | Description (Example) |
|---|---|
font-family | Font name ( Arial ) |
font-size | Text size ( 15px ) |
font-weight | Bold ( bold ) |
font-style | Italic ( italic ) |
text-decoration | Underline, overline, strikethrough ( underline ) |
text-transform | Uppercase, lowercase, capitalize ( uppercase ) |
font-variant | Small caps ( small-caps ) |
@font-face | Custom font |
text-align | Horizontal alignment ( center ) |
vertical-align | Vertical alignment ( middle ) |
line-height | Line height ( 18px ) |
text-indent | Paragraph indentation ( 25px ) |
white-space | Hyphenation ( nowrap ) |
word-break | Word-break ( break-all ) |
text-shadow | Letter shadow ( 5px 5px 2px blue ) |
You can read more about these in the text formatting chapter.
Color and background properties
The following properties are applied to manage either the color or the background of an element.
| Property | Description (Example) |
|---|---|
color | Text color ( red ) |
opacity | Transparency ( 0.5 ) |
background-color | Background color ( red ) |
background-image | Background image ( url('img.png') ) |
background-attachment | Fixed background ( scroll ) |
background-repeat | Background repetition ( no-repeat ) |
background-position | Background position ( center ) |
For more information on these properties you can refer to the color and background chapter of this tutorial.
Dimension properties
Dimension properties are all the options that involve modifying the height and width of a block-level element.
They include the dimensions of the element itself, the padding, the border and the margin.
CSS box model
The properties relevant to the CSS box model, minus those involving borders.
| Property | Description (Example) |
|---|---|
width | Element width ( 550px ) |
height | Element height ( 300px ) |
min-width | Minimum width ( 550px ) |
min-height | Minimum height ( 300px ) |
max-width | Maximum width ( 550px ) |
max-height | Maximum height ( 300px ) |
padding | Inner padding ( 25px ) |
margin | Outer margin ( 25px ) |
Border properties
These properties handle border size, shape, color and more.
| Property | Description (Example) |
|---|---|
border-width | Border width ( 5px ) |
border-style | Border type ( dotted ) |
border-color | Border color ( red ) |
border-radius | Rounded borders ( 5px ) |
box-shadow | Block shadow ( 3px 3px 0px red ) |
You can read more about them in the borders and shadows chapter of this tutorial.
Display properties
Lastly, these properties are used to manipulate the display and positioning of an element or an element group.
| Property | Description (Example) |
|---|---|
display | Display type ( block ) |
position | Positioning ( absolute ) |
visibility | Visibility ( hidden ) |
overflow | Overflow ( hidden ) |
float | Floating ( right ) |
clear | Clear a float ( both ) |
top | Top offset ( 20px ) |
left | Left offset ( 20px ) |
right | Right offset ( 20px ) |
bottom | Bottom offset ( 20px ) |
z-index | Importance if overlap ( 10 ) |
cursor | Mouse cursor ( crosshair ) |
Done!
Some of you will have noticed that I didn't include every existing CSS property, as I said at the beginning... there are simply too many to list in a single chapter.
The goal of this chapter isn't to provide a complete list but rather a quick support when you need to code something in CSS.
As such, I only included the most often used CSS properties.
You can bookmark this chapter - and the previous one on HTML elements - for quick access if you ever need to verify how a property is used or what it does.