Simple CSS question

HTML-CSS
1

Why does having a class under <style not affect anything under a <div tag?

2

please post the code for which you are asking, as it is I can’t answer your question.

3

it’s not a code issue, It’s just a question. the example code would be something like this.


<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>This text will be hidden

  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

</main>
4

Please be more specific ? What exactly you want?

5

maybe in <style , we write name of the tags which are following after <style . so it changes them , not <div.

6

I just want to know why a class (like p { font-size: 16px} for example) under <style would change a regular <p, but not one under the <div

7

Because p has class . if you would and add in < div class=“red-text” . Would do what you ask for i think.

8

the p in the CSS isn’t a class. It’s targeting an element. If you don’t put a period before the style, you are targeting all <p> tags, therefore, <div> tags wouldn’t be affected. If you wanted the <div> to be affected, you would have to make a div{} style or make a class by putting a period in front of it and assigning it to any <div> tags you wanted it to apply to.

1 Like
9

This answers my question, I think. So <div> works more as something to separate elements from a global tag?

10

<div> is a container. It can take on parameters in CSS and its children will alter their layout to stay within it as long as their CSS position property doesn’t override it and you place enough spaces in text for word wrap to work.

1 Like
11

similar question to before, do you think you can further explain why this <div class="cardText"> works the way it does? Is it just because of the order of things in <style> ?

<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>
12

It is basically using the p and h4 attributes due to the fact that the class named in the <div> tag isn’t defined in the CSS. You would have to put a .cardText {} class with desired attributes for the <div class="cardText"> tag to be affected by your CSS. If you were to put attributes for width and height into it, the text-align and text-justify properties of the h4 and p tags inside it would center and justify according to the defined width and height specified in that class.

1 Like
13

okay, so if the <div> doesn’t have a specified class, it would be unaffected by the general h4 {} and p {}, but since it has a class, but that class isn’t specified it is? or is it because the parent <div> has a class that IS included in the <style>?

Also, thank you for the replies. You’ve been really helpful.

14

Basically, the parent <div> has boundaries, and anything in it will flow within the boundaries as long as you don’t change the position attribute in the CSS. All other attributes will follow the CSS hierarchy pattern. Here is an explanation of the hierarchy:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. It is covered in the FCC lessons, but if you want it all on one page, read the link.

1 Like
15

Wonderful. Thanks so much. I haven’t really had issues with the lessons as much as I am wondering why it works