Div Tags, ID Selectors, & Basic Page Formatting

Dive into the intricacies of HTML and CSS with this comprehensive tutorial. Learn how to use the div tag, assign IDs to divs, set width & max-width, use CSS background-color, add padding inside a div, center content, and more, while understanding fundamental coding principles.

Key Insights

The tutorial provides an in-depth understanding of the div tag and demonstrates its usage in HTML for creating sections of content that can be styled with CSS.
Comparisons are drawn between the div and span tags, explaining how the former is a block element while the latter is an inline element.
Concepts like padding, borders, and background color are explained with practical examples, showing how they can be used to enhance web page design.
The tutorial highlights the use of CSS shorthand and the DRY (Don't Repeat Yourself) principle in coding to write more efficient and elegant code.
Readers learn how to center content in the browser window using the auto property for margins, thereby achieving a balanced layout.
The tutorial emphasizes the importance of good coding practices such as code indentation and the use of specific selectors like IDs for styling unique elements on a page.

Explore this comprehensive HTML and CSS tutorial that covers various topics including the use of div and span tags, setting up page width, adding background color, and creating a fluid layout that adjusts to different screen sizes.

This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this HTML & CSS tutorial:

Dividing up content with the div tag, Assigning IDs to divs, Setting width & max-width, CSS background-color, Adding padding inside a div, Centering content, CSS borders, CSS shorthand & the DRY principle

Exercise Preview

intro to divs

Front End Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Exercise Overview

In this exercise you’ll take more control over the layout of the page, using a div tag (div is short for division). Wrapping content in div tags lets us create sections of content that are grouped together and can be styled with CSS.

Div versus Span

In the previous exercise we used a span tag to do something similar, but here’s the main difference:

Span tags are inline elements, meaning multiple span tags go next to each other in a line.
Div tags are block elements, meaning multiple div tags stack on top of each other.

If you completed the previous exercise, index.html should still be open in your code editor, and you can skip the following sidebar. If you closed index.html, re-open it now (from the News Website folder). We recommend you finish the previous exercises (1C–2A) before starting this one. If you haven’t finished them, do the following sidebar.
If You Did Not Do the Previous Exercises (1C–2A)
1. Close any files you may have open.
2. In your code editor, open index-ready-for-divs.html from the News Website folder.
3. Do a File > Save As and save the file as index.html, replacing the older version in your folder.

Wrapping Content in a Div & Setting a Page Width

Preview the file in a browser so you can see how it looks. Take a moment to click and drag the edge of the browser window in and out to resize the window. Notice how all the content, including the images, wrap to the edge of the browser window. This isn’t all that problematic for the more narrow window size, but if you make the window rather wide, the content stretches out to a point where it is incredibly hard to read.

We can use the <div> tag to get more control over the layout.
Return to index.html in your code editor.
Let’s start to wrap a div tag around all the content in the page. Type the following opening tag (highlighted in bold) just below the opening body tag:
```
</head>
<body>
   <div>
   <h1>
```

As shown below in bold, close the div tag just above the closing body tag (at the bottom of the file):

   <p class="author">This report was inspired by, but not written by <a href="https://www.theonion.com" target="_blank">The Onion</a></p>
   </div>
</body>
</html>

We recommend indenting the lines in between the opening and closing div tags. It’s not required for the code to work, but it makes your code vastly more legible.
Code Indentation Shortcuts

Highlight the line(s) of code and try one of these keystrokes:
- Tab to indent. Shift–Tab to unindent.
- Cmd–] (Mac) or Ctrl–] (Windows) to indent.
  Cmd–[ (Mac) or Ctrl–[ (Windows) to unindent.
Although we currently have only one div, pages typically have multiple divs. Assuming more will be added later, to style this div we should give it a name (either a class or ID). Add the following ID to the opening div tag, as follows:
```
<body>
   <div id="wrapper">
      <h1>
```
We’ll use this ID to apply CSS to this specific div. Do not use spaces or special characters in an ID. How is an ID different than a class? You can apply a class name to multiple elements, but an ID can only be applied to one element in a page.
In the style tag, between the p and .author rules, add the following new rule (highlighted in bold):
```
p {
```
Code Omitted To Save Space
```
}
#wrapper {
   width: 580px;
}
.author {
```
Code Omitted To Save Space
```
}
```
ID selectors use a hash mark (#) prior to the ID name, which tells the browser to find/style an element with that ID. Only one element can use an ID within a page, making ID selectors the most specific type of selector.
Save the file.
Return to the browser and reload the page to see the content reflows to fit within the 580 pixel-wide container.
Resize the browser window narrower than the width of the content. Notice that you have to scroll horizontally to see whatever does not fit inside the window. This is not ideal, but we wanted you to see how width works. There’s an easy way to change this to a flexible, fluid layout that work a bit better in both large and small windows.
Return to index.html in your code editor.
In the #wrapper rule, change width to max-width as shown below in bold:
```
#wrapper {
   max- width: 580px;
}
```
Save the file.
Return to the browser and reload the page.
Resize the browser window narrower than the width of the content and notice that now the content reflows to stay inside the window and you are no longer forced to scroll horizontally. This will be much better for small screens.

Adding a Background-Color

Return to index.html in your code editor.

In the style tag, above all the other rules add a new rule for body (as shown below in bold):

<style>
   body {
      background-color: #bdb8ad;
   }
   h1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 35px;
      color: #006b3a;
   }

Save the file.
Return to the browser and reload the page to see that the color applies to the entire page background (behind all the content).
Return to index.html in your code editor.
Let’s add a white background behind only the text area to make it pop off the page’s background. In the style tag, find the rule for #wrapper and add the following property declaration (in bold):
```
#wrapper {
   max-width: 580px;
   background-color: #ffffff;
}
```
Save the file.
Return to the browser and reload the page to see that the white background is applied only to the content inside the div tag. The body has a different background color that is behind the div.

Adding Padding Inside the Div

The content is very close to the edge of the browser and white background. Let’s add some padding (space between the content and the edge of the containing element) to make it more legible. Return to index.html in your code editor and add the following property declaration (in bold) to the rule for #wrapper:
```
#wrapper {
   max-width: 580px;
   background-color: #ffffff;
   padding: 40px;
}
```
This sets 40 pixels of padding on all four sides: top, right, bottom, and left.
Save the file.
Return to the browser and reload to see more white space around the content.

Centering Content in the Window

Return to index.html in your code editor and add the following two new property declarations (in bold) to the rule for #wrapper:
```
#wrapper {
   max-width: 580px;
   background-color: #ffffff;
   padding: 40px;
   margin-left: auto;
   margin-right: auto;
}
```
NOTE: Margin is space outside of an element. Padding is space inside an element.
Save the file.
Return to the browser and reload the page to see how the browser centers the div in the browser window.

Why does this work? Setting left and right margins (space outside an element) to auto, will automatically make them equal to one another. When the width for an element (such as the div) is smaller than its container (such as the body), the effect horizontally centers the div with its container.

Adding a Border

Return to index.html in your code editor and add the following three new property declarations (in bold) to the rule for #wrapper:
```
#wrapper {
   max-width: 580px;
   background-color: #ffffff;
   padding: 40px;
   margin-left: auto;
   margin-right: auto;
   border-width: 3px;
   border-style: solid;
   border-color: #959485;
}
```
NOTE: The border-style property tells the browser to render the border as a solid line. Other possible values include dashed and dotted.
Save the file.
Return to the browser and reload the page to see the 3-pixel solid border around the white background div.

CSS Clean-up: Shorthand & “DRY”

Instead of specifying the width, style, and color for the border as three separate property declarations, CSS has a method of “shorthand” we can use to write a border style more elegantly.

Return to index.html in your code editor.

Edit your rule for #wrapper as shown below. Note that, instead of three lines of code to describe the border properties, one border declaration can be written like so:

#wrapper {
   max-width: 580px;
   background-color: #ffffff;
   padding: 40px;
   margin-left: auto;
   margin-right: auto;
   border: 3px solid #959485;
}

While we’re cleaning up our CSS, take note of how often we declare font-family: Arial, Helvetica, sans-serif;

A core principle of coding is DRY, which stands for “don’t repeat yourself”. We try to avoid redundancies and write the most elegant code possible.

We can declare the default font-family once (in the body rule) and have all elements inherit this property, because they sit inside the body tag.

Edit your CSS rules as shown below. Delete the font-family declaration from h1 and h2, and instead, place it inside the body rule:

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #bdb8ad;
}
h1 {
   font-size: 35px;
   color: #006b3a;
}
h2 {
   font-size: 24px;
   color: #8f6800;
}

Save the file.
Return to the browser and reload the page. It should look the same as it did before the change, but the code is leaner and more elegant.

Topics covered in this HTML & CSS tutorial:

Exercise Preview

Exercise Overview

Div versus Span

If You Did Not Do the Previous Exercises (1C–2A)

Wrapping Content in a Div & Setting a Page Width

Code Indentation Shortcuts

Adding a Background-Color

Adding Padding Inside the Div

Centering Content in the Window

Adding a Border

CSS Clean-up: Shorthand & “DRY”

How to Learn HTML & CSS