CSS Reference

Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.
Inline Menu
This is an example of a website menu:

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

#menu More >

Pseudo-elements are used to add special effects to some html elements.
Pseudo-elements are very much like pseudo-classes. The syntax for pseudo-elements is like pseudo-classes:

selector:pseudo-element {property:value;}

We can also use class selectors with our pseudo-elements:

selector.class:pseudo-element {property:value;}

Pseudo-elements
Since pseudo-elements exist to give some html elements some flair, we have a few special pseudo-elements that we need to be familiar with.
:first-line
As More >

Pseudo-classes are little snippets of code that will add additional effects to some selectors.
Pseudo-classes
The syntax for Pseudo-classes is very much like the syntax for css:

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
property:value;
property:value;
}

:link, :visited, :active, :hover
A very widely used example of Pseudo-classes is adding styles to links. More >

In this tutorial we’re going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.
Float Property
The float property allows for an element to be pushed to the left or the right so More >

Today we’re going to talk about advanced positioning techniques. This is a widely used property in CSS and it very useful! Positioning allows you to position an element, place one element behind another, and determine what happens when an element is too big.
The position of an element is controlled by top, right, bottom, and left More >