Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

How Navigation is Helpful to Design a Page in CSS?

Continuing to previous video, we will design logo and navigation.

You can see space in UL. The space between dot and google. What is it called? Right click over there and go to inspect element. You will see a green color band, which define padding. And the orange band defines margin. In right side, you will see user agent stylesheet which is predefined by CSS. We will overwrite it and define our own style as per requirement.

To remove the padding from navigation -

nav ul{ padding: 0 px; } (you will see space is removed and navigation text is touched to margin)

Now to remove dots, you have to define list as one more parent -

nav ul li{ list-style: none; }

To show header in proper way we will define class -

.logo{width: 300px; height: 150px}
.logo img{width: 100%; height: 100%}

Now we don’t want navigation under the image. We want to show it next to our image. For that, CSS offer a property which is named as float. Using float, we can define element or division in right/left direction. Let’s see how float work -

nav{float: right}
.logo{width: 300px; height: 150px; float: left;}

You will see, after refreshing webpage, navigation will move to right direction and image will in left. Same way, by changing the float to left, navigation will come in left direction. So, using float you can change the direction of sections and elements of HTML in CSS.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere