Course Content

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

Course Content


How to add Color and Fonts to Page in CSS?

In previous video, we learned about padding and float. Now you want navigation not in list form, but side by side. Let’s see how to do that -

nav ul li{ list-style: none; display: inline-block; }

You will see in browser, all three text of navigation set in side by side. But they appear very far from logo, to show them properly in browser do as directed in video -

nav ul li{ list-style: none; display: inline-block; }
.logo {width: 300px; height: 150px; float: left;}
.logo img{width: 100%; height: 100%}
header{ width: 1000px; clear: both; overflow: hidden}

You will see, in a browser there will be a small pop-up under image which is showing 1000x150.  That means header’s width is increased to 1000px and height is 150px. But, the content is not showing in center; so to make it properly align, we will set margin to auto. As shown in video, define margin in header. Here, it is defined at 0 auto because we don’t require margin at up and down side.

You can set different margin in different ways. In video, you can see different examples of same are shown. You will see all anchor tags are appeared with blue underline. To show them differently, write -

nav ul li a {color: green; text-decoration: none;}

Check in browser the newly defined effect. Now to change the fonts, go to google fonts. Choose any font and copy the link from embed and paste it to CSS. Define font family in body tag. You will see after refreshing, new fonts are applied. To change the font size& case , define it as -

nav ul li a {color: green; text-decoration: none; font-size: 20px; text-transform: uppercase}

Go to browser and check, font size is increased and all fonts are become capital. To give spacing between text use margin or padding as shown in video -

nav ul li{ list-style: none; display: inline-block; margin:10px 5px 8px 12px }

You can apply same spacing too. Save this and see your list will have defined margin. As we define different margin, space between texts is different and not same. Margin will appear as orange and padding will appear as green band as discussed before.


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