CSS Element Question

HTML-CSS
1

Question:

Help me understand - why there are two elements for <p> here? Is it not possible to place all of this into one element? What if any are the ramifications if all of the CSS is together?

Thanks for your help in advance. And to the FCC - thanks for the forum! This is awesome to have a place to go and ask questions.

p{
	margin-bottom: 22px;
}

p{
	font-family: Ubuntu, "Ubuntu Condensed", "Ubuntu Light", "Ubuntu Mono";
	color: #656565;
	font-size: 16px;
	line-height: 22px;
}
2

That could be condensed into one style declaration, yes.

1 Like
3

The two should be combined. Having two declarations for the p selector is redundant. The only time would would define two is when a paragraph element <p>, or some paragraph elements should appear different than others on a page.

More info: https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector

// This selector targets every paragraph on the page.
p {
	margin-bottom: 22px;
	font-family: Ubuntu, "Ubuntu Condensed", "Ubuntu Light", "Ubuntu Mono";
	color: #656565;
	font-size: 16px;
	line-height: 22px;
}

// This one sets text color to red for any <p class="red-text">
p.red-text {
	color: red;
}

// Uses the bold version of a font on the paragraph with the id "introduction" <p id="introduction>
p#introduction {
	font-weight: bold;
}

// This one makes the background red for paragraphs 1, 3, 5, 7, 9, etc. on the page.
p:nth-child(odd) {
  background: red;
}
1 Like
4

Jeff, thanks for explaining that to me. I really appreciate this forum.
Cheers.

I can’t handle your awesomeness! lol Thanks again.
cant-handle-it

1 Like