Scribd
Upload
3 views

ch-3 CSS(2)

The document provides an overview of CSS lists, tables, and navigation bars, detailing how to create and style unordered and ordered lists, including the use of different list item markers and colors. It also covers table properties such as borders, width, height, and alignment, as well as creating hoverable and striped tables. Additionally, it explains how to build vertical and horizontal navigation bars using lists and CSS styling techniques to enhance usability and appearance.

Uploaded by

yamini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

ch-3 CSS(2)

The document provides an overview of CSS lists, tables, and navigation bars, detailing how to create and style unordered and ordered lists, including the use of different list item markers and colors. It also covers table properties such as borders, width, height, and alignment, as well as creating hoverable and striped tables. Additionally, it explains how to build vertical and horizontal navigation bars using lists and CSS styling techniques to enhance usability and appearance.

Uploaded by

yamini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

CSS Lists

Unordered Lists:

o Coffee
o Tea
o Coca Cola

▪ Coffee
▪ Tea
▪ Coca Cola

Ordered Lists:

1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - 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 Markers

The list-style-type 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>

<h2>Lists</h2>

<p>Example of unordered lists:</p>

<ul class="a">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<ul class="b">
<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Example of ordered lists:</p>

<ol class="c">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ol class="d">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>

Output

Lists

Example of unordered lists:

o Coffee
o Tea
o Coca Cola

▪ Coffee
▪ Tea
▪ Coca Cola

Example of ordered lists:


I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola

An Image as The List Item Marker

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

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-image: url('sqpurple.gif');

</style>

</head>

<body>

<h2>CSS Lists</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>
Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet
points).

"list-style-position: outside;" means that the bullet points will be outside the list item.
The start of each line of a list item will be aligned vertically. This is default:

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {

list-style-position: outside;

ul.b {

list-style-position: inside;

</style>

</head>

<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>

<ul class="a">

<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant</li>

<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the
Camellia sinensis, an evergreen shrub (bush) native to Asia</li>

<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of
its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>

<ul class="b">

<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant</li>

<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the
Camellia sinensis, an evergreen shrub (bush) native to Asia</li>

<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of
its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>

</ul>

</body>

</html>

Remove Default Settings


The list-style-type:none property can also be used to remove the markers/bullets. Note
that the list also has default margin and padding. To remove this,
add margin:0 and padding:0 to <ul> or <ol>:

Example

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

List - Shorthand property


The list-style property is a shorthand property. It is used to set all the list properties in
one declaration:

Example

ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:
• list-style-type (if a list-style-image is specified, the value of this property will be
displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or
outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property
will be inserted, if any.

Styling List With Colors

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:

Example

<!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>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

Styling Lists With Colors:

1. Coffee
2. Tea
3. Coca Cola
• Coffee
• Tea
• Coca Cola

CSS Tables
Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table, th, td {
border: 1px solid black;
}

Full-Width Table

The table above might seem small in some cases. If you need a table that should span the
entire screen (full-width), add width: 100% to the <table> element:

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a
single border:

Firstname Lastname
Peter Griffin
Lois Griffin

Table Width and Height

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th>
elements to 70px:

<!DOCTYPE html>
<html>

<head>

<style>

table, td, th {

border: 1px solid black;

table {

border-collapse: collapse;

width: 100%;

th {

height: 70px;

</style>

</head>

<body>

<h2>The width and height Properties</h2>

<p>Set the width of the table, and the height of the table header row:</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>
<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

The width and height Properties

Set the width of the table, and the height of the table header row:

Firstname Lastname Savings

Peter Griffin $100


Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td>
elements are left-aligned.

To center-align the content of <td> elements as well, use text-align: center:

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and
<td> elements).

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

th, td {

padding: 8px;

text-align: left;
border-bottom: 1px solid red;

tr:hover {background-color:blue;}

</style>

</head>

<body>

<h2>Hoverable Table</h2>

<p>Move the mouse over the table rows to see the effect.</p>

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>
<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all
even (or odd) table rows:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

th, td {

text-align: left;

padding: 8px;

}
tr:nth-child(even) {background-color: #f2f2f2;}

</style>

</head>

<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table
rows:</p>

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>
<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

CSS Navigation Bar


Demo: Navigation Bars

Vertical

Home

News

Contact

About

Horizontal

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.

Example

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

Output

• Home
• News
• Contact
• About

Note: We use href="#" for test links. In a real web site this would be URLs.

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

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

In this example, we remove the bullets from the list, and its default padding and margin.

• Home
• News
• Contact
• About

Vertical Navigation Bar


• Home
• News
• Contact
• About

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to
the code from the previous page:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

li a {

display: block;

width: 60px;

background-color: #dddddd;

</style>
</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>A background color is added to the links to show the link area.</p>

<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

output

• Home
• News
• Contact
• About

A background color is added to the links to show the link area.

Notice that the whole link area is clickable, not just the text.

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 <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want borders
inside the navbar, add a border-bottom to all <li> elements, except for the last one:

Home

News

Contact

About

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

border: 1px solid #555;

li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

li {

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

li:last-child {

border-bottom: none;

li a.active {

background-color: #4CAF50;

color: white;

li a:hover:not(.active) {

background-color: #555;

color: white;

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>
</ul>

</body>

</html>

Horizontal Navigation Bar


Home News Contact About

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 <li> elements as inline, in addition
to the "standard" code from the previous page:

Example
li {
display: inline;
}

Floating List Items


Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a
layout for the navigation links:

Example
li {
float: left;
}

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

example

<!DOCTYPE html>

<html>

<head>
<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow:hidden;

li {

float: left;

li a {

display: block;

padding: 8px;

background-color: #dddddd;

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the
text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the
list.</p>

</body>

</html>

Output

Home News Contact About

Note: If a !DOCTYPE is not specified, floating items can produce unexpected results.

A background color is added to the links to show the link area. The whole link area is clickable, not just
the text.

Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list.

Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.

Example

<!DOCTYPE html>

<html>

<head>

<style>

.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;

</style>

</head>

<body>

<h2>Hoverable Dropdown</h2>

<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">

<span>Mouse over me</span>

<div class="dropdown-content">

<p>Hello World!</p>

</div>

</div>

</body>
</html>

Output

Hoverable Dropdown

Move the mouse over the text below to open the dropdown content.

Mouse over me

Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

.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);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

.dropdown:hover .dropbtn {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">

<button class="dropbtn">Dropdown</button>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

CSS Image Gallery


Example
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

You might also like