Starting my journey in front-end development with my first website project. Using HTML, CSS, Bootstrap, and Flask.
Encountering an issue where my code is styled like a link instead of plain text. It appears blue and becomes underlined when hovered over.
<div class="container col-md-6 col-lg-5">
<hr>
<p class="lead" id="repo-title">Welcome to the repository of my publications.</p>
<p id="repo-intro">Introduction to repository. This is the sum of my work, from many different projects. It is listed in chronological order. Use the navigation on the left-side to filter through the repository by subject, project or publication format.</p>
</div>
No Bootstrap classes seem to be causing this issue.
The style inheritance from _reboot.scss:13 sets the hover color to blue.
a:hover {
color: #0056b3;
}
Tried to correct with custom CSS:
#repo-title, #repo-intro
{
color:black;
}
#repo-title:hover, #repo-intro:hover
{
text-decoration:none;
}
Font color changed, but underline and cursor change remained upon hover.
Sharing my custom CSS stylesheet for review:
body
{
margin:0;
}
#headline
{
font-size: 64px;
color:white;
}
#headline:link, #headline:visited
{
text-decoration: none;
}
#headline:hover, #headline:active
{
color:white;
}
/* Remaining CSS code omitted for brevity */
Appreciate any guidance on this matter.