Reputation: 63
I'm having a hard time with some CSS beginners stuff. I'm currently taking the CodeAcademy CSS course and I've got a doubt right here:
.review {
background-color: #E6EBF5; /* pale blue */
border: 1px solid #003399; /* dark blue */
}
p.review {
font-style: italic;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>MyWebPage</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href= "style.css" type= "text/css" rel="stylesheet">
</head>
<body>
<div class="review">
<h2>The Godfather</h2>
<p>The Godfather (1972) is the greatest movie of all time,
according to numerous surveys of movie critics and audiences alike.</p>
<p>The Godfather is... (your review here)</p>
</div>
<div class="review">
<h2>Avatar</h2>
<p>Avatar (2009) is the highest grossing film of all time,
earning approximately $2.8 billion.</p>
<p>Avatar is... (your review here)</p>
</div>
</body>
</html>
From what I've understood, with the p.review
command I should be styling all <p>
elements with a review
class but that doesn't seem to be the case. Hopefully, someone can explain this to me.
Upvotes: 0
Views: 3697
Reputation: 864
Think of it as a family tree. What you are doing is choosing a child in that family. You can either select all the children of a parent Or you can select all the children with a special property.
In your HTML, review class is given to the parent of "p"
<div class="review">
<p>... some text ...</p>
</div>
To select all children of parent with review class, you need to write:
.review p {
/*your css goes here*/
}
/* OR */
.review > p {
/*your css goes here*/
}
(this means, find all elements with class review, then find all p inside those elements.)
This will select all "p" tags inside the elements with class "review".
But if you want to choose all "p" that have class "review" then your code will be like this:
<div>
<p class="review">... some text ...</p>
</div>
and css will be
p.review {
/*your css goes here*/
}
(this mean, find all p which have class review)
I hope this makes it clear.
Upvotes: 3
Reputation: 11
The p.class selector selects all the p tag elements with that particular class.
When you use .class in CSS it affects all the HTML elements with that class, but when you use HTMLElemet.class (eg.p.large or h1.small), the class only affects that particular HTML element having the specified class.
To style a <p>
element with class review you should use something like
<p class="review" >Text</p>
Upvotes: 1
Reputation: 331
p.review looks for p
element with class review
. But In your code, p
doesn't have any class review
. Only div has class review
.
If you are using
<p class="review">Avatar is... (your review here)</p>
Then p element will display in italic style with red font. I have updated your snippet.
.review {
background-color: #E6EBF5; /* pale blue */
border: 1px solid #003399; /* dark blue */
}
p.review {
font-style: italic;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>MyWebPage</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href= "style.css" type= "text/css" rel="stylesheet">
</head>
<body>
<div class="review">
<h2>The Godfather</h2>
<p>The Godfather (1972) is the greatest movie of all time,
according to numerous surveys of movie critics and audiences alike.</p>
<p>The Godfather is... (your review here)</p>
</div>
<div class="review">
<h2>Avatar</h2>
<p>Avatar (2009) is the highest grossing film of all time,
earning approximately $2.8 billion.</p>
<p class="review">Avatar is... (your review here)</p>
</div>
</body>
</html>
Upvotes: 0
Reputation: 4041
When you use p.review
it really means for every p tag that also has a class review, apply these styles. It does not apply the class review to the p tag. Instead you could just use the selector p
or add the class review
to those p tags you want changed.
Upvotes: 0