The issue arises when the css style for a hyperlink color: black; is placed in an external stylesheet.
In Example 1, where the css is also written inside the html page, everything works perfectly fine without any issues.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<a href="#"> For Question </a>
</body>
<style>
a {
color: black;
text-decoration: none;
}
a:hover {
color: green;
transition: 1s;
}
</style>
</html>
However, in Example 2, where the css is written in an external file and included with a link tag in the html, there seems to be an issue.
It is important to note that avoiding the use of the !important property in css is necessary to maintain customization options for hyperlinks within the same page.
If you can figure out the problem and provide a solution, it would be greatly appreciated.