Two Questions regarding the interaction between HTML & CSS in the code (Part 12)


#1

Hi,

I just finished part 7 of the course and thought I understood everything in there. So at step 12 I decided to play a bit with the code.
https://www.codecademy.com/en/courses/learn-html-css/lessons/ids-classes-divs/exercises/review-class-id-divs

I encountered two parts in style.css which don't seem to interact with index.html the way I was expecting. Below should be the complete standard code for the HTML and CSS file of the course bar some minor style changes in the CSS.

index.html

<!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="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"> <!--Add a class to this div -->
    <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>
  

  <div class="main">
    <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="value-props">  
      <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>
</div>
  </div>

</body>
</html>
style.css

body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
}

.header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_canyon.jpeg");
  background-position: center center;
  background-size: cover;
  height: 700px;
  width: 100%;
}

/* Add the ID selector to this CSS rule */

#header-text {
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: 25%;
  width: 60%;
}

h1 {
  color: #FFF;
  font-family: 'Quicksand', sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 60px;
  margin: 0;
}

h2 {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 28px;
  font-weight: 100;
}

h3 {
  color: #FFF;
  font-family: 'Quicksand', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 30px;
  margin: 10px 0px;
  text-align: center;
}

h4 {
  color: #CCC;
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 300;
}

p {
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 100;
  line-height: 24px;
  margin: 0 auto;
  text-align: center;
  width: 60%;
}

/* Add the class selector to this CSS rule */

.partner {
  padding: 20px;
  margin: 0 auto;
  border-bottom: 1px solid #EEE;
}

.partner img {
  position: relative;
  top: 6px;
}

.aa-logo {
  padding-left: 6px;
}

.main {
  background: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/shards.png");
  margin: 0;
  padding: 40px;
}

.value-props {
  margin: 40px auto;
  width: 60%;
}

.prop {
  border: 1px solid #FFF;
  padding: 40px 0px;
  margin: 5px 0px;
}

.prop h2{
  font-family: Times, serif;
  font-size: 24px;
}

.partner, .prop {
  text-align: center;
}

First question
It refers to the following part in style.css:

.prop h2{
  font-family: Times, serif;
  font-size: 34px;
}

I don't fully understand the syntax of .prop h2{...} here. The way I understand it, it should either be

  1. .prop, h2{..} if h2 and .prop should be styled both or
  2. h2.prop{..} if the h2 element of "prop"-class should be styled

At least those two syntaxes where explained in the course. Now the code behaves like I would expect for option 2, but if I actually change it to that syntax the font changes are then ignored.
What's going on here?

Second Question:
The very last selector in the style.css

.partner, .prop {
  text-align: center;
}

If I change the text-align from center to right for example, it seems to affect the "partner"-class and the img-object of the "prop"-class but not the h2- and p-element of the "prop"-class. I was kind of expecting these two to also change.
What am I missing here?

Thanks & hope you can help,
j3tho


#2

If you could give the FULL code you are using
and mention what kind of device/operating system you are using....


#3

I provided the full code of the exercise already in the opening post (it's hidden, so you have to click on it).
I'm running the course on macOS 10.12.5 / Safari 10.1.1


#4

As answer to the question concerning the Selector syntax
you must know about the Document Object Model
and must know the usage of parent , child , descendants
read
https://discuss.codecademy.com/t/6-paragraphs-and-headings/27418
and have a look at
https://www.w3schools.com/jquery/trysel.asp


#5

For the second question
you should learn more about
block-level HTML elements
and
in-line elements

Do a google search
in-line site:developer.mozilla.org
and
block site:developer.mozilla.org

and look at the results of the search in knowledge-base of stackoverflow.com
css block level elements vs inline elements site:stackoverflow.com


#6

Ok, so the way I understand it from
https://www.w3schools.com/cssref/css_selectors.asp and
https://www.w3schools.com/cssref/trysel.asp

  1. .prop, h2 {...} selects all h2-elements and all elements with the "prop"-class
  2. .prop h2 {...} selects every h2-element (child) inside the "prop"-class (parent)
  3. h2.prop {...} selects every h2-element that has the "prop"-class

Is this correct?

I also tried to find an answer for my second question:
So to me it seems the reason why changing the text-align has no effect on the h2- and p-element in "props" is that the type-selectors for h2 and p at the beginning of the CSS-file simply have a higher priority (specificity) than the .partner, .prop{...} class selector.

Is this also correct?


#7

I my view your first question is answered....

To your second question...
You should do a google search
does a inline element inherit from a block level element site:stackoverflow.com
because we are talking about inheritance

get yourself an editor
Here's a list of some of the ones ( all free):
http://www.pnotepad.org/ ( favorite for quick scripts)
https://notepad-plus-plus.org/
http://brackets.io/

Create a HTML document on your computer
and try ....

<!DOCTYPE html>
<html>

  <head>
    

<style>
h1 {
  background-color: black;
  color: #FFF;
  /* font-family: 'Quicksand', sans-serif; */
  font-size: 70px;
  font-weight: 400;
  line-height: 60px;
  margin: 0;
}
h2 {
  background-color: blue;
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-align: center;  /*<<<<< CENTER  */
  font-size: 28px;
  font-weight: 100;
}

p {
  background-color: blue;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 100;
  line-height: 24px;
  margin: 0 auto;
  text-align: center;  /*<<<<< CENTER  */
  width: 60%;
}
div div div {
  background-color: red;
  border: 1px solid #FFF;
  padding: 40px 0px;
  margin: 5px 0px;
}

div div div {
  /* margin: 0; */
  /* text-align: center; */
  text-align: right; 
  }
</style>  
  </head>

  <body>
   <div>
    <div>
     <div>
       <h1>This is the H1</h1>
       <p>This is the paragraph</p>
       <h2>This is an aligned center H2</h2>
     </div>
    </div>
   </div>
  </body>

and look at how the H-elements behave "going full width"
in contrast to the behaviour of a P-element.......


#8

Ok so, I finally got it. :+1:
The example you posted was a good starting point, but actually creating my own minimal HTML document helped a lot as you immediately start thinking about the DOM. Should have thought about that earlier!

There is just one last thing I'm unsure about (maybe I haven't fully understand your point, yet):

Why do you specifically talk about the inherence between block- and inline elements? As far as I can tell, your example only contains block-elements (div, h1...h6, p).


#9

I wrote about inheritance to make you aware to that phenomenon...
google search and read articles of people encountering all sorts of problems....
inheritance inline elements vs block level elements site:stackoverflow.com

<img>is not a block-level element ??
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

And as you are starting to develop it is nice to know what happens when....
https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#10

Yeah, but the example you provided didn't have an inline-element.

Anyway, thanks for your time and help. :+1::+1:
I got a much better general understanding of HTML now.


#11

but plse do read what and in what order, happens when you load a HTML-page into your Browser !!!


#12

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