Home → The Classics → Farai's Codelab
Elements Typically In The HTMLTag as Well as TheTag Itself Can Be Made Visible With display:block
Published: Updated:
I had a bug where a <style>
tag was being affected by CSS and I found a post on CSS Tricks which explains how style and script tags can be set to display:block. This inspired me to try an make a self-coding portfolio which I’m still working on and will write about. Here’s a proof of concept for my self-coding site.
Turns out CSS can target every element (even fake ones). In fact, the reason elements which are typically in the head
(script
, style
, meta
and link
) is because the browser’s default stylesheet sets their display properties to none
. Here’s a few where these styles are set to display:none
:
- Default Firefox CSS Styles
- Default WebKit/Chrome Styles
- WhatWG Default Styles for HTML5
- W3C Default Styles for HTML4
Actually, you can play around with those elements here on this very page, though it’s a bit buggy.
Set Up
If you want to take this to it’s logical extreme, watch Zach Leaterman’s This Site Is a Tech Talk.