Теги
<a> имеют свой собственный стиль, применяемый браузером, поэтому они на самом деле выглядят как ссылки , поэтому вам, как правило, нужно ориентироваться на них напрямую, чтобы применять собственные стили.
Свойства шрифта обычно наследуются в стилях браузера, поэтому они оформляют ссылки типа:
a {
font-size: inherit;
font-family: inherit;
}
или аналогичные, поэтому они будут применять свойства шрифта, заданные вами для родительских элементов, но цвет и оформление текста не наследуются, они обычно имеют определенный c синий цвет и underline украшение; так как они не наследуют их от родителя, вам нужно напрямую указать элемент тега <a>, чтобы переопределить эти значения;
li a{
font-size: 0.75rem;
font-family: Roboto;
font-weight: 700;
color: #303133;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hello">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header class="header">
<a href="index.html" class="logo">
<img src="img/logo.png">
</a>
<nav class="navlinks">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a>
</ul>
</nav>
</header>