I have the following boostrap cards and I want to style them (override the existing style) by using some css.
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>
What I've tried to add in the css (in the head tags)
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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 this bit
<style>
.card{
I am trying to refer to the bootstrap class card, and change its style.
Can anyone point out what I am doing wrong with a solution and adequate explanation for a beginner please.
Goal: The goal is to style the card using the css that I have provided. For instance for the card's p and h1 tags to be styled as I've specified. In this case the headings in the cards to be green and the paragraphs to be red and for the body of the card to be blue.
For some reason the styling applied in the head does not apply to the card.
What I've tried:
I've also tried doing each one seperately as suggested
<style>
.card-body{background-color: blue;}
.card-body{h1: green;}
.card-body{p: red;}
</style>
In the above case, the first style (blue) worked but it didn't change the h1 and p.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
