• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
CSS Basic
0/1
What is CSS?
00:00
Ways To Add CSS
0/4
Introduction
00:00
Inline CSS
00:00
Internal CSS
00:00
External CSS
00:00
CSS Colors
0/6
Named Colors
00:00
Hexadecimal Colors
00:00
RGB Colors
00:00
RGBA Colors
00:00
HSL Colors
00:00
HSLA Colors
00:00
CSS Selectors
0/1
Introduction
CSS Comments
0/1
Introduction
CSS Text Formatting
0/1
Various types of Text Formatting
00:00
CSS Backgrounds
0/1
Introduction
00:00
CSS Borders
0/1
Introduction
CSS Outline
0/1
Introduction
00:00
CSS Fonts
0/1
Font Family
00:00
CSS Height and Width
0/1
Introduction
00:00
CSS Margins and Paddings
0/2
CSS Margin
00:00
CSS Padding
00:00
CSS Box Models
0/1
What is CSS Box Model?
00:00
CSS Align
0/5
Text Alignment (text-align)
00:00
Horizontal Centering (margin and auto)
00:00
Vertical Alignment
00:00
Grid Centering
00:00
Table Cell Alignment (vertical-align for table cells)
00:00
CSS Icons
0/1
Introduction
00:00
CSS Links
0/1
Introduction
00:00
CSS Lists
0/1
Introduction
00:00
CSS Tables
0/1
Introduction
00:00
CSS Gradient
0/4
How to use CSS Gradients and its Types
00:00
Linear Gradients
00:00
Radial Gradients
00:00
Conic Gradients
00:00
CSS Display Properties
0/1
Introduction
00:00
CSS Max-Width Property
0/1
Introduction
00:00
CSS Positioning Elements
0/1
Introduction
00:00
CSS Z-Index Property
0/1
Introduction
00:00
CSS Overflow
0/1
Introduction
00:00
CSS Float
0/1
Introduction
00:00
CSS Opacity
0/1
Introduction
00:00
CSS Pseudo-classes
0/1
Various Types of Pseudo-classes
00:00
CSS Pseudo-Elements
0/1
Various Types of Pseudo-Elements
00:00
CSS Forms
0/1
Introduction
00:00
CSS Flexbox
0/3
Introduction
00:00
Container Properties
00:00
Item Properties
00:00
CSS Nav
0/2
How to create Vertical Navbar using CSS?
00:00
How to create Horizontal Navbar using CSS?
00:00
CSS Dropdowns
0/1
Dropdown Creation
00:00
CSS Buttons
0/1
Introduction
00:00
CSS Cards
0/1
How to create Cards using CSS?
00:00
CSS Image Gallery
0/1
How create an image Gallery using css?
00:00
CSS Media Queries
0/1
Introduction
00:00
CSS Variables
0/1
What is CSS Variables
00:00
CSS 2D Transforms
0/1
Various types of 2D Transforms
00:00
CSS 3D Transforms
0/1
Various types of 3D Transforms
00:00
CSS Transition
0/1
Types of CSS Transition
00:00
CSS Animation
0/8
What are CSS Animations
00:00
The @keyframes Rule
00:00
Animation Duration
00:00
Animation Delay
00:00
Animation Iteration Count
00:00
Animation Direction
00:00
Animation Timing Function
00:00
Animation Shorthand property
00:00
CSS Grid Layout
0/3
CSS Layout
00:00
Grid Container
00:00
Grid Item
00:00
CSS
About Lesson

How to create Vertical Navbar using CSS?

Cards are versatile components that can be used for displaying various types of content, such as articles, products, or user profiles.

Let’s Create a Card Step By Step:

Write HTML Code:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Navbar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
        <a href="#" class="active">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
</body>
</html>

Write CSS Code:

1. Setting Global Styles:

CSS
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
  • margin: 0;: Resets the default margin of the <body> element to 0, removing any default spacing.
  • font-family: Arial, sans-serif;: Sets the default font family for the entire document to Arial, falling back to a generic sans-serif font if Arial is not available.

2. Styling the Navbar Container:

CSS
.navbar {
    height: 100%;
    width: 200px;
    background-color: #333;
    position: fixed;
    left: 0;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}
  • height: 100%;: Sets the height of the navbar to 100% of the viewport height, making it span the entire height of the browser window.
  • width: 200px;: Sets the width of the navbar to 200 pixels.
  • background-color: #333;: Sets the background color of the navbar to a dark gray color (#333).
  • position: fixed;: Fixes the position of the navbar, so it remains in place even when the user scrolls the page.
  • left: 0;: Positions the navbar flush against the left edge of the viewport.
  • top: 0;: Positions the navbar flush against the top edge of the viewport.
  • overflow-x: hidden;: Hides any content that overflows horizontally, preventing a horizontal scrollbar from appearing.
  • padding-top: 20px;: Adds 20 pixels of padding to the top of the navbar, creating space between the content and the top edge of the navbar.

3. Styling Navbar Links:

CSS
.navbar a {
    display: block;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
}
  • display: block;: Makes the links appear as blocks, causing them to take up the full width of their container and allowing for padding and margins to be applied.
  • color: white;: Sets the text color of the links to white.
  • padding: 10px 20px;: Adds 10 pixels of padding to the top and bottom, and 20 pixels of padding to the left and right of each link.
  • text-decoration: none;: Removes the underline decoration from the links.

4. Styling Navbar Links on Hover:

CSS
.navbar a:hover {
    background-color: #555;
}
  • background-color: #555;: Changes the background color of the links to a darker shade of gray (#555) when hovered over.

5. Styling Active Navbar Links:

CSS
.navbar a.active {
    background-color: #4CAF50;
}
  • background-color: #4CAF50;: Sets the background color of the active link to a green color (#4CAF50). This would typically be used to indicate the currently selected or active page in the navbar.

Output:

Previous
Next