How to make a header with logo and search bar using html and CSS?

Since, HTML is used to describe the content and layout is provided by CSS. So, today we will learn how to make header of website using HTML and CSS? Header of any website contains a logo of company, menu of website, and search bar, signup and login buttons. But here we will see how we can make header using only company logo and search bar.
Submitted by Prerna Saxena, on October 19, 2017

Since header is designed in every layout of websites. It contains various items like logo of company, various menus etc.

Firstly, we will make a div section with the class name header. It is like a container which contains various html elements. We define div in html as follows,

HTML

<div class="header">
</div>

We will define CSS for body element with margin:0px; and padding:0px; so that no spacing is around header element. With this it will occupy whole width without any margin or padding around it. Since margin is the space outside the HTML element and padding is space inside the html element.

CSS

body{
	margin:0px;
	padding:0px;
}

After this we will define CSS of div header with width:100%;, height:60px, and background-color of header. Width:100% will take whole width of device.

Class is defined with "." And class name. It defines styling of similar type of elements.

Example

.header{
	width:100%;
	height:60px;
	background-color:#E6E6FA;
}

After defining container header now we will define how to align website logo name and search bar on header of website.

Now we will define h1 heading and its CSS as follows,

<h1 class="logo">Website Logo</h1>

Since we know h1 element is block level elements. Block level elements always take full width and does not allow any element next to it. So we will make it inline-block. An inline element takes only necessary width but we cannot provide height and width to it. So we will use display property to inline-block as it can take width and height and we can float it with other elements. We will provide display property as,

display:inline-block;

We will use float property in heading. Float property helps to align elements left or right of container. We can place various elements around it. If we want to remove float property and want html elements to come at new line breaking the float flow, we will use clear property.

Example

Without clear div2 is after div1, since div1 is floated to left the text in div2 is floated around div1 and div2 surrounds it.

With clear property we can move div2 down below div1.The clear property is used in the same direction of float elements. For example, We had floated div 1 to left so we will use clear:left CSS. With use of clear, div2 will come below div1, clear:left;

This is the CSS of h1 heading used,

.logo{
	color:#663399;
	font-size:25px;
	font-family:verdana;
	text-align:left;
	margin-top:0px;
	float:left;
	margin:0px;
	line-height:50px;
	padding-left:9px;
}

We had used line-height property. It defines amount of space above and below html elements. It is used to align two elements on a same line of height.

We will provide padding-left to h1 heading so that some space is on left side before company logo.

Adding search bar

Now we will make search bar using form and input elements. We define form with form tag<form> ... </form>. Make search bar using input element as follows,

<input type="text" name="searchbar" placeholder="search.." size="70">

Since, we will align search bar to right so we will use following property of CSS in form element,

float:right;
display:inline-block;
line-height:52px;
padding-right:14px;

HTML Code with CSS

<!DOCTYPE html>
<html>
	<head>
		<title>Header Demo</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<style>
			.header{
				width:100%;
				height:60px;
				background-color:#E6E6FA;
			}
			body{
				margin:0px;
				padding:0px;
			}
			.logo{
				color:#663399;
				font-size:25px;
				font-family:verdana;
				text-align:left;
				margin-top:0px;
				float:left;
				margin:0px;
				line-height:50px;
				padding-left:9px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h1 class="logo">Website Logo</h1>
			<form style="float:right;display:inline-block;line-height:52px;padding-right:14px;">
				<input type="text" name="searchbar" placeholder="search.." size="70">
			</form>
		</div>
	</body>
</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples