Mastering HTML Div and CSS Styling

Introduction

In this lab, you will learn how to use the HTML <div> tag to divide a web page into different sections or parts. You will also learn how to apply CSS to the elements that are grouped using the <div> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70744{{"`HTML Div Tag and CSS Styling`"}} html/head_elems -.-> lab-70744{{"`HTML Div Tag and CSS Styling`"}} html/text_head -.-> lab-70744{{"`HTML Div Tag and CSS Styling`"}} html/para_br -.-> lab-70744{{"`HTML Div Tag and CSS Styling`"}} html/doc_flow -.-> lab-70744{{"`HTML Div Tag and CSS Styling`"}} end

Creating the Web Page Structure

Open the index.html file in your text editor.

First, create the basic structure of the HTML file by adding the doctype declaration, <html>, <head>, and <body> tags.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body></body>
</html>

In this step, we will add the header section to the web page using the <div> tag.

Inside the <body> tag, add a <div> tag with the class name "header".

<div class="header"></div>

Add some content inside the <div> tag to represent the header section. For example:

<div class="header">
  <h1>Welcome to my website</h1>
</div>

Adding the Sidebar and Main Content Sections

Next, we will add the sidebar and main content sections to the web page using the <div> tag.

Inside the <body> tag, add another <div> tag with the class name "container".

<div class="container"></div>

Inside the "container" <div> tag, add two more <div> tags – one for the sidebar and one for the main content. Give them the class names "sidebar" and "main-content", respectively.

<div class="container">
  <div class="sidebar">
    <!-- add sidebar content -->
  </div>
  <div class="main-content">
    <!-- add main content here -->
  </div>
</div>

Add content inside the <div> tags to represent the sidebar and main content sections. For example:

<div class="container">
  <div class="sidebar">
    <h2>About Me</h2>
    <p>Hi, my name is John and I'm a web developer.</p>
  </div>
  <div class="main-content">
    <h2>My Latest Project</h2>
    <p>Check out my latest web project!</p>
  </div>
</div>

Finally, we will add the footer section to the web page using the <div> tag.

Inside the <body> tag, add another <div> tag with the class name "footer".

<div class="footer"></div>

Add some content inside the <div> tag to represent the footer section. For example:

<div class="footer">
  <p>&copy; 2021 My Website. All rights reserved.</p>
</div>

Styling the Web Page

Now that we have created the basic structure of the web page using the <div> tag, we can apply CSS styles to make the page look better.

Open the style.css file in your text editor, or create a new file named style.css and link it to the index.html file using a <link> tag inside the <head> section.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

In the style.css file, add the following styles to the different class names that we used earlier:

/* Header styles */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Container styles */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Sidebar styles */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Main Content styles */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Footer styles */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Previewing the Web Page

Now that we have created the web page structure and applied CSS styles using the <div> tag, let's preview the web page in a web browser.

Save the index.html and style.css files.
Open the index.html file in a web browser to see the web page.

You should see a web page with a header, sidebar, main content, and footer section, all nicely styled using CSS.

Summary

In this lab, you have learned how to use the HTML <div> tag to divide a web page into different sections or parts. You have also learned how to apply CSS styles to the different sections using the class names assigned to them. With these techniques, you can create more complex and visually appealing web pages.

HTML Div Tag and CSS Styling