Adding Margin at the End of an paragraph

Adding Margin at the End of an paragraph
0

#1

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:

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:

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!


#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!