totn CSS

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

background Color, image, repeat, position and attachment of a background
background-attachment Background image for an element is fixed within the viewport or scrolls along with its containing block
background-color Background color of an element
background-image Background image for an element
background-position Position of background-image for an element
background-repeat Repeat background image for an element

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

list-style Appearance, position, and image for list item elements
list-style-image Image to use as the list item marker
list-style-position Position of the list item marker in the principal block box
list-style-type Appearance of a list item element

Outline Properties

outline Width, line style, and color of the outline of an element
outline-color Color of the outline around an element
outline-style Line style of the outline around an element
outline-width Width of the outline around an element

Table Properties

border-collapse Rendering model to use for the table borders
border-spacing Spacing between the borders of adjacent cells in a table
caption-side Position of a table-caption
table-layout Algorithm to layout cells, rows, and columns in a table
vertical-align Vertical alignment of an inline element or table cell element

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

page-break-after Page breaks after an element
page-break-before Page breaks before an element
page-break-inside Page breaks inside an element

Other Properties

display Type of rendering box to use for an element
opacity Transparency of an element

CSS Selectors

:active Target element that is being activated
:after Add content after a selected element
:before Add content before a selected element
:first-child Target first child element of its parent
:first-letter Target first letter of a block element
:first-line Target first line of a block element
:hover Target element when cursor hovers over it
:last-child Target last child element of its parent
:link Target links that have not been visited
:nth-child Target nth child element of its parent
:nth-last-child Target nth last child element of its parent
:only-child Target only child element of its parent
:visited Target visited links
child (> combinator) Target direct child element of an element type
descendant Target descendant element of an element type

Validators

CSS Validator Validate your CSS
HTML Validator Validate your HTML