CSS Tutorials | Learn FREE CSS with Examples

Category: CSS

How to use CSS for Table in HTML

In this article, you will learn How to use CSS for Table in HTML.

Example:-

table.html

<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
<tr>
<th>Roll No.</th><th>Name</th><th>Class</th><th>Gender</th><th>City</th>
</tr>
<tr>
<td>124</td><td>Amandeep Singh</td><td>BCA</td><td>Male</td><td>Amritsar</td>
</tr>
<tr>
<td>136</td><td>Nisha Sharma</td><td>MCA</td><td>Female</td><td>Patiala</td>
</tr>
</table>
</body>
</html>

…

How to Create a Navigation Bar using CSS

We will guide you on How to Create a Navigation Bar using CSS.

nav.html

<html>
<head>
<title>Navigation Bar</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<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>

style.css

ul {

…

How to use hover in Cascading Stylesheet

In this article, you will learn How to use hover in Cascading Stylesheet.

Example:-

hover.html

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title> Menus</title>
</head>
<body>
		<ul class="menu-1">
		<li><a href="#">UG Colleges</a></li>
		<li><a href="#">PG Colleges</a></li>
		<li><a href="#">Diploma Colleges</a></li>
		</ul>
</body>
</html>

…

How to Create Dropdown with hover

In this article, you will learn How to Create Dropdown with hover.

dropdown.html

<html>
<head>
<title>Dropdown List using Hover</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
 </body>
</html>

style.css

.dropdown {

…

How to Create Image Gallery in HTML

In this article, you learn How to Create Image Gallery in HTML. Follow the Example.

Example:-

gallery.html

<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="gallery">
  <a target="_blank" href="img_one.jpg">
    <img src="img_one.jpg" alt="img_one" width="500" height="300">
  </a>
  <div class="descr">Image One</div>

…