CSS Lists, Links, Float Properties

CSS Lists, Links, Float Properties

CSS Lists, Links, Float Properties:

Today we will discuss CSS Lists, Links, Float Properties.

CSS Lists:

In HTML, there are two main types of lists.

  • unordered lists : the list items are marked with bullets.
  • ordered lists : the list items are marked with numbers or letters.

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items

Different List Item Makers:

This property specifies the type of list item marker.The following example shows some of the available list item markers:

An Image as the list Item Maker:

The list-style-image property specifies an image as the list item marker.

Styling List With Color:

We can also style lists with colors, to make them look a little more interesting.Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items.

Styling Links In CSS:

Links can be styled with any CSS property (e.g color,font-family,background).

In addition, links can be styled differently depending on what state they are in.

The four links states are:

a:link – a normal, unvisited link

a:visited – a link the user has visited

a:hover –  link when the user mouses over it

a:active – a link the moment it is clicked

Color,Text Decoration and Background Color For Links:

We can set color, text-decoration and background color for links in CSS.

Create Link Button:

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

CSS Float Property:

This property specifies whether or not an element should float.we can use float property to move an element or object left or right in webpage.this example shows you the basic usage of float property.

Previous Lecture Next Lecture

Aizaz Ali


Tutoriallab.net offers tutorials to there visitors on most simple to advance topics to solve web related issue using videos and test posts.