Member-only story
A super-simple, Live CSS Code Editor with no JavaScript
Let’s build a Live Code Editor with just a few lines of HTML and CSS!
You have almost certainly styled anchor elements before using their pseudo-classes (:link, :visited, :hover, :active) but you probably never thought about what :link strictly means.
Apparently, the :link pseudo-class can select elements for styling that function as a link and are not yet visited. These can be <a>, <area>, or <link> elements with a href attribute.
You might wonder why we mentioned the <link> element as a possible element you can style with CSS. It’s clearly an element that is meant to live in the <head> to define certain connections between the current document and other external resources and not to be displayed on the site.
This is how we link CSS files in the HTML document for example:
<link rel="stylesheet" href="style.css">Although not recommended, it’s actually possible to render the <link> on the page by moving it into the <body> element from the <head> and displaying it with CSS. The browser assigns display: none to the element by default which we can change freely:
link {
display: block;
border: 1px solid var(--red);
height: 50px;
}
