0

I am trying the understand the CSS and building the simple app. In this website there is a text under a div like that

<div className='app__navbar-name'>   
     <h1>ASDAS</h1>
</div>

My aim here is to change that font and color of the ASDAS. So I wrote this CSS code

.app__navbar-name{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

which change the color of the text but not the font. So I needed the write an additional in HTML and CSS like that.

HTML Code

<div className='app__navbar-name'>   
    <h1 className='app__navbar-namefont'>ASDAS</h1>
</div>

And CSS code

.app__navbar-name{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.app__navbar-namefont{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

Which did the job. Is there any reason the font family change did not affect the div section and needed to write additional code? I am doing this HTML and CSS changes in React so I am also tagging React.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Lapaaci
  • 119
  • 7
  • 1
    There's likely CSS in there that targets `h1` elements. `h1` is more specific than `.app__navbar-name`, but less specific than `.app__navbar-namefont`. You could probably have done `.app__navbar-name h1 { font-family: .... }` also. – Heretic Monkey Jan 11 '23 at 21:43
  • 1
    Does this answer your question? [How are the points in CSS specificity calculated](https://stackoverflow.com/questions/2809024/how-are-the-points-in-css-specificity-calculated) – Heretic Monkey Jan 11 '23 at 21:47

0 Answers0