Adding Margin at the End of an paragraph

1

grafik
grafik1920×1080 329 KB

Why doesn’t this work? I’m using the bulma framework.
https://codepen.io/wulfheart/pen/VPVJvd
Thanks for your help.

2

After inspecting your paragraph tag, I can see that the styles from minireset.sass (which is part of the bulma framework you’re using) is overriding your Codepen’s p styles:

image
image2234×798 223 KB

What I’d do to fix this is to move the inclusion of the Bulma framework’s stylesheet from the HTML of your Codepen to the CSS settings in your pen, here:

image
image1768×828 128 KB

This should make it so that your styles are added in the desired order, so that the reset styles are applied before your Codepen styles are applied.

Working example: https://codepen.io/tetchi/pen/aEWxOP

Good luck!

1 Like
3

Thanks you so much. I didn’t consider using the dev tools because I don’t even know what Sass is as I’m a beginner.

Did I understand it correctly:

  1. Delete the stylesheet reference in the html head
  2. Import the stylesheet from bulma with the deleted link.
  3. Success?

Edit: ok. It works. But why? I’m just curious. @tetchi

4

Edit: ok. It works. But why? I’m just curious.

any time, @Wulfheart! I would say this has more to do with CSS order than Sass (which you can learn more about later in your journey)! In a nutshell, CSS will apply the style rule that comes last in the stylesheet. So in the example below, if you have two styles for the same element, the last one (color: red;) will apply.

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

This is essentially what was happening in your first Codepen:

// from your codepen
p { 
  text-align: justify;
  margin-bottom: 20px;
}

// from minireset.sass
p {
  margin: 0;
  padding: 0;
}

Notice how both stylesheets are targeting p, and how the style from minireset.sass comes after your style, thus overriding it? By flipping the order as you did, you basically said “ok, apply the styles from minireset.sass first, and THEN apply my own styles from Codepen!”

It’s important to note that the order rule is kicked out the window as soon as you get into specifity, but we won’t get into that yet :sweat_smile:

Sorry for the long post. Let me know if anything is unclear!