CSS Tutorial
CSS stands for Cascading Style Sheets. It is the technology used to style web pages that are displayed on web browsers. All web developers should know how to write, structure, and troubleshoot CSS.
Our tutorial starts by covering CSS properties to style your HTML document and then moves to the more advanced concepts around CSS selectors. With this tutorial, you should be on your way to understanding and creating your own stylesheets.
Prerequisites
There are no prequisities for this CSS tutorial, however, it is strongly recommended that you review our HTML tutorial first so that you have a basic understanding of HTML tags.
You should be able to easily understand this tutorial and learn the basic concepts of how to style web documents using CSS.
Now, let's get started!
Start Tutorial
Or jump directly to a topic in CSS:
CSS Properties
Font Properties
font |
Set the font-style, font-variant, font-weight, font-size, line-height, and font-family |
font-family |
Prioritized list of font family names to apply to an element |
font-size |
Size of the font |
font-style |
Style of the font (italic, oblique, normal) |
font-variant |
Variant of the font (small-caps, normal) |
font-weight |
Weight or boldness of the font |
line-height |
Height used in the calculation of the line box height for an inline element.
Minimal height of the line box for a block level element |
Text Properties
color |
Foreground color of the text content of an element |
letter-spacing |
Amount of space between characters of text |
text-align |
Align text within the parent block element |
text-decoration |
Text formatting of an element such as underline, overline, line-through and blink |
text-indent |
Amount of indentation before the first line of an element's text |
text-shadow |
Shadow effects for the text of an element |
text-transform |
Capitalize the text of an element such as uppercase, lowercase, capitalize |
white-space |
How to handle whitespace within an element |
word-spacing |
Amount of space between words |
word-wrap |
Whether line breaks within words are allowed |
Background Properties
Positioning Properties
bottom |
Bottom position for a positioned element |
clear |
Clear floated elements |
float |
Float an element to either the left or right |
left |
Left position for a positioned element |
position |
Position of an element |
right |
Right position for a positioned element |
top |
Top position for a positioned element |
Box Model Properties
box-shadow |
Shadow effects for an element |
height |
Height of the content area of an element |
margin |
Margin on all sides of an element |
margin-bottom |
Margin on the bottom of an element |
margin-left |
Margin on the left side of an element |
margin-right |
Margin on the right side of an element |
margin-top |
Margin on the top of an element |
max-height |
Maximum height of the content area of an element |
max-width |
Maximum width of the content area of an element |
min-height |
Minimum height of the content area of an element |
min-width |
Minimum width of the content area of an element |
overflow |
Behavior when content overflows the content box |
overflow-x |
Behavior when content overflows the content box horizontally (ie: left to right) |
overflow-y |
Behavior when content overflows the content box vertically (ie: top to bottom) |
padding |
Padding space on all sides of an element |
padding-bottom |
Padding space on the bottom of an element |
padding-left |
Padding space on the left side of an element |
padding-right |
Padding space on the right side of an element |
padding-top |
Padding space on the top of an element |
width |
Width of the content area of an element |
List Style Properties
Outline Properties
Table Properties
Border Properties
border |
Width, line style, and color of the border of a box |
border-bottom |
Width, line style, and color of the bottom border of a box |
border-bottom-color |
Color of the bottom border of a box |
border-bottom-left-radius |
Rounded corners on the left side of the bottom border of a box |
border-bottom-right-radius |
Rounded corners on the right side of the bottom border of a box |
border-bottom-style |
Line style of the bottom border of a box |
border-bottom-width |
Width of the bottom border of a box |
border-color |
Color of the border of a box |
border-left |
Width, line style, and color of the left border of a box |
border-left-color |
Color of the left border of a box |
border-left-style |
Line style of the left border of a box |
border-left-width |
Width of the left border of a box |
border-radius |
Rounded corners on the border of a box |
border-right |
Width, line style, and color of the right border of a box |
border-right-color |
Color of the right border of a box |
border-right-style |
Line style of the right border of a box |
border-right-width |
Width of the right border of a box |
border-style |
Line style of the border of a box |
border-top |
Width, line style, and color of the top border of a box |
border-top-color |
Color of the top border of a box |
border-top-left-radius |
Rounded corners on the left side of the top border of a box |
border-top-right-radius |
Rounded corners on the right side of the top border of a box |
border-top-style |
Line style of the top border of a box |
border-top-width |
Width of the top border of a box |
border-width |
Border width of a box |
Page Break Properties
Other Properties
display |
Type of rendering box to use for an element |
opacity |
Transparency of an element |
CSS Selectors
Validators