This tutorial explains what the HTML fieldset and legend elements are and how you can style them with CSS. Code from video: gist.github.com/prof3ssorSt3v...
Enjoyed this tutorial, thank you. Just a note: Chrome 86 and Edge 85 on my Mac (Catalina) show the fieldset triangles positioned the the same as your example. Safari 14 and Firefox 80 show the fieldset triangle shifted down about 2 rem from the fieldset border. From my work on Mac and Windows browsers, it seems like the latest versions of Chrome on both OSs seem to be diverging from what I thought were standards(?) as code that has worked for a couple of years on both Firefox and Chrome has required fixes for the more recent versions of Chrome ... more things for my to do list.
@Jack Murimi Thank you, that's a good thing to keep in mind and what I typically do. The triangle issue was just using the code form Steve's GitHub as is. In another instance I had a page background image that that was centered at the top of a page which worked for a couple of years in 8 browsers (4 on Mac, 4 on Windows). Around the first of this year Chrome on Windows started cutting it off on the right and it was not until I added "fixed" to "background" that Chrome displayed it as before.
The CSS is in the code that I attached in the description. If you want more info about CSS Grid and Flexbox I have a playlist - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hYJvxsgnGMA.html
Rem is a very easy unit to use. You set a base value inside the HTML style and then the designer is encouraged to use that value or regular variations of that to create regular visual rhythm.
@@programmingwithdipayan7280 it stands for Root Em. Em is the M-height unit. Root em sets the value in the HTML element so it can be referenced throughout the page
