I am interested in altering the font color

Hey there, I'm new to HTML and CSS and need some help changing the font color and size of my navbar. I've included my code below:

HTML code:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Shoe Website</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="homepage.css">
  </head>
  <body>
    <div class="top-header">
      <a href="">About us</a>
      <a href="">Privacy Policy</a>
      <a href="">Contact us</a>
      <a href="">Terms of use</a>
      
      <div class="middle"> </div>
      <div class="space-end"></div>
    </div>

    <div class="navbar">
      <div class="logo">
      <img src="images/Screenshot 2023-07-09 162710.png">
      </div>
      <div class="navbar">
        <ul>
          <li> <a href="">Home</a></li>
          <li> <a href="">Shop</a></li>
          <li> <a href="">Pages</a></li>
          <li> <a href=""> Contact</a></li>
        </ul>
      </div>
    </div>
    
  </body>

</html>

Here is my CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.top-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #343a40;
  height: 40px;
  width: 100%;
  margin: 0;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 30px;
}
a{
  font-family: 'Poppins', sans-serif;
  width: 120px;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  color: #F4EEE0;
  margin: 0;
}
a:hover{
  color: #176B87;
  transition: 0.3s ease;
}

body, html{
  margin: 0;
  margin: 0;
}
.navbar{
  display: flex;
  flex-direction: row;
}
.logo{
  padding-left: 30px;
  width: 500px;
  
}
ul, li{
  list-style-type: none;
  display: flex;
  color: #000000;
}

I'm looking to change the font color and size of "Home, Shop, Pages, and Contact."

View the output of my code

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.top-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #343a40;
  height: 40px;
  width: 100%;
  margin: 0;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 30px;
}
a{
  font-family: 'Poppins', sans-serif;
  width: 120px;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  color: #F4EEE0;
  margin: 0;
}
a:hover{
  color: #176B87;
  transition: 0.3s ease;
}

body, html{
  margin: 0;
  margin: 0;
}
.navbar{
  display: flex;
  flex-direction: row;
}
.logo{
  padding-left: 30px;
  width: 500px;
  
}
ul, li{
  list-style-type: none;
  display: flex;
  color: #000000;
}
<div class="top-header">
      <a href="">About us</a>
      <a href="">Privacy Policy</a>
      <a href="">Contact us</a>
      <a href="">Terms of use</a>
      
      <div class="middle"> </div>
      <div class="space-end"></div>
    </div>

    <div class="navbar">
      <div class="logo">
      </div>
      <div class="navbar">
        <ul>
          <li> <a href="">Home</a></li>
          <li> <a href="">Shop</a></li>
          <li> <a href="">Pages</a></li>
          <li> <a href=""> Contact</a></li>
        </ul>
      </div>
    </div>

htmlcss

Answer №1

Efforts to modify the color of a elements within li elements by applying color to li will be ineffective due to CSS specificity (as color is already assigned to a in the CSS file).

Therefore, the solution is to 'be more specific'. There are 2 options:

  1. Include the rule ul li a { color: ... } to change the color of the desired elements and remove the color rule from ul li
  2. Alternatively, add ul li a { color: inherit } to inherit the color from the parent

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.top-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #343a40;
  height: 40px;
  width: 100%;
  margin: 0;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 30px;
}
a{
  font-family: 'Poppins', sans-serif;
  width: 120px;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  color: #F4EEE0;
  margin: 0;
}
a:hover{
  color: #176B87;
  transition: 0.3s ease;
}

body, html{
  margin: 0;
  margin: 0;
}
.navbar{
  display: flex;
  flex-direction: row;
}
.logo{
  padding-left: 30px;
  width: 500px;
  
}
ul, li{
  list-style-type: none;
  display: flex;
  color: #000000;
}
ul li a { color: black } // or inherit
<div class="top-header">
      <a href="">About us</a>
      <a href="">Privacy Policy</a>
      <a href="">Contact us</a>
      <a href="">Terms of use</a>
      
      <div class="middle"> </div>
      <div class="space-end"></div>
    </div>

    <div class="navbar">
      <div class="logo">
      </div>
      <div class="navbar">
        <ul>
          <li> <a href="">Home</a></li>
          <li> <a href="">Shop</a></li>
          <li> <a href="">Pages</a></li>
          <li> <a href=""> Contact</a></li>
        </ul>
      </div>
    </div>

Answer №2

If you want to customize the color and font size of the link text within the navbar class, you can use the following CSS:

.navbar a {
  color: blue;
  font-size:18px; /* adjust as necessary */
}

Answer №3

Ensure to add your CSS styles to the document.

For additional information, refer to Link Element.

Update - Corrected CSS rules, check out the last two rules below.


ul, li{
  list-style-type: none;
  display: flex;
}
.navbar ul li a {
  color: #000000;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

cssfile-uploadinput

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

javascripthtmlcssiframecross-domain

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

javascripthtmlreactjsmaterial-ui

Automated downloading based on operating system recognition

1067/5000 How can I use JavaScript to automatically determine the user's operating system on a webpage and then download the correct installation file? Here is the code I have: HTML <!DOCTYPE html> <html> <body> <iframe id=" ...

javascripthtmldownload

Harnessing the power of JSON within an HTML document to display dynamic data

Check out the JSON data through this link: The JSON file contains information about the weather. I need assistance with incorporating the data from the provided link into my HTML document as I am new to utilizing JSON for this purpose. <html> < ...

javascriptjqueryhtmljson

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

javascriptjqueryhtmlcss

How can I retrieve the value of a <span> element for a MySQL star rating system?

Source: GitHub Dobtco starrr JS plugin Implementing this plugin to allow users to evaluate a company in various categories and store the feedback in a MySQL database. Enhancement: I have customized the javascript file to enable the use of star ratings fo ...

javascriptphphtmlmysqltwitter-bootstrap

Obtain User Input from a TextArea Element on an HTML Page using ASP.net

In my asp.net 4.0 project, I am using jTemplates to create a HTML-Page that includes a text area and a submit button. I am looking for a way to retrieve the value entered in the text area when the user clicks on the submit button. Can anyone provide guid ...

asp.nethtmljtemplates

What is the best way to display various dialogs based on the specific button that is clicked?

Starting a new project, I foresee the need for numerous dialog boxes and modals. I've come up with some basic code that displays the dialog when a button is clicked and hides it when the cancel button is pressed. However, I'm facing the issue o ...

jqueryhtmlcssmodal-dialog

What is the best way to create a sidebar that remains open without triggering a new sidebar every time it is clicked

I am looking to add a sidebar that opens a new view without navigating to a different page. The sidebar remains consistent and I want to avoid duplicating it on all pages. Check out this photo for an example. My goal is to provide additional content or fe ...

javascripthtmlcsssidebar

Aligning a rotated paragraph in the middle of its parent container

Here is my current progress: http://jsfiddle.net/2Zrx7/2/ .events{ height:100px; position: relative; } .tt_username{ position: absolute; top:0px; height: 100%; width: 30px; background: #ccc; text-align: center; } .tt_usern ...

javascriptjquerycss

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working. In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the tri ...

cssangular

Resetting the countdown timer is triggered when moving to a new page

In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...

javascripthtml

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

htmlcss

Ways to include margin right for a table

Here is the HTML code I am working with: <table width="100%;> <tr><hr style="width:100%;"></hr></tr> <tr> <span style="float:left">abc</span> <span class="noindex" ...

htmlcss

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

javascriptjquerycss

Utilizing Selenium to pinpoint an HTML element through xpath

Currently, I am in the midst of deciphering a colleague's slightly chaotic HTML as I work on developing a website testing program utilizing Selenium WebDriver in Java. Progress has been made thus far (thanks to some helpful insights from SO), but I ha ...

javahtmlseleniumxpath

Click to dynamically toggle classes with jQuery

I am trying to apply a class called 'select' when I click on a paragraph tag. However, the code I have written doesn't seem to be working. Can someone please provide some suggestions? Here is the code: <style type="text/css"> #el ...

javascriptjquerycss

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

htmlangulartypescriptbootstrap-4