The position Property
The position property specifies the type of positioning method used for an element.

There are four different position values:

static
relative
fixed
absolute
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
The overflow property has the following values:

visible – Default. The overflow is not clipped. It renders outside the element’s box
hidden – The overflow is clipped, and the rest of the content will be invisible
scroll – The overflow is clipped, but a scrollbar is added to see the rest of the content
auto – If overflow is clipped, a scrollbar should be added to see the rest of the content
Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though “overflow:scroll” is set).

Visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the element’s box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}
»
Hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:

Example
div {
    overflow: hidden;
}
»
Scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
div {
    overflow: scroll;
}
»
Auto
The auto value is similar to scroll, only it add scrollbars when necessary:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
div {
    overflow: auto;
}
»
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »

❮ Previous Next ❯

However, the inline-block value of the display property makes this even easier.

inline-block elements are like inline elements but they can have a width and a height.

Examples
The old way – using float (notice that we also need to specify a clear property for the element after the floating boxes):

Example
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
}
»
The same effect can be achieved by using the inline-block value of the display property (notice that no clear property is needed):

Example
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}
»

❮ Previous Next ❯

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.

The following example selects all

elements inside

▲ ▼
◀ ►
Center elements
horizontally and vertically
Center Align Elements
To horizontally center a block element (like

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:

selector::pseudo-element {
    property:value;
}
Notice the double colon notation – ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all

elements:

Example
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
»
Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all

elements:

Example
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
»
Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:

Example
p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
»
The example above will display the first letter of paragraphs with class=”intro”, in red and in a larger size.

Multiple Pseudo-elements
Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
»
CSS – The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each

element:

Example
h1::before {
    content: url(smiley.gif);
}
»
CSS – The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each

element:

Example
h1::after {
    content: url(smiley.gif);
}
»
CSS – The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection: color, background, cursor, and outline.

The following example makes the selected text red on a yellow background:

Example
::selection {
    color: red;
    background: yellow;
}
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »

All CSS Pseudo Elements
Selector Example Example description
::after p::after Insert something after the content of each

element
::before p::before Insert something before the content of each

element
::first-letter p::first-letter Selects the first letter of each

element
::first-line p::first-line Selects the first line of each

element
::selection p::selection Selects the portion of an element that is selected by a user
All CSS Pseudo Classes
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked element
:disabled input:disabled Selects every disabled element
:empty p:empty Selects every

element that has no children
:enabled input:enabled Selects every enabled element
:first-child p:first-child Selects every

elements that is the first child of its parent
:first-of-type p:first-of-type Selects every

element that is the first

element of its parent
:focus input:focus Selects the element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects elements with a value within a specified range
:invalid input:invalid Selects all elements with an invalid value
:lang(language) p:lang(it) Selects every

element with a lang attribute value starting with “it”
:last-child p:last-child Selects every

elements that is the last child of its parent
:last-of-type p:last-of-type Selects every

element that is the last

element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a

element
:nth-child(n) p:nth-child(2) Selects every

element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every

element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every

element that is the second

element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every

element that is the second

element of its parent
:only-of-type p:only-of-type Selects every

element that is the only

element of its parent
:only-child p:only-child Selects every

element that is the only child of its parent
:optional input:optional Selects elements with no “required” attribute
:out-of-range input:out-of-range Selects elements with a value outside a specified range
:read-only input:read-only Selects elements with a “readonly” attribute specified
:read-write input:read-write Selects elements with no “readonly” attribute
:required input:required Selects elements with a “required” attribute specified
:root root Selects the document’s root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all elements with a valid value
:visited a:visited Selects all visited links

❮ Previous Next ❯

Home
News
Contact
About
Horizontal

Home
News
Contact
About

Home
News
Contact
About
Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the

and
• elements makes perfect sense:

  Example

   
  • Home</li>
     
  • News

   

  • Contact</a>

   

  • About</li>

  »
  Now let’s remove the bullets and the margins and padding from the list:

  Example
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  »
  Example explained:

  list-style-type: none; – Removes the bullets. A navigation bar does not need list markers
  Set margin: 0; and padding: 0; to remove browser default settings
  The code in the example above is the standard code used in both vertical, and horizontal navigation bars.

  Vertical Navigation Bar
  To build a vertical navigation bar, you can style the elements inside the list, in addition to the code above:

  Example
  li a {
      display: block;
      width: 60px;
  }
  »
  Example explained:

  display: block; – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
  width: 60px; – Block elements take up the full width available by default. We want to specify a 60 pixels width
  You can also set the width of

  , and remove the width of , as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:

  Example
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60px;
  }

  li a {
      display: block;
  }
  »
  Vertical Navigation Bar Examples
  Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

  Home
  News
  Contact
  About
  Example
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
  }

  li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
  }

  /* Change the link color on hover */
  li a:hover {
      background-color: #555;
      color: white;
  }
  »
  Active/Current Navigation Link
  Add an “active” class to the current link to let the user know which page he/she is on:

  Home
  News
  Contact
  About
  Example
  .active {
      background-color: #4CAF50;
      color: white;
  }
  »
  Center Links & Add Borders
  Add text-align:center to

  • or to center the links.

    Add the border property to

    add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all
    • elements, except for the last one:

      Home
      News
      Contact
      About
      Example
      ul {
          border: 1px solid #555;
      }

      li {
          text-align: center;
          border-bottom: 1px solid #555;
      }

      li:last-child {
          border-bottom: none;
      }
      »
      Full-height Fixed Vertical Navbar
      Create a full-height, “sticky” side navigation:

      Example
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          width: 25%;
          background-color: #f1f1f1;
          height: 100%; /* Full height */
          position: fixed; /* Make it stick, even on scroll */
          overflow: auto; /* Enable scrolling if the sidenav has too much content */
      }
      »
      Note: This example might not work properly on mobile devices.

      Horizontal Navigation Bar
      There are two ways to create a horizontal navigation bar. Using inline or floating list items.

      Inline List Items
      One way to build a horizontal navigation bar is to specify the

    • elements as inline, in addition to the “standard” code above:

      Example
      li {
          display: inline;
      }
      »
      Example explained:

      display: inline; – By default,

    • elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
      Floating List Items
      Another way of creating a horizontal navigation bar is to float the
    • elements, and specify a layout for the navigation links:

      Example
      li {
          float: left;
      }

      a {
          display: block;
          padding: 8px;
          background-color: #dddddd;
      }
      »
      Example explained:

      float: left; – use float to get block elements to slide next to each other
      display: block; – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
      padding: 8px; – Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
      background-color: #dddddd; – Add a gray background-color to each a element
      Tip: Add the background-color to

      instead of each element if you want a full-width background color:

      Example
      ul {
          background-color: #dddddd;
      }
      »
      Horizontal Navigation Bar Examples
      Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

      Home
      News
      Contact
      About
      Example
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333;
      }

      li {
          float: left;
      }

      li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }

      /* Change the link color to #111 (black) on hover */
      li a:hover {
          background-color: #111;
      }
      »
      Active/Current Navigation Link
      Add an “active” class to the current link to let the user know which page he/she is on:

      Home
      News
      Contact
      About
      Example
      .active {
          background-color: #4CAF50;
      }
      »
      Right-Align Links
      Right-align links by floating the list items to the right (float:right;):

      Home
      News
      Contact
      About
      Example

       
      • Home

       

      • News

       

      • Contact</li>
         
      • About

      »
      Border Dividers
      Add the border-right property to

      • to create link dividers:

        Home
        News
        Contact
        About
        Example
        /* Add a gray right border to all list items, except the last item (last-child) */
        li {
            border-right: 1px solid #bbb;
        }

        li:last-child {
            border-right: none;
        }
        »
        Fixed Navigation Bar
        Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:

        Fixed Top
        ul {
            position: fixed;
            top: 0;
            width: 100%;
        }
        »
        Fixed Bottom
        ul {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        »
        Note: These examples might not work properly on mobile devices.

        Gray Horizontal Navbar
        An example of a gray horizontal navigation bar with a thin gray border:

        Home
        News
        Contact
        About
        Example
        ul {
            border: 1px solid #e7e7e7;
            background-color: #f3f3f3;
        }

        li a {
            color: #666;
        }
        »
        More Examples
        Responsive Topnav
        How to use CSS3 media queries to create a responsive top navigation.

        »
        Responsive Sidenav
        How to use CSS3 media queries to create a responsive side navigation.

        »
        Dropdown Navbar
        How to add a dropdown menu inside a navigation bar.

        »

        ❮ Previous Next ❯

Transparent Image
The opacity property can take a value from 0.0 – 1.0. The lower value, the more transparent:

opacity 0.2

opacity 0.5

opacity 1
(default)

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Example
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
»
Transparent Hover Effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Example
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
»
Example explained
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

Example
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
»
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example
div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}
»
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, CSS3 introduced an RGB color value with an alpha channel (RGBA) – which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha  parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS3 Colors Chapter.

Example
div {
    background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
»
Text in Transparent Box
This is some text that is placed in the transparent box.

Example

div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}

»
First, we create a

Demo: Dropdown Examples
Move the mouse over the examples below:

Dropdown Text
Hello World!

Dropdown Menu
Link 1 Link 2 Link 3
Other:
Beautiful Trolltunga, Norway
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.

Example

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

»
Example Explained
HTML) Use any element to open the dropdown content, e.g. a , or a element.

Use a container element (like

Demo: Tooltip Examples
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text
Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:

Example

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text – see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

»
Example Explained
HTML) Use a container element (like