How can I change the font size of my navbar items-CodePudding

I am making a navigation bar for my website and I am relatively new to HTML, I am trying to set the font size of the nav links to 17px but it is not working. When I try it the font size just stays the same.

I tried changing the font in the .nav tag, like this:

<div >
        <div >
            <!-- nav background container -->
        </div>
        <h1 ><span  >Cosmic</span> Studios</h1>
        <div >
            <h1 >Home</h1>
            <h1 >Proxies</h1>
            <h1 >Courses</h1>
        </div>
    </div>

.nav {
    display: flex;
    gap: 25px;
    color: var(--text-color);
    font-size: 17px;
    font-family: 'Manrope';
    font-style: normal;
}

I also tried referencing each individual element, i.e: .home, .proxies. courses etc. but that messed with some other elements, what should I do

CodePudding user response：

I don't know why you're facing this issue. I tried your code and it's changing the size to 17px.

Try refreshing the page after you make some changes or you can use Chrome Developer tool. (Ctr Shift I) Under the element and styles tab you can check if your css is getting suppressed by higher priority css. https://www.w3schools.com/css/css_specificity.asp check out this link for css specificity

CodePudding user response：

HTML :


<div >
      <div >
        <!-- nav background container -->
      </div>
      <h1 ><span >Cosmic</span> Studios</h1>
      <div >
        <h1 >Home</h1>
        <h1 >Proxies</h1>
        <h1 >Courses</h1>
      </div>
    </div>

CSS

  display: flex;
  gap: 25px;
  color: var(--text-color);
  font-size: 17px;
  font-family: "Manrope";
  font-style: normal;
}

Note : It's not a good practice to use <h1></h1> multiple times and <h1></h1> not as nav elements.

CodePudding user response：

you should try to use first-child and nth-child in your css code

<div >
    <div >
    <!-- nav background container -->
</div>
<h1 ><span  >Cosmic</span> Studios</h1>
<div >
    <h1 >Home</h1>
    <h1 >Proxies</h1>
    <h1 >Courses</h1>
</div>`enter code here`

comma in css syntax tells that we will target elements together with the same css command

.nav {
    display: flex;
    gap: 25px;
    color: #000000;
    font-family: 'Manrope';
    font-style: normal;
}
.nav:first-child, .nav:nth-child(2), .nav:last-child{
    font-size: 17px;
}

or tag all h1 elements inside the nav class

.nav h1{
    font-size: 17px;

CodePudding user response：

.nav h1{ 
  font-size: 17px
}

.nav.home, .nav.proxies, .nav.courses {
  font-size: 17px
}