Course Content

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

Course Content


How to Add Content in Page in CSS3?

In last video, we saw how to apply the margin. Let’s see how to give padding. Both functions’ effect is same, but display will have different color band -

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

So, we have made heading. Now, to make content we will create a section in HTML.

<h1>This is  section header</h1>
<img src= “img_name”>
<p> Type your content here</p>

Save and go to browser. You will see, a section header is added and image is also inserted. Now, to make same width of the images, define as follow -

.wrap{width: 1000px; margin: 0 auto;}

Remove margin from header and define a division in HTML -

<div class= “wrap”>

You will see, all content will fall under 1000px width. Now, to change/apply style of fonts -

Section{width: 450px; border: 1px solid red;padding: 20px; box-sizing: border-box;}
Section img{ width: 100%}
h1{font-weight: normal; margin: 0px; margin-bottom: 20px; text-align: center;}
p{font-size: 18 px; color: red;}

Save all changes and go to browser. You will see different styles are applied as per change you made. Also, you can do these all steps one by one as shown in video.

To make another section, define it in HTML. Name it as second section header. Go to browser and check, a new section is added under the first section. Now suppose you want it side by side. To do that, go to CSS and define float as shown in video.


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