How to make a sidebar

A sidebar consists of links that are tangentially related to the other content of the page. It is repeated across every page.

We'll use <aside> element to make a sidebar. We may use <div> for this purpose. But <aside> element's sole purpose is to make a sidebar.

#aside

Firstly we have to assign some id to the <aside> element. We assign #aside id to the <aside> element.

<style>
#aside{
 width:250px; 
 height:auto;
 background-color:rgb(250,250,250); 
}
</style>
Try </>

Its width is 250px. And its height is set to auto. It means that its height will be changed automatically as the number of links increase.

#aside ul

Place the unordered list of links in this sidebar. <ul> is a child of the <aside> element.

<style>
#aside ul{
 list-style-type:none;
 padding:0px;
 margin:0px;
 border-radius:5px;
}
</style>
Try </>

list-style-type:none; removes the list item markers from the unordered list.

Now you may have a question that why padding and margin are set to zero?

By default, <ul> elment has default value for padding. If we don't set it to zero, there will be space between <li> elements and inner side of <ul>.

margin:0px; removes white space outside the <ul> element.

#aside ul li a

Now we design the links that are children of the list items. Increase the area of each link by padding property.

<style>
#aside ul li a{
 text-decoration:none;
 padding:7px 50px;
 display:block;
}
</style>
Try </>

• text-decoration:none; removes the line that is under the text.

• padding:7px 50px; represents the padding area of the links.

• display:block; is necessary otherwise the inline type links stack over each other.

:hover pseudo class (user interaction)

When a user hovers the mouse over the links, some property of CSS should be changed.

<style>
#aside ul li a:hover{
background-color:rgba(200,200,200,0.5);
}
</style>
Try </>

The background-color of the links changes on hovering the mouse.

heading of side bar.

Now we add the heading at the top of this side bar. The width of heading should be the same as the aside element (i.e. 250px).

<style>
#aside-heading{
 margin:0px; 
 width:250px; 
 padding:5px 0px; 
} 
</style>
Try </>

margin:0px; removes white space outside the heading.

padding property increases the boundary of heading.

border-radius property represents rounded borders.