CSS Links
Links, also known as hyperlinks, are a crucial component of a website as they enable visitors to navigate through the site. By default, links have an underline and blue color. However, it is possible to modify these styles to create a more customized and user-friendly website.
Styling Links with CSS
A link has four different states — link visited, active, and hover. These four states of a link can be styled differently by using the following anchor pseudo-class selectors.
- a:link — define styles for normal or unvisited links.
- a:visited — define styles for links that the user has already visited.
- a:hover — define styles for a link when the user places the mouse pointer over it.
- a:active — define styles for links when they are being clicked.
We can specify any CSS property you'd like e.g. color, font, background, border, etc. to each of these selectors to customize the style of links, just like you do with the normal text.
The order in which we are setting the style for different states of links is important because what defines last takes precedence over the style rules defined earlier.
Note: In general, the order of the pseudo-classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly
Input:-
[trycss_he order of the pseudo-classes should be the following]
Output(normal link):-
Output(normal link with hover state):-
Modifying Standard Link Styles
In most web browsers, links on web pages have default styles, including underlines and blue color. However, we can customize these styles to create a more visually appealing and user-friendly website.
By default, text links have the following appearances in most browsers:
- Unvisited links: Underlined blue text.
- Visited links: Underlined purple text.
- Active links: Underlined red text.
However, the appearance of links does not change when hovering over them; they retain their default colors (blue, purple, or red) based on their state (unvisited, visited, or active).
Setting Custom Color of Links
To set custom colors for different link states, use the CSS 'color' property. Ensure that the chosen colors provide clear differentiation between normal text and links within the page.
Removing the Default Underline from Links
To remove the default underline from links, use the CSS "text-decoration" property. Alternatively, you can apply other styles to links such as background color, color, bottom border, bold font, etc., to make them stand out from normal text.
Input:-
Output:-
Making Text Links Look Like Buttons
We can also make our ordinary text links look like buttons using CSS. To do this we need to make use of a few more CSS properties such as background-color, border, display, padding, etc.
Input:-
Output:-
