Guide to CSS: Beginner to Expert

div.tooltip_content { background: white; color: @text; border: solid 2px #99c5c4; } .bbcode_tooltip { border-bottom: 1px dotted #99c5c4; }

[sc=bg][sc=box1][center]🐟 watershed 🐟[/center][/sc][sc=box2][center][/center][img]https://f2.toyhou.se/file/f2-toyhou-se/images/65454249_r4KfWwPFWbPNuHe.png[/img][/sc][sc=box1] woaa was playin' w/ float </3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/sc][sc=box1][display=code?]display[/display] [sc=tabbed_interface horizontal][ul] [li]Tab[/li] [li]Tab[/li] [li]Tab[/li] [li]Tab[/li] [li]Tab[/li] [/ul][ ][sc=tab-active]content[/sc][ ][sc=tab]to be continue [b]bold[/b] [i]italic[/i] tooltip is not working for a reason [hide=hide]hide[/hide] [table] [tr] [th=6x1]Boxes[/th] [/tr] [tr] [td][tip=Cute Box][item=Cute Box][/tip] x[inventory=Cute Box][/td] [td][tip=Dainty Box][item=Dainty Box][/tip] x[inventory=Dainty Box][/td] [td][tip=Deluxe Box][item=Deluxe Box][/tip] x[inventory=Deluxe Box][/td] [td][tip=Glittery Box][item=Glittery Box][/tip] x[inventory=Glittery Box][/td] [td][tip=Gorgeous Box][item=Gorgeous Box][/tip] x[inventory=Gorgeous Box][/td] [td][tip=Hard Box][item=Hard Box][/tip] x[inventory=Hard Box][/td] [/tr] [tr] [td][tip=Heavy Box][item=Heavy Box][/tip] x[inventory=Heavy Box][/td] [td][tip=Light Box][item=Light Box][/tip] x[inventory=Light Box][/td] [td][tip=Nifty Box][item=Nifty Box][/tip] x[inventory=Nifty Box][/td] [td][tip=Pretty Box][item=Pretty Box][/tip] x[inventory=Pretty Box][/td] [td][tip=Shiny Box][item=Shiny Box][/tip] x[inventory=Shiny Box][/td] [td][tip=Sinister Box][item=Sinister Box][/tip] x[inventory=Sinister Box][/td] [/tr] [tr] [td][tip=Box Box][item=Box Box][/tip] x[inventory=Box Box][/td] [td][tip=Box Box Box][item=Box Box Box][/tip] x[inventory=Box Box Box][/td] [td][tip=Gragon's Stash][item=Gragon's Stash][/tip] x[inventory=Gragon's Stash][/td] [td=3x1][/td] [/tr] [tr] [th]Total: [math][inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box]+[inventory=Box Box]*21+[inventory=Box Box Box]*126+[inventory=Ledah's Bawkz]*630[/math] [/th] [td=5x1][/td] [/tr] [/table][/sc][ ][sc=tab]content[/sc][ ][sc=tab]content[/sc][ ][sc=tab]content[/sc][ ][/sc][/sc][sc=credit]mine, pixel and oc mine[/sc][/sc] [style] //colors// @accent1: #99c5c4; @accent2: #63807f; @text: black; @accent3: white; // bg // .bg { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189,189,226,1)), color-stop(100%, rgba(134,175,177,1)));; padding: 4px; font: 10px calibri light; color: @text; border-radius: 5px;} .box1 { background: rgba(255,255,255,0.8); border-radius: 5px; color: @text; padding: 8px; margin: 2px 2px 4px 2px; font-size: 15px; text-align: center; } .box2 { background: rgba(134,175,177,0); border-radius: 5px; color: @text; padding: 8px; margin: 2px 2px 4px 2px; font-size: 15px; text-align: center; width:20%; float: right; } .credit { color:white;} a {color: @accent1;} a:hover {letter-spacing: 2px; transition: all 1s; } a:not(:hover){letter-spacing: 0px; transition: all 1s; } .tooltip_content { border: 0.5px solid @text; background: @bkg; min-width:1%; width: fit-content; color: @text; font-size: 10pt; padding: 5px; } .panel { background-color: @accent3; border: 2px solid @accent1; border-radius:5px; box-shadow: none; width: 75%; margin: 0 auto; color: @text; >h3 { background: @accent3; border-bottom: 2px solid @accent1; font-size:10pt; color: @accent2; font-weight:bold; text-align: center; padding:5px;} >div { color: @text; padding: 10px; } } .expbar { padding: 5px; background: @accent3; color: @text; border-radius: 5px; width: 65%; text-shadow: none; border: 5px solid @accent1; } .expbar div { background: @accent1; border-right: 2px solid @accent1; } .expbar span { color: @text; } .bbcode_table { background: transparent; border: 1px solid hidden; } table { border: 0px solid @accent1; padding: 4px; border-collapse: separate; th, td { text-align: center; padding: 5px; border-radius: 5px; border: 2px solid @accent1; color: @text; } th { background-color: @accent3; color: @text; } td { background-color: @accent3; } } table { margin: 0 auto; } .tabbed_interface { border-collapse: separate; >ul { background: none; >li { background: @accent3; color: black; border: 2px solid @accent1; border-radius: 5px; margin: 10px; height: 15px; font-size: 10pt; min-width: 15%; padding: 5px 0px; text-align: center; color: @text; &.tab-active { background: @accent1; border: 2px glow @accent1; color: @accent3; } } } .tab, .tab-active { background: rgba(255,255,255,0); color: @text; border: 0px solid @accent1; box-shadow: none; } } hr { width: 80%; height: 0.5px; border-radius: 5px; background: @accent1; } b,i{color: @accent2;} h1,h2{color: @accent2;} .party > div { background: black; color: white; border: 1px solid white; box-shadow: 3px 3px 3px pink; a:link, a:visited { color: pink; } .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'], .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'], .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'], .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'], .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] { background: white; } .action > .berrybuttons[data-down='sour'] > [data-berry='aspear'], .action > .berrybuttons[data-down='spicy'] > [data-berry='cheri'], .action > .berrybuttons[data-down='dry'] > [data-berry='chesto'], .action > .berrybuttons[data-down='sweet'] > [data-berry='pecha'], .action > .berrybuttons[data-down='bitter'] > [data-berry='rawst'] { background: grey; } .action a[data-berry]:after { border: 2px solid @accent1; border-radius: 5px; } .pkmn:before { border: solid @accent1; background-color: @accent3; } .expbar { border: solid 1px @accent1; color: @text; background: @accent3; border-radius: 5px; >div { background: @accent3; border-right: solid 2px @accent3; } } div.tooltip_content { background: white; color: @text; border: solid 2px #99c5c4; } .bbcode_tooltip { border-bottom: 1px dotted #99c5c4; } }[/style]

Hiya, I'm an absolute beginner when it comes to coding so please explain as simple as possible. When naming a field can you have an image included? How? And then if so, what about the regional flags from the Pokédex? Thanks in advance for any help ^-^

[style] .BoxEndeavorAM { width: 310px; height: 100%; Background: navy; Background-size: 100% auto; color: white; text-align: justify; Font-size: 11pt; border: 3px groove orange; border-radius: 10px; padding: 5px; margin: 0%; padding-top: 10px; padding-left: 3px; box-sizing: border-box; .expbar { background: gray; color: white; border: 2px inset purple; border-radius: 50px; > div { background: blue; border-right: 2px solid black; border-radius: 10px; } } .Credit{ div.tooltip_content { background: #87e3ef; color: black; Font-size: 8pt; a:link {color: navy;} a:visited { color: red; } border: 2.5px solid #18a0b1; border-radius: 5px; margin-left: 122px; margin-top: -85px; position: center; } .bbcode_tooltip { border-bottom: 2px dotted orange; margin-left: 82%; }} a:link { color: #00D9FF; } a:visited { color: red; } div.tooltip_content { background: #87e3ef; color: Black; border: 2px solid #18a0b1; border-radius: 10px; a:link {color: navy;} overflow: display; } .bbcode_tooltip { border-bottom: 2px dotted black; } .panel { border: 2px solid black; border-radius: 15px; &>h3 { > a { color: white; } background: #3919c2; text-align: Center; border-radius: 10px; } &>div { color: #870702; background: #876fec; text-align: center; } } table {margin: 0 auto; border: dashed 3px black; } table th { border: dashed 2px black; color: Black; background: #6E6E6E; border: dashed 2px Black; text-align: center; } table td { border: outset 2px Black; background: #abd8f3; color: black; text-align: center; } .tabbed_interface { background: #2a0875; border: 4px inset Black; border-radius: 10px; box-shadow: 2px #390ca1; Text-Align: justify; & > ul { background: #1d24e2; border: 3.5px ridge #5ae5fa; border-radius:10px; Text-align: Center; & > li { background: #2A0090; border: 5px solid #030001; border-radius: 10px; padding: 2px; border: 2.8px solid #030001; border-radius: 10px; color: white; Text-align: Center; &.tab-active { background: #682bd4; border: 3px outset Gray; Text-align: Center; } } & > li:hover { cursor: pointer; } } > .tab, > .tab-active { background: #3336FF; border: 3px inset #5ae5fa; border-radius: 18px; color: white; text-align: justify; padding-left: 5px; padding-right:3.5px; } } }[/style]

[sc=starcode] [sc=textbox][sc=tabbed_interface horizontal] [ul] [li]Title 1[/li] [li]Title 2[/li] [li]Title 3[/li] [li]Title 4[/li] [li]Title 5[/li] [/ul][ ][sc=tab-active]contents 1[/sc][ ][sc=tab]contents 2[/sc][ ][sc=tab]contents 3[/sc][/sc] [/sc] [/sc] [style] .starcode { background-image: url(https://i.postimg.cc/VL0bGs7M/north-star-g4ce1098a6-1280.jpg); width: 100%; .tabbed_interface { border-collapse: separate; opacity: 70%; border: none; box-shadow: none; & > ul { background: none; opacity: 70%; border: none; margin-top: -30px; & > li { background: black; border: 0px; margin: 5px 3px 50px; text-align: center; vertical-align: baseline; color: #B6C2FB; padding: 0px 0px 5px 0px; &.tab-active { background: black; } } & > li:hover { cursor: pointer; color: #FFFFFF; } } > .tab, > .tab-active { background: black; color: #B6C2FB; opacity: 70%; padding: 5px 15px 10px 10px; box-shadow: none; } } } .textbox { } [/style]

Making them perfectly square could get a little tricky. If your ultimate goal is to have images, icons, or emojis as tabs, it might be easy. Then you could just set fixed heights and widths to match the images, and use flex to space them evenly on large and small screens. But if you're putting text in the tab headers, unless you're very careful you could make the tabs look odd or be hard to use on some devices... you could get weird text overflow issues, and tabs that don't fit correctly on mobile. There may be ways around this, especially if it's your own signature and you know exactly what you're going to put in the tabs. But if it's for others, I'm not sure. (Side note: If this was a post template instead of a signature you might have more options... it's not always ideal but at least you have relatively unlimited vertical space, so if your tabs wrap to a second row it doesn't matter as much. But for a signature, if your tabs are tall since they're squares, and wrap to a new line, they could push all the content right out of the view window)