I have some Bootstrap cards that I want to customize with CSS by overriding the default styles.
Card code
<div class="card" style="width: 18rem;">
<img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/information_professional_and_news/non_infopro_news/2020_03_coronavirus/coronavirus_header.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
CSS added in the head tags
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.card{
body {
color: blue;
}
h1 {
color: green;
}
p{
color: red;
}
}
</style>
</head>
In the following snippet
<style>
.card{
I am attempting to target the Bootstrap class "card" and modify its styling.
If someone could help me identify my error and provide a beginner-friendly solution with explanation, I would appreciate it.
Goal: My aim is to apply the provided CSS to style the card. Specifically, I want headings to be green, paragraphs to be red, and the body of the card to be blue. However, the styling in the head section does not seem to affect the card.
What I've tried:
I also attempted to target each element separately as recommended
<style>
.card-body{background-color: blue;}
.card-body{h1: green;}
.card-body{p: red;}
</style>
In this case, the first style (blue) worked but did not change the h1 and p elements as intended.