{"id":2046,"date":"2019-10-21T08:57:00","date_gmt":"2019-10-21T08:57:00","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/uncategorized\/styling-css-links\/"},"modified":"2021-04-27T23:11:17","modified_gmt":"2021-04-27T23:11:17","slug":"css-style-links","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/","title":{"rendered":"CSS Styling Links: How to Style Links in CSS"},"content":{"rendered":"<p>A link represents a connection from one web page to another web page. This CSS property can be used for linking styles in different ways. In this article, you will learn how to set different properties of a hyperlink using the CSS property. So, let&#8217;s see the best practices for styling links.<\/p>\n<p>The first thing to understand is the concept of link states, different states in which there may be links that can be designed using different pseudo-classes:<\/p>\n<ul>\n<li><strong>unvisited link<\/strong>: is the default state in which a link is located, more precisely when it is not in any other state. It can be designed in a specific way using the link pseudo class.<\/li>\n<li><strong>visited<\/strong>: represents a link that has already been accessed, visited, styled using the: visited pseudo class.<\/li>\n<li><strong>active<\/strong>: represents a link that is activated by clicking on the link, styled using the: active pseudo class.<\/li>\n<li><strong>hover<\/strong>: represents a link that, once the user hovers over the link, the property is activated, styled using the: hover pseudo class.<\/li>\n<li><strong>focus<\/strong>: represents a link that has been focused (example: the user moves the action to a page element using the Tab key or programmatically focused using HTMLElement.focus ()), styled using the: focus pseudo class<\/li>\n<\/ul>\n<p>Here is an example of a simple link:<\/p>\n<pre class=\"brush:javascript\">&lt;!DOCTYPE html&gt; \n&lt;html&gt; \n&lt;head&gt; \n&lt;title&gt;CSS links&lt;\/title&gt; \n&lt;style&gt; \np { \n   font-size: 30px; \n   text-align: center; \n   }          \n&lt;\/style&gt; \n&lt;\/head&gt; \n&lt;body&gt; \n&lt;p&gt;&lt;a href=\"https:\/\/www.herbalife.com\"&gt;Example for a simple link&lt;\/a&gt;&lt;\/p&gt; \n&lt;\/body&gt;     \n&lt;\/html&gt;<\/pre>\n<p><img alt=\"CSS Links Fig1\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-Links-Fig1.jpg\" style=\"border: 0px none;\" width=\"408\" \/><\/p>\n<p>You can see some things as you explore the default styles, namely that links that have not been accessed are blue, links are highlighted, links visited are purple, focused links have a contour around them and the active links are red.<\/p>\n<p>The default styles can be modified or deactivated, using the following CSS properties: mouse pointer style cursor, text color and text outline.<\/p>\n<p>Here is an example using the text-decoration property:<\/p>\n<pre class=\"brush:javascript\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\np { \n   font-size: 30px; \n   text-align: center; \n   }          \n\na:link {\n  text-decoration: none;\n}\na:visited {\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\na:active {\n  text-decoration: underline;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;p&gt;&lt;b&gt;&lt;a href=\"default.asp\" target=\"_blank\"&gt;Here is a link&lt;\/a&gt;&lt;\/b&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><img alt=\"CSS Links Fig2\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-Links-Fig2.jpg\" style=\"border: 0px none;\" width=\"369\" \/><\/p>\n<p>Here is another example, this time using the background-color property:<\/p>\n<pre class=\"brush:javascript\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\np { \n   font-size: 30px; \n   text-align: center; \n   }          \na:link {\n  background-color: coral;\n}\na:visited {\n  background-color: cyan;\n}\na:hover {\n  background-color: DarkMagenta;\n}\na:active {\n  background-color: DarkSalmon ;\n} \n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;p&gt;&lt;b&gt;&lt;a href=\"default.asp\" target=\"_blank\"&gt;This is a link&lt;\/a&gt;&lt;\/b&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><img alt=\"CSS Links Fig3\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-Links-Fig3.jpg\" style=\"border: 0px none;\" width=\"354\" \/><\/p>\n<p>Advanced CSS link buttons: to create a link button, use some CSS-style properties, so you can create the box and make it interactive. You will need the color property to set the color of the text representing the link, the background color to add color to the button itself, the text-decoration to remove the underline from the link, the text-align property to set the alignment of your link, the display property to describes how your link and padding property should be displayed and determine how big your button will be.<\/p>\n<p>Here is the example:<\/p>\n<pre class=\"brush:javascript\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\na:link, a:visited {\n    background-color: DarkSalmon ;\n    border: none;\n    color: #FFFFFF;\n    padding: 25px 52px;\n    text-align: center;\n    -webkit-transition-duration: 0.4s;\n    transition-duration: 0.4s;\n    text-decoration: none;\n    font-size: 20px;\n    text-align: center; \n    cursor: pointer;\n    display: inline-block;\n}\na:hover, a:active {\n    background-color: DarkRed ;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;body&gt;\n\t&lt;a href=\"http:\/\/www.tennis.com\" target=\"_blank\"&gt;BUTTON&lt;\/a&gt;\n&lt;\/body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><img alt=\"CSS Links Fig4\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-Links-Fig4.jpg\" style=\"border: 0px none;\" width=\"189\" \/><\/p>\n<p>All the properties we have used before can be used in other ways too. For example, states such as hover can be used to style many different elements, not just bindings.<\/p>\n<p>Links are often stylized enough to look and behave like buttons in certain situations. A navigation menu is marked as a list containing links, and this can be easily designed to look like a set of control buttons, giving the user access to other parts of the site. See the example below:<\/p>\n<pre class=\"brush:javascript\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody,html {\n  margin: 0;\n  font-family: sans-serif, arial, helvetica;\n}\nul {\n  padding: 0;\n  width: 100%;\n}\nli {\n  display: inline;\n}\na {\n  outline: none;\n  text-decoration: none;\n  display: inline-block;\n  width: 19.5%;\n  margin-right: 0.625%;\n  text-align: center;\n  line-height: 3;\n  color: white;\n}\nli:last-child a {\n  margin-right: 0;\n}\na:link, a:visited, a:focus {\n  background: DarkSalmon ;\n}\na:hover {     \n  background: DarkRed ;\n}\na:active {\n  background: red;\n  color: white;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;ul&gt;\n  &lt;li&gt;&lt;a href=\"#\"&gt;Tournaments&lt;\/a&gt;&lt;\/li&gt;&lt;li&gt;&lt;a href=\"#\"&gt;Scores&lt;\/a&gt;&lt;\/li&gt;&lt;li&gt;&lt;a href=\"#\"&gt;News&lt;\/a&gt;&lt;\/li&gt;&lt;li&gt;&lt;a href=\"#\"&gt;Videos&lt;\/a&gt;&lt;\/li&gt;&lt;li&gt;&lt;a href=\"#\"&gt;PLAYERS &amp; RANKINGS&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><img alt=\"CSS Links Fig5\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-Links-Fig5.jpg\" style=\"border: 0px none;\" width=\"520\" \/><\/p>\n<p>Let&#8217;s see what happens in the example below, focusing on the most interesting parts. Therefore, the second rule eliminates padding from element &lt;ul&gt;, once again setting its width for 100% of the outer container, in our &lt;body&gt;&nbsp;case.<\/p>\n<p>&lt;li&gt;&nbsp;Elements are implicitly locked, which means they will be on their own lines. Thus, we will create a horizontal list of links, so that we set in the third rule the property of the line display, which results in the items on the list being on the same line with each other, behaving as some elements arranged inline. The most complicated rule is the number four rule, the one that stylizes the &lt;a&gt;&nbsp;element. So, we start by turning off the decoration and the default text of the text. After we set the display inline; the &lt;a&gt;&nbsp;elements are displayed implicitly inline, not wanting them to fall on their own lines, so we will use inline-block to be able to size them.<\/p>\n<p>Next, we set the display to the inline line &#8211; the &lt;a&gt;&nbsp;elements are inline by default and, although we do not want them to spill on their own lines, as they would reach a block value, we want to be able to resize them. Inline-block allows this. For dimensioning, we want to fill the whole width of the element &lt;ul&gt;, leaving a small space between each button. After that, we set the width and the space between each button. The last statements are relatively simple and are meant only for cosmetic purposes. We set the line height to 3 to give the buttons a certain height and at the end we set the text color to white.<\/p>\n<h3>Conclusion<\/h3>\n<p>I hope this article gives you all the necessary information about links and their customization. Practicing the examples above, you will surely gain the experience needed to create high-level CSS links.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A link represents a connection from one web page to another web page. This CSS property can be used for linking styles in different ways. In this article, you will learn how to set different properties of a hyperlink using the CSS property. So, let&#8217;s see the best practices for styling links. The first thing [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":930,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30588,30618],"tags":[6587,4810,15498,30867,30665,2544],"b2b_audience":[29,37,34],"b2b_industry":[],"b2b_product":[131,68,129,86,93,94,67,113,117,98],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Styling Links | How to Style Links in CSS | HTML Goodies<\/title>\n<meta name=\"description\" content=\"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Styling Links | How to Style Links in CSS | HTML Goodies\" \/>\n<meta property=\"og:description\" content=\"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Goodies\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-21T08:57:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-27T23:11:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"290\" \/>\n\t<meta property=\"og:image:height\" content=\"195\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:site\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Octavia Anghel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\",\"name\":\"HTML Goodies\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/htmlgoodies\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"width\":584,\"height\":136,\"caption\":\"HTML Goodies\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"name\":\"HTML Goodies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.htmlgoodies.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg\",\"width\":290,\"height\":195},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage\",\"url\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/\",\"name\":\"CSS Styling Links | How to Style Links in CSS | HTML Goodies\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage\"},\"datePublished\":\"2019-10-21T08:57:00+00:00\",\"dateModified\":\"2021-04-27T23:11:17+00:00\",\"description\":\"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.htmlgoodies.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Styling Links: How to Style Links in CSS\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/61f4f54b2128148c9ee5f1b96ee37a86\"},\"headline\":\"CSS Styling Links: How to Style Links in CSS\",\"datePublished\":\"2019-10-21T08:57:00+00:00\",\"dateModified\":\"2021-04-27T23:11:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage\"},\"wordCount\":806,\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg\",\"keywords\":[\"Cascading Style Sheets\",\"CSS\",\"hyperlinks\",\"Link\",\"links\",\"Web development\"],\"articleSection\":[\"CSS\",\"HTML5\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/61f4f54b2128148c9ee5f1b96ee37a86\",\"name\":\"Octavia Anghel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86d4c860b70a8d2409c96f2537d26f4d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86d4c860b70a8d2409c96f2537d26f4d?s=96&d=mm&r=g\",\"caption\":\"Octavia Anghel\"},\"url\":\"https:\/\/www.htmlgoodies.com\/author\/octavia-anghel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Styling Links | How to Style Links in CSS | HTML Goodies","description":"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/","og_locale":"en_US","og_type":"article","og_title":"CSS Styling Links | How to Style Links in CSS | HTML Goodies","og_description":"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.","og_url":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/","og_site_name":"HTML Goodies","article_published_time":"2019-10-21T08:57:00+00:00","article_modified_time":"2021-04-27T23:11:17+00:00","og_image":[{"width":290,"height":195,"url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@htmlgoodies","twitter_site":"@htmlgoodies","twitter_misc":{"Written by":"Octavia Anghel","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.htmlgoodies.com\/#organization","name":"HTML Goodies","url":"https:\/\/www.htmlgoodies.com\/","sameAs":["https:\/\/twitter.com\/htmlgoodies"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","width":584,"height":136,"caption":"HTML Goodies"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.htmlgoodies.com\/#website","url":"https:\/\/www.htmlgoodies.com\/","name":"HTML Goodies","description":"","publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.htmlgoodies.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg","width":290,"height":195},{"@type":"WebPage","@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage","url":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/","name":"CSS Styling Links | How to Style Links in CSS | HTML Goodies","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage"},"datePublished":"2019-10-21T08:57:00+00:00","dateModified":"2021-04-27T23:11:17+00:00","description":"Learn how to set different properties of a hyperlink using the CSS property and discover the best practices for styling links. Click here to learn how.","breadcrumb":{"@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.htmlgoodies.com\/css\/css-style-links\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.htmlgoodies.com\/"},{"@type":"ListItem","position":2,"name":"CSS Styling Links: How to Style Links in CSS"}]},{"@type":"Article","@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#article","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage"},"author":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/61f4f54b2128148c9ee5f1b96ee37a86"},"headline":"CSS Styling Links: How to Style Links in CSS","datePublished":"2019-10-21T08:57:00+00:00","dateModified":"2021-04-27T23:11:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#webpage"},"wordCount":806,"publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/css\/css-style-links\/#primaryimage"},"thumbnailUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/CSS-GettyImages-675366990.jpg","keywords":["Cascading Style Sheets","CSS","hyperlinks","Link","links","Web development"],"articleSection":["CSS","HTML5"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/61f4f54b2128148c9ee5f1b96ee37a86","name":"Octavia Anghel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86d4c860b70a8d2409c96f2537d26f4d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86d4c860b70a8d2409c96f2537d26f4d?s=96&d=mm&r=g","caption":"Octavia Anghel"},"url":"https:\/\/www.htmlgoodies.com\/author\/octavia-anghel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/2046"}],"collection":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/comments?post=2046"}],"version-history":[{"count":0,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/2046\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media\/930"}],"wp:attachment":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media?parent=2046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/categories?post=2046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/tags?post=2046"},{"taxonomy":"b2b_audience","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_audience?post=2046"},{"taxonomy":"b2b_industry","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_industry?post=2046"},{"taxonomy":"b2b_product","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_product?post=2046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}