Single post in Guide to CSS (Beginner & Intermediate) [In Progress]

https://pokefarm.com/upload/KatKoin/Sprites_Pok_mon_of_course/IMG_0406.GIF

[styleclass=wall][styleclass=banner][/styleclass][styleclass=main][styleclass=inner_left][styleclass=icon][/styleclass][/styleclass][ ][styleclass=inner_right][styleclass=dexinfo]No. 004a Floric Fire Cat/Dog Pokémon HT 2' 3" WT 6.5 lb [/styleclass][styleclass=foot][sc=print] [/sc][/styleclass][/styleclass][/styleclass][ ][styleclass=tabbed_interface horizontal][ul] [li]Dex[/li] [li]Links[/li] [li][img]https://pokefarm.com/upload/KatKoin/Sprites_Pok_mon_of_course/IMG_1089.PNG[/img][/li] [li]Tab 4[/li][/ul][ ][sc=tab-active][i]Dex images unavailable Dex entry unavailable[/i][/sc][ ][sc=tab]Click the Pokémon over the desired shop to go there! [url=http://pfq.link/~pJ3v][pkmn=keldeo][/url] The Koin Market [url=https://pokefarm.com/forum/thread/48702/KatKoin-s-About-Templates][pkmn=Phione][/URL] KatKoin's About Templates [url=https://pokefarm.com/forum/thread/55029/Sprites-With-Katitude][pkmn=mew][/url] Sprites With Katitude [display=Friend's shops][url=https://pokefarm.com/forum/thread/62212/Gabbigger-s-awesome-shop][pkmn=dragonite][/url] Power Random![/display][hr][display=Comix!][url=https://pokefarm.com/comics/strip/417]The KatKoin Chronicals (Bronze Season) #1[/url][/display][display=BEST FRIENDS EVAH!]Gabbigger: [[url=https://pokefarm.com/user/Gabbigger]X[/url]] Carsonthesmithy: [[url=https://pokefarm/user/Carsonthesmithy]X[/url]][/display][/sc][ ][sc=tab]Hover the 'monz to see their names and dex entries! [tip=Alolan Charmander {WATER} Unlike Charmander from any other region, this one can spray water up to ten yards!][img]https://pokefarm.com/upload/KatKoin/IMG_0492.GIF[/img][/tip] [/sc][ ][sc=tab][i]Dex page empty[/i][/sc][ ][/styleclass][styleclass=footer]Made by [url=http://pfq.link/Niall]Niall[/url], based on the Gen III Dex. [url=https://pokefarm.com/forum/thread/56995/niall-s-musical-freebie-thread]Free to use[/url].[/styleclass][/styleclass][style] // ================================== // What you can edit ;) // ================================== @GRA1col = #779d6f; // Line Color #1 @GRA2col = #497041; // Line Color #2 @BORDcol = #283840; // Global Border @HEADcol = #a0a0a0; // Button Base Background @BTTNcol = #4890b0; // Button Color @BTACcol = #b0c8f0; // Button Color (clicked) @BTXTcol = #000000; // Button Text color @BSHAcol = rgba(0, 0, 0, 0.3); // Text Shadow @BACKcol = #f8f8f8; // Card & Tab Background color @TEXTcol = #000000; // Card & Tab Text color @INNEcol = #d8d8d8; // Card Accent color @DACCcol = #f8b800; // Tab Accent color @LINKcol = #f8b800; // Links color @url_background = "https://pldh.net/media/pokemon/gen3/rusa_action/035.gif"; @foot_ackground = "https://veekun.com/dex/media/pokemon/footprints/35.png"; @font_family = Arial, Helvetica Neue, Helvetica, sans-serif; // ================================== // Do not edit below here // ================================== .wall { position: relative; background: linear-gradient( to bottom, @GRA1col, @GRA1col 50%, @GRA2col, @GRA2col 50%); background-size: 100% 8px; font-size: 12px; font-family: @font_family; padding-bottom: 2px; a { color: @LINKcol; } .footer { font-size: 12px; text-align: center; background: @BACKcol; padding: 2px; margin: 4px; border: 2px solid @BORDcol; color: @TEXTcol; } .banner { background: @HEADcol; height: 35px; width: 310px; margin-bottom: -35px; } .icon { float: left; background: url(@url_background) no-repeat; min-height: 90px; max-height: 90px; width: 100%; overflow-y: hidden; background-position: center; text-align: center; padding-top: 0px; color: transparent; position: relative; z-index: 3; } .inner_left { min-height: 94px; max-width: 40%; background: @INNEcol; margin: 3px 3px -90px 3px; border-radius: 5px; } .inner_right { background: @INNEcol; width: 180px; height: 50px; border-radius: 5px; padding: 0px; margin: -4px 10px 0px 93px; position: absolute; } .dexinfo { float: right; display: inline-block; text-align: left; height: 80px; margin-top: 10px; margin-left: 20px; min-width: 150px; overflow-y: hidden; display: inline-block; line-height: 20px; } .foot { float: right; position: absolute; top: 57px; right: 0px; background-color: @INNEcol; padding: 5px; height: 24px; width: 24px; overflow: hidden; text-align: center; line-height: 24px; color: @INNEcol; border-radius: 100%; } .print { background: url(@foot_ackground) no-repeat; background-position: top center; margin-top: 4px; } .main { min-height: 90px; height: 90px; max-height: 90px; overflow-y: hidden; padding-bottom: 10px; color: @TEXTcol; font-size: 13px; background: @BACKcol; border: 2px solid @BORDcol; border-radius: 5px; border-bottom-right-radius: 25px; margin: 40px 10px 4px 10px; } ul>li, li.tab-active { position: absolute; float: left; top: 0 !important; margin: 2%; width: 18%; overflow: hidden; max-height: 30px; padding: 1%; background: @BTTNcol; color: @BTXTcol; border: 2px solid @BORDcol; border-radius: 5px; text-align: center; font-size: 12px; text-transform: uppercase; font-weight: 700; text-shadow: 1px 1px 0 @BSHAcol; } li.tab-active { background: @BTACcol; color: @BTXTcol; } .tab, .tab-active { background: repeating-linear-gradient( to right, @DACCcol, @DACCcol 5%, @BACKcol 5%, @BACKcol 95.05%); border: 2px solid @BORDcol; border-radius: 5px; color: @TEXTcol; padding: 2% 8%; min-height: 5px; text-align: left; } li:nth-of-type(1) { top: 0%; left: 2%; } li:nth-of-type(2) { top: 0%; left: 26%; } li:nth-of-type(3) { top: 0%; left: 50%; } li:nth-of-type(4) { top: 0%; left: 74%; } }[/style]