Divs + classes


#1

HI all,I thought that every single

should be closed a
but I tried not to close any of the later added divs and it worked so how dd that happen here is the code.I also still don’t understand this div thing and how elements inside it are styled so please explain this more
<!DOCTYPE html>
<html>
<head>
  <title>Jetsetter Concierge Travel Planning</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Quicksand:300,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="main">
  <div class="value-props">

  <div class="header">
    <div id="header-text"> <!--Add an id to this div -->
      <h1>Travel Like Never Before</h1>
      <h2>Whether you're looking for adventure or luxury, let us help you plan your perfect getaway.</h2>
    </div>
  </div>

  <div class="partner" > 
    <h4>Proud Partner of Am South Airlines <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_amsoair.png" id="aa-logo" width="150px"></h4>
  </div>

  
    <h3>Why You Should Choose Jetsetter Concierge Travel Planning</h3>
    <p>With over 25 years of experience in concierge, high-end travel planning, we'll provide you with the highest quality services. Every vacation is unique, custom, and tailored to your tastes.</p>

    
      <div class="prop">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_diamond.png" width="60px">
        <h2>Unique</h2>
        <p>We don't do standardized packages because we know everyone wants something different. Every vacation will be uniquely customized to your tastes.</p>
      </div>

      <div class="prop">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_diamond.png" width="60px">
        <h2>Experienced</h2>
        <p>Our quarter century of experience in travel planning combines local knowledge with international taste. You'll be amazed at what we can provide!</p>
      </div>

      <div class="prop">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_diamond.png" width="60px">
        <h2>Luxury</h2>
        <p>We understand that you expect the world of your vacation - Jetsetter can provide once in a lifetime experiences at top of the line quality.</p>
  </div>    
  </body>
</html>

#2

What is a <div>?

A <div> is a HTML generic container tag to wrap up other elements. We use them to group elements. Why?

  1. Styling
  2. To make it more expressive with attributes (like a lang attribute) or microdata
  3. To provide an anchor to do some interactivity with JavaScript

In a nutshell, it’s just a container to group stuff in the HTML.

Does that make sense?

Do I need to close it?

Yes. You need to close the div. To wrap up the stuff inside of the container, you need an opening tag <div> and a closing one </div>.

Think about that.

  • The opening one says: “Hey this is the start of the container.”
  • The closing one says: “Hey, this is the end of the container.”

It wraps up the contents inside of it.

Styling the Element

Styling the stuff in the <div> container is a matter of using the attribute that you’ve assigned to the <div> and then targeting one of the children inside of that container.

Let’s use the code above to style the .prop container.

You can target the container itself like this:

.prop {
  background-color: #000;
}

In the above example, the background-color for the container is black. Everything in that container will be on a black background unless you change it.

Let’s say you want to set the color of the paragraph contents of only that container (meaning no other paragraphs that are not inside of a .prop container, then you could do something like this:

.prop p {
  color: #cc0000;
}

That makes it red. Notice the arrangement.

.prop is the container. p is the element. You are saying: “Hey, I want the paragraph § within the .prop container to be red.” You are targeting it.

Does that make sense?

You’ll learn more about CSS as you move through the course.


#3

Yes now I understand this very well. Just one more question. styling the content of the should be in the style sheet,however,calling the container and putting paragraphs into it should be in the html file,is that correct ?


#4

HTML is what the browser uses to display the structure of the web page.

It’s what software like a browser, web crawlers, and screen readers use to understand the structure and meaning of the blocks of content within a web page. <h1> has a different meaning than a <p> or <div>. We add attributes within the opening tag to give more meaning too such as a lang attribute or even microdata.

Everything on a web page starts with the HTML. JavaScript works with the DOM, which is built from the HTML. CSS works with the HTML.

HTML is the web page’s structure and organization of the content. It provides the meaning too.

CSS then is the look you want to achieve. That stylistic look is applied to the HTML.

Does that make sense?


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.