Coder's GroundWeb Development

Here’s How to create an external CSS file (includes 2 examples)

Adding CSS to an HTML code can be performed in three ways,

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Out of these three, the external CSS is considered as the best way to implement styling on any webpage. In it, a dedicated file with CSS codes( known as a stylesheet) is written and is linked externally to any HTML page.

 

Now, for starters, let’s come to the navigation bar. What is a Navigation bar? A navigation bar is a list of links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a website.

Here is some example

Example 1:-

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list_drop_down</title>
</head>
<link rel="stylesheet" type="text/css" href="List_Example.html"/>

<body>

<ul>

<li>city</li>
<li>pincode</li>
<ul>
<li>Bilaspur</li>
<li>Raipur</li>
<li>Raigarh</li>
<li>Korba</li>
<li>Durg</li>
</ul>
</li>
</ul>

</body>
</html>


External CSS file for example 1:-

@charset "utf-8";
/* CSS Document */

.ul
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	}
	
li:hover
{
	background-color:#999;
	
	}
	
li:visited
{
	background-color:#0C6;
	}
	
	
li:active
{
	background-color:#009;
}

li.link
{
	background-color:#C69;
	}

Example 2:-

Here is an example of  navbar  or navigation bar:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Drop_Down_Menu</title>
<link rel="stylesheet" type="text/css" href="drop_down_menu.css">
</head>
<body>
<div class="nav">
<ul>
<li><a herf="#">Home</a></li>
<li><a herf="#">About Us</a></li>
<li><a herf="#">Services</a>
<ul>
<li><a herf="#">Services 1</a></li>
<li><a herf="#">Services 2</a></li>
<li><a herf="#">Services 3</a></li>
<li><a herf="#">Services 4</a></li>
<li><a herf="#">Services 5</a></li>
<li><a herf="#">Services 6</a></li>
</ul>
</li>
<li><a herf="#">Feedback</a></li>
<li><a herf="#">Blog</a></li>
<li><a herf="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>

Output 1:-

External CSS file Example 2:-

body
{
	margin:0px;
	padding:0px;
	background:#CCC;
}
.nav
{
	width:100%;
	background:#009;
	height:80px;
}
ul
{
	list-style:none;
	margin:0px;
	padding:0px;
	position:absolute;
}
ul li
{
	float:left;
	margin-top:20px;
}
ul li a
{
	width:150px;
	color:white;
	display:block;
	text-decoration:none;
	text-align:center;
	font-size:16px;
	padding:10px;
	border-radius:3px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}
a:hover
{
	background:#03F;
}
ul li ul
{
	background:#000080;
}
ul li ul li
{
	float:none;
}
ul li ul
{
	display:none;
}
ul li:hover ul
{
	display:block;
}

Output2:-

 

Also read: What is CSS and why do you actually need to learn it? , Here’s a basic HTML code to start learning as a beginner

Surabhi Singh

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *