TutorialLab
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:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Apple</li>
  <li>Hp</li>
  <li>Dell</li>
</ul>

<ul class="b">
  <li>Nokia</li>
  <li>Samsung</li>
  <li>Sony</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Apple</li>
  <li>Hp</li>
  <li>Dell</li>
</ol>

<ol class="d">
  <li>Sony</li>
  <li>Leneovo</li>
  <li>Asus</li>
</ol>

</body>
</html>

An Image as the list Item Maker:

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

ul {
    list-style-image: url('abc.jpg');
}

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.

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Orange</li>
  <li>Banana</li>
  <li>Grapes</li>
</ol>

<ul>
  <li>Orange</li>
  <li>Banana</li>
  <li>Grapes</li>
</ul>

</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
    text-decoration: none;
    background-color: green;
}

/* visited link */
a:visited {
    color: green;
    text-decoration: none;
    background-color: yellow;
}

/* mouse over link */
a:hover {
    color: hotpink;
    text-decoration: underline;
    background-color: gray;
}

/* selected link */
a:active {
    color: blue;
    text-decoration: none;
    background-color: green;
}
</style>
</head>
<body>

<p><b><a href="#">This is a link</a></b></p>

</body>
</html>

Create Link Button:

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;	
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}
</style>
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

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.

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Float</title>
		<style type="text/css">
			.first{
				width:50%;
				height:200px;
				background-color:red;
				float:left;
			}
			.second{
				width:50%;
				height:200px;
				background-color:green;
				float:right;
			}
		</style>
	</head>	
<body>
	<div class="first">
	</div>
	<div class="second">
	</div>
</body>
</html>

Previous Lecture Next Lecture

Aizaz Ali

Your Header Sidebar area is currently empty. Hurry up and add some widgets.