I’m a beginner struggling with the basic task of changing Bold Text Color in a pre-scripted scss file. I just can’t find an obvious solution.
The API appears to predefine color parameters and I struggle to find how to change them before or after importing the embbeded code.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
:root {
--font-body: "Source Sans Pro";
--font-header: "Inter";
--font-mono: "Fira Code"
}
// typography
html {
scroll-behavior: smooth;
&:lang(ar) {
& p, & h1, & h2, & h3, article, header {
direction: rtl;
text-align: right;
}
}
& footer > p {
text-align: center !important;
}
}
.singlePage {
padding: 4em 30vw;
margin: 0 auto;
max-width: 1000px;
@media all and (max-width: 1200px) {
padding: 25px 5vw;
}
}
body {
margin: 0;
height: 100vh;
width: 100vw;
max-width: 100%;
box-sizing: border-box;
background-color: var(--light);
}
I expect the body of the text to change to the color pink (#ff82b2) when bolded. And I tried to change that by tweaking parameters in the provided scss file.
2
Answers
You can add styles for the b and strong tags.
This will not affect headings (h1, h2, etc.) which are bold by default, or other elements, that are styled to be bold elsewhere.
I would do that was suggest above but put that inside the body style but before the closing }