Fieldsets and Legends in HTML and CSS

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...

[@benitto_rajf6178]

Thank you Steve for doing this great job.

[@mohammadhosein6847]

Cool CSS trick I never saw before , thank you❤️

[@pini01ru]

Thanks for your videos!

[@karthickchandiran2397]

Nice video.til now i haven't use this tags. it will be useful for future development

[@barungh]

Nice animation ... Cool ... :)

[@SteveRB511]

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.

[@SteveRB511]

@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.

[@MohammadMM786]

Facing this issue in chrome 119 also. Is there any way to fix this other than adding negative units to top.Is adding negative units a good fix?

[@AKASH._._.]

well explained

[@userbilas]

+ like from me! cool) as always!-D

[@RahulSingh-rk5dz]

Steve knows how to do some dark magic with css & html.

[@damebanda3180]

How do I align the input elements like the ones in this video?

[@SteveGriffith-Prof3ssorSt3v3]

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 - kzbin.info/www/bejne/noqtp6upnNN6g6M

[@programmingwithdipayan7280]

Everyone:- day by day every subscriber is growing Me:- why steave Griffith channel subscribers are not growing 😭

[@SteveGriffith-Prof3ssorSt3v3]

The more you share, the more it grows. 😀 Thanks for your support.

[@programmingwithdipayan7280]

@@SteveGriffith-Prof3ssorSt3v3 welcome sir. ❤️

[@musicalgames935]

Fullform of rem??

[@SteveGriffith-Prof3ssorSt3v3]

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]

Rem stands for "relative measurement" I think 🤔

[@SteveGriffith-Prof3ssorSt3v3]

@@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

[@programmingwithdipayan7280]

@@SteveGriffith-Prof3ssorSt3v3 ohh 👍👍👍 thank you. 😃😃😃😃😃❤️

[@Viralvlogvideos]

why dont u use space field legend{ } rather then fieldset >lengend{ }?

[@SteveGriffith-Prof3ssorSt3v3]

Using the > turns legend into a child instead of just a descendent. It makes the CSS more specific and more efficient for the browser to run.

[@Viralvlogvideos]

@@SteveGriffith-Prof3ssorSt3v3 oh, I get confused 😥 thanks for explaination may be u should make a video on this topic

[@SteveGriffith-Prof3ssorSt3v3]

Here - kzbin.info/www/bejne/qJDEgZSIer-Vr5I