HTML Course | Building Main Content - Section 1 - GeeksforGeeks

10 Aug, 2021
Course Navigation  
We just completed building the header for our website. Let’s start building the main content for the website. As we described while creating the HTML layout of the website, the main content was divided into three sections as shown below:  
HTML
<!-- Main content between Header and Footer --><main>    <!-- Section 1 of Main content -->    <section>                      </section>      <!-- Section 2 of Main content -->    <section>                      </section>      <!-- Section 3 of Main content -->    <section>                      </section></main>
In this post, we will build the section 1 of the main layout. The section 1 of the main layout is highlighted in the below image:  
Let’s note down the content and some properties of the Section 1 that will be useful in designing:  
Title: It contains a title “Welcome to Our Website”, which is aligned to the center.
Sample Text: It has a sample text or we can say a paragraph just below the title which is also aligned to center.
Let’s start writing HTML for the section 1 of our website, follow the below steps:  
Give the section tag the class container to fix it width to 1200px and align it’s childrens to center.
Create a new div tag inside the section tag with an id “title“.
Add the title “Welcome to Our Website” inside an <h1> tag and assign it an id title.  
Assign the sample tag below the title inside a paragraph <p> tag.
Below is the complete HTML code for Section 1 of Main layout:  
HTML
<!-- Main content between Header and Footer --><main>    <!-- Section 1 of Main content -->    <section>        <div id="welcome">            <h1 class="title">Welcome to our website</h1>                                                      <p>                This is a <strong>Sample Webpage</strong>, a HTML                and CSS template designed by the <a href="https://www.geeksforgeeks.org"                target="_blank" rel="nofollow">GeeksforGeeks Team</a>.                The photos in this template are designed by our                <b>Graphic Design Team</b>. This template is designed                to explain the basics of HTML and CSS in our first                Web Design course.            </p>         </div>             </section>       <!-- Section 2 of Main content -->    <section>                       </section>       <!-- Section 3 of Main content -->    <section>                       </section></main>
After adding the HTML codes the page index.html will look like as below:  
Let’s add styles to the classes to make this look as shown in the template:  
Styling div with id (#welcome): This div will include both the title and the sample text. So set it’s overflow to hidden and use “margin: 0px auto” to align it’s children to center. Also set it’s width to 1000px. Add below code to style.css:  
css
#welcome{    overflow: hidden;    width: 1000px;    margin: 0px auto;}
 
Styling the title h1 tag: Give at top margin of 20px, padding of 20px and align it’s text to center. Add below code to style.css:  
css
#welcome .title{    margin-top: 20px;    padding: 20px;    text-align: center;}
 
Styling the p tag for sample text: Give it a margin from bottom of 40px and align it’s text to center. Add below code to style.css:  
css
#welcome p{    margin-bottom: 40px;    text-align: center;}
 
The complete CSS for styling the section 1 of the main layout is given below:  
CSS
/**********************************//* Styling Main content Section 1 *//**********************************/#welcome{    overflow: hidden;    width: 1000px;    margin: 0px auto;}         #welcome .title{    margin-top: 20px;    padding: 20px;    text-align: center;} #welcome p{    margin-bottom: 40px;    text-align: center;}
That’s it, on opening the index.html file in a browser now, you will see the below output:  
Everything looks fine till now. But there seems to be some problem. The font’s in our project does not seem to be the same as that of the template. We have used the font “Roboto”, but it seems to be not working for some reason.This is because the browser does not support each and every font implicitly. We will have to explicitly define the source of the font within the head tags. Add the below line inside the head tags of index.html file:  
HTML
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
After including the above line within the head tags. Reload your index.html in the browser:  
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
shubham_singh
ysachin2314
HTML-course-basic
HTML5
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?