I am experimenting with a pre-fabricated theme in Hugo and incorporating some Bootstrap codes. I want to change the color of all links when displayed or hovered over. Despite searching extensively, I have been unable to achieve this through the use of CSS selectors like a:link{...}, a:visited{...}, a:hover{...}, a:active{...}. I've even tried including the following line in my HTML:
<link rel="stylesheet" href="kitab.css">
after someone suggested it, but unfortunately, none of these approaches have worked. The links still appear blueish, and I am struggling to figure out how to properly connect my HTML with the CSS. The HTML snippet includes clickable titles corresponding to pages on the site:
<ul class="list-unstyled ml-1 mb-0 border-top border-warning pt-2">
{{ range first 4 .Pages }}
<li>
<a href="{{ .Permalink }}">
<p class="mb-1">
{{ .Title }}
</p>
</a>
</li>
{{ end }}
</ul>
This is the complete CSS code I currently have:
html {
scroll-behavior: smooth;
}
body {
font-family: "Roboto", sans-serif;
background-color: whitesmoke;
overflow-y: scroll;
min-width: 250px;
}
nav {
height: 40px;
}
main {
min-height: calc(100vh - 100px);
border-radius: 10px;
}
.side-bar {
width: 25px;
position: fixed;
top: 70px;
}
footer {
font-size: 0.9em;
margin-left: 35px;
}
.nav-menu {
/* color: #007bff !important; */
font-size: 1.5em;
}
.nav-menu:hover {
/* color: #0056b3 !important; */
cursor: pointer;
}
.nav-menu-disabled {
/* color: #4e4f50 !important; */
font-size: 1.5em;
}
/* link colors specification */
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
.book-cover {
color: white;
/* background-color: #24242499; */
}
.bookTitle {
position: absolute;
top: 2%;
left: 5%;
}
.bookAuthor {
position: absolute;
bottom: 2%;
right: 5%;
}
.show {
transition: all 0.1s;
}
.hanging {
padding-left: 15px;
text-indent: -15px;
}
/*
ul.nav li a, ul.nav li a:visited {
color: orange !important;
}
ul.nav li a:hover, ul.nav li a:active {
color: orange !important;
}
ul.nav li.active a {
color: orange !important;
}
*/
#copiedMessage {
position: fixed;
display: table-cell;
line-height: 100px;
width: 224px;
height: 100px;
text-align: center;
top: calc(50% - 50px);
left: calc(50% - 112px);
transition: all 1s;
}