{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-style-links-in-css/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

A link can exist in any one of the following five states.

\n

Link

\n\n

Visited

\n\n

Hover

\n\n

Focus

\n\n

Active

\n\n

The following example illustrates the default behavior of links.

\n
<p><a href="”#”">A Link</a></p>
\n
P {\n  margin: 1rem;\n  font-size: 3rem;\n  text-align: center;\n}
\n

We have the following result:

\n

\n \n \n \n \n

\n

Active links

\n

Now click and hold, the link color turns red. Active links are red by default.

\n

\n \n \n \n \n

\n

Styling links

\n

Links are styled using the following order:

\n
a {\n}\n\na:link {\n}\n\na:visited {\n}\n\na:focus {\n}\n\na:hover {\n}\n\na:active {\n}
\n
\n

The order in which you style the links is important because the styles in the first rule will apply to all the subsequent ones.

\n
\n","frontmatter":{"title":"How to Style Links in CSS?","date":"2021-06-22"}}},"pageContext":{"slug":"/how-to-style-links-in-css/","prev":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-1/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/learn-typescript-functions/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}