CSS things you wish you were taught

2025 06 01

unrelated; but we finally have an RSS Feed

CSS is the document, the "stylesheet," used to tell a browser what a website is supposed to look like. Without a stylesheet, the browser wouldn't know what to set my background to, and so would use whatever it's default is. Now apply this to everything.

If the reader has ever worked with computer software in some significant form before, they know about CSS, and have probably used it at least once. Despite this, many folks find it mystifying, frustrating, useless, or perhaps something else negative.

this is what this webblog is about. I want to share the things that makes me celebrate and love CSS, for folks who struggle with / dislike CSS, but have some familiarity.

before we continue, however...

hey.. pssst,,,

you hear a small girl call to you from the corner of the venue.

you approach her. this is your third time at your fighting game local; you don't really know anyone. this girl is rarely without her mother,

i learned you wanted to know...
how to fucking centre an html element...

hmm... you always have... haven't you....

css always made it reallyy finicky and tricky...

you can do it in just 2 declarations. there's a mwambillion
ways to do it. you just gotta pick the right one for the job.

you get scared she's trying to suck you into a pyramid scheme with her cuteness.

display: flex;
justify-contents: center;
                            

or maybe...

display: grid;
grid-template-columns: 1fr min(45rem,90%) 1fr;
                            

how about..

margin: 0 auto;
                            

[ ominous little girl noises ]

now you're worried... this cant be real.. it's supposed to be difficult !

text-align: center;

she's just saying shit. there's too many options? how could you ever choose the best one now ....

...run.

What is the best way to centre something?

well, it has some bad news. the more and more one learns about CSS and JS, the more and more one realises there is rarely a best option.

one could make the argument that no one technique is better or worse than the other cus they all have different applications, but even then it feels like a lot of the applications overlap, and choosing the right one is quite sublte.

the two things elysia usually comes to: accessibility takes precedent, and we should try to minimise declarations.

the first one i feel is self explanatory: accessibility provides a system of a value to judge different stylings on, and so if something is more accessible than the other, the accessible option should be chosen, provided it makes sense in the scope of the project.

second one basically says, only use the bare minimum that you need. To explain why this is important, say you specify your font size in both the main and p. Initially they have the same font size value, and initially you only have <p> elements inside your main.

if you were to then decide you want to change the font size ( like in a site redesign, or... a media query... ), and you go to adjust the main size, you'll find it isn't working. Likewise, If you add a p outside of main, then its given a font-size in a way you may not like. Perhaps you give body a different font size, and it may, or may not, work, depending on The Cascade.

To be more specific, you could perhaps have it be main > p, so you only select the normal paragraphs in main. Maybe you could also set a default font size in body, or maybe set different font sizes elsewhere depending on your needs.

It isn't to say there is never any reason to give main and p dedicated font sizes, more so to illustrate what can arrise when you declare more than is necessary. There are absolutely many cases where the declaration is very purposeful and needed ! but also many situations where being precise and thoughtful is important, like when making a colour scheme media query, where its useful to just change the values of global variables, instead of restyling each element indivudally.

• selectors and specificity
• skip to the Horrors of flexible design, phone screens, scaling, etc..

how to be specific

something This One really wishes it was taught was CSS selectors.

In the main > p example, the > symbol is telling the computer to only style the <p> elements that are directly under a <main> element.

This has the benefit of making it so you dont need to give each p in main a class, which would be really annoying !

it could also be used to, say, style a list in your navigation differently from other lists in your page, without needing to give the ul a separate class.

nav > ul {
    display: flex;
}
                           
                        

this one would probably use CSS nesting for this just cus it is probably styling the nav as well and doesn't want to write multiple rules. Whether using nesting, or not, is again not necessarily better or worse. they work for many of the same situations, and would only have niche situations where one tops the other.

    /*  NESTING EXAMPLE */
nav {
    background-color: black;
    & > ul {
        display: flex;
    }
}
                        

also you can do nesting in css now

there are all kinds of selectors in CSS. here's some ones this one thinks are extra important

• the ~ selector gets siblings of an element.
  input ~ label { styling } styles any label siblings of input. you can make CSS incesteous with ~ 🩷
• a single space " " can also be used to select any children of a parent, more broadly from >. feel like some of the romance is lost compared to > cus the specific element is less special but whatever
• pseudo classes like :hover let you select something with a specific state.
  for example, input:checked ~ label would make input's sister only do something when she is checked by the user
• pseudo elements like ::before select elements that are tangientally related to the base element but are also kinda separate. something like ::after doesnt appear for default for many thigns, so selecting it and styling it will also make it appear.
  an example of this is input:checked ~ label::after { content: " >////< "; to make label secrelty blush behind her normal face when input checks her.
  hi big sis!
• ul:nth-child(<n>) selects the n^th child of an unordered list. please let us use variable n in the styling declarations to let us make a for loop <3
• square brackets let you use an element's attribute as a selector. so you could make all <a> that link to kereru.support use a kererū icon by selecting it with a[href="https://kereru.support"]
• likewise, you can select an open details box to style by using its open attribute.
  details[open]

there is also just a concept in css known as specificity, which is useful when an element has multiple rules to listen to at the same time. ids are more specific than classes, which are more specific than generic names. specificity increases when you match for multiple selectors at a time, such as with p:is(#red) specifying the generic p and the id #red

( the p:is(.green, #red) example below is equally specific as the one above but i dont feel like explaining how that works )

/* p is the least specific */
p {
    background-color: orange;
}

/* .blue is the second least specific */
.blue {
    background-color: blue;
    
}

/* this is second most specific */
#red {
    background-color: red;
}

/* this is the most specific  */
p:is(.green, #red) {
    background-color: green;
}

                        

my class is blue and my id is red

using .blue { background-color: blue !important;} puts .blue into a higher pokémon speed bracket so it beats out all the others, despite being less specific.

.blueimportant { background-color: blue !important;}
                        

my class is blueimportant and my id is red

i've only used !important once in my entire 3+ years writing css and its kinda a hack ! good to document what youre doing and why its necessary.

realisitically if you're writing just a personal site and try to keep rules controlled and are careful with inheritance, you probably wont actually need to think of the specificity and speed tier system. it's only come up for This One in more complex projects.

using inline styles ( via html style attribute ) is also more specific than anything in a dedicated style tag or css file. ive only ever had this come up when modifying inline styles with javascript and accidentally realising it means i cant style those declarations in the css file, at least not without marking the declarations in the css file as !important.

this one is so sorry to web designers

but we all knew this was coming

this is the kind of thing that happens when one overdeclares. it doesnt want that to be like, a huge thing you look out for, its more so meant as an example. In this case, the text would have been fine if we didn't set a stringent width of 70px:

let's make it a true square while we're at it with aspect-ratio

it is doing this exercise to demonstrate the point of relative declarations: using relative rules and values like aspect ratio to get a square, instead of setting a fixed width and height. Setting a fixed width and height means that if anything exceeds that size, it will overflow. like in figure 1!

it makes updating sites way less annoying and avoids situations where one must find the perfect number in order to get everything to display right

there are very legitmate cases where having specific sizes is good!! but again!! good to be consious about it.

with this respect there are also media queries, relative meaurement values like % and vw, and we think most importantly, grids.

css grid has been around for 8 years

display: grid, and to a lesser extent, display: flex;, is the way layouts on the modern web are made.

They allow setting objects next to each other ! essentially making a website 2D. there were ways to do this before grid and flex, and those are all very interesting, but nowadays they arent really used. sorry to anyone who has ptsd from float layouts.

the main difference between them i think is, grid is aware of its layout, and flex isnt. grid is far more actively defined whereas flex just puts things next to each other without much thought. grid is typically used for designing layouts that are meant to be consistent and retain their form regardless of the screen or content inside them, and flex is used where we want things to be flexible, such as with the links in a navbar. they can serve the same use cases with enough effort on either side ( grid masonry WHEN ), but that usually isn't very fun ! we really like MDN's description of them:

"The basic difference between CSS grid layout and CSS flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications both use CSS box alignment features. If you have already learned how to use flexbox, the similarities should help you get to grips with grid."
"Relationship of grid layout to other layout methods" Mozilla Contributors, licensed under CC-BY-SA 2.5 .

With flex, children start going next to each other immediately ( even if there isn't enough space ! ), whereas with grid, you need to define the area a lil more before children known how to fill it. it doens't wanna do a full overview of CSS grid, cus it's a lot ! but basic introduction is like. grid-template-columns: 1fr 1fr sets two columns that each are the same size, and grid-template-columns: repeat(3, 1fr) is 3 columns with the same size as well. There is a lot more to defining and working with grid, but others are much better equipped to go into the depths of grid than I am. i make grids though!! you can always screenpeak and take what i've used in various places.

you can make them wrap based on screen size using things like auto-flow for grid, and flex-wrap:wrap; for flex!

this is all in contrast to using things like floats everywhere, or manually translating objects to specific locations, or position absolute, etc.. Those would require changes each and every time you wanna change whats in the boxes, and also sound like a lot of work to set up in the first place !! it would also not scale very well to work on differently sized screens, unless you use a lot of

media queries

media queries are CSS rules that turn on or off based on the characteristics of the device and browser in use.

@media (max-width: 600px) {
    /* ---- css ---- */
}
                        

these rules will apply when screens are between 0 and 600px, so basically any handheld device ! You can also set min-widths, so anything above the value will be applied, or use the orientation of the screen, or combine them... etc.. they're very cool and can even be used to display the site differently when it's printed ( look at the print preview for a wikipedia article for example! its coompletely differnet! )

media queries use the cascade part of CSS, so they add or replace whatever is inside of it. This can lead to confusion if you set max-width on the big screen version, and width on the small screen version, for example, cus both rules will apply at the same time unless kept in different media queries. the way around this is to just use max-width for both, so that the small screen version replaces the big screen version.

media queries are very nice for making sure something works in weird cases where it doesnt make sense to try and make the whole css flexible. or when you want to have a different layout style ! we don't really like using them, though, cus they're really hard to maintain. they can be really large and it's easy to invoke the The Cascade with them on accident ! also ! generally elysia really only wants two different layouts anyways usually !

when we are using media queries a lot, or we have a small number but they change a lot, we like to use variables to at least make it a lil easier to maintain. Instead of changing the CSS declaratgions themselves, all we need to do is change the value of the variable.

media screens can also be used to check on the user-agent and browser of the user. this can be used to figure out what someone's preferred colour scheme is, for example, or that they prefer reduced motion ( it's still good to be able to set these manually on a site ( enabling the proper system settings to get these can be hard ! ), but using media screen to autoset it is very nice and easy )

@media (prefers-color-scheme: dark) {
    :root{
        --bg:#584b4a;
        --fg:#d5c4a1;
    }
}
                        

one can also do operations in media queries, as long as its with another media query ( css if statements when ? )

/* ------  scroll animations  ------ */
/* only appear when browser supports them and also when screen is wide enough... */
@supports (animation-timeline: scroll()) {
	@media (min-width: 1500px) and (prefers-reduced-motion: no-preference) {
        /* ----- animations.... ----- */
    }
}
                        

we think one of the most eye opening things about CSS for us was realising how interactive it could be to the user. Of course, it can respond to things like user agent and screen capabilities with what are effectively if statements, but one can also make it so a button does something special through pure css. We showed that example earlier with our Kererū button, but most mobile navigation menu buttons on our site are also pure CSS.

as a general rule, the way we approach making sites is by asking "does this need scripting" and, if no, "does scripting make this way easier or more accessible." if that's also no! ely uses CSS for it. Unless of course im making a project where the goal is to avoid using scripting entirely

an example of this for us is how we handle theming. Creating a light and dark theme in CSS is incredibly easy, and is also easy to retrofit to an existing site, especially if youre using variables for everything.

Variables in their own right make CSS really flexible with lots of potential for interaction, but so are simply things like the way scrolling works.

For example, the new scroll animation feature is interactive based on how the user scrolls the site. It sounds kinda basic at a surface level, but the kinds of things you can do with it are really outstanding and amazing. You can effectively have an element or maybe the whole page change states based on scroll !! really cool and powerful. this one has really wanted to make a site that is entirely built around scroll animations, but unfortunately it's only supported in chrome by default right now, despite being a part of the CSS standard. The flag on firefox to enable it in my experience is also very buggy and incomplete.

a really easy way to get something interactive in css and html is by using scrolling and a menu bar to jump to those! my about me page probably is my best example of what I mean right now! it isnt the best implementation out there and is kinda buggy but the idea of changing the content shown on the screen based on what button you press is still present. train shrine is also doing this, but scrolling vertically, and also allows for user scroll, but adds a train themed scrollbar using scroll animations when supported.

if i have more time, i wanna make the sections be vertically displaces from each other, and scroll snap when moving between them. the idea is that scrolling down on one section will move the next section into frame ! i want the vibe to be different train stations, so i wanna have a distinct styling viewport for each section ! and likewise also wanna make the custom train scrollbar line up with the points along it. again, time permitting.

oh, on that page you can also see how ive made a theme switch button using just css. the cool part isnt that you can change theme wiith the button, the cool part is that it works while also respecting system theme by default !! ( this wouldnt be nearly as impressive if css just had... if statements ). thanks em for helping !

introduction to animations

animations always really intimidated me when starting out ! but they didnt actually take that long to learn how to use. i wanna share it to demystify them!

putting a css transition: all 1s ease on an element will make it animate everything whenever its state changed. most basic animations will use transition! the all can be changed out for something more specific, like background-color for example. you can specify multiple things in one transition!

combining it with selectors is usually how its triggered, although transitions will also play when screen size changes, or a media query is triggered, etc.. anything that makes the state change. so,

div.example {
    transition: filter 0.5s linear;
    filter: brightness(1);
    &:hover {
        filter: brightness(2);
    }
}
                        

will gradually, over 0.5s, double .example 's brightness, when hovered. ( & is the self referential selector, we only use it cus we are nesting the hover pseudo class ).

css animations are technically something different! they differ in a few key ways:

1. they play imediately when the rule theyre attached to is triggered ( inlcuding when placing on a static element like body! where itll play on page load )
2. you can define keyframes in the animation
3. the specifics of how and when they play can be controlled

setting up an animation takes more upfront effort and is a more involved process.

@keyframes big {
    0% { scale: 0; opacity:0; },
    100% { scale: 1; opacity:1 }
}
div.example {
    animation: big 1s forward;
}
                        

This will make .example jump into view from nowhere when its triggered. You could maybe combine this with a css scroll animation to have it only play whne the viewport has .example in frame. If you instead wrote
animation: big 1s infinite alternate-reverse, then it would continously fade in and it. adding another second measurement lets you control the delay from when the animation plays after being triggered. animation delay is useful for lots of things, but an example is using one animation on a lot of elements, but not wanting them all to be in sync.

@keyframes ghost-bounce {
    from { transform: translateY(-8px) }
    to { transform: translateY(8px) }
}
#anim-test {
    /* one span for each character */
    span {
        animation: ghost-bounce 2s infinite ease-in-out alternate;
        display: inline-block;
    }
    :first-child {
        animation-delay: -3s;
    }
    :last-child {
        animation-delay: -1s;
    }
}
                        

im using a negative delay here so that they all play immediately when loaded ! a positive delay would mean they would be still and not move at all for the first second or three respecitively.

elysia theorycrafting a way to programatically assign the delay based on child number in just css... i feel like it would pretty easy if css had a looping function or if nth-child()'s formula let us interact with the variable n

how to write nice css

there's some general ideas elysia likes to follow when making a stylesheet for a website. these arent necessarily meant as rules, so much as guidelines that work for us.

we mentioned it in a past webblog, but there are several equally exahusting things that need to be done for a website:

• colour theme
• layout aesthetic theme
• layout functional theme
• how it will be navigated
• creating art for it
• writing / creating the actual body text / art
• prototyping, basic outline
• troubleshooting and polishing

it's really nice to work with templates, palettes, etc., or pull something from elsewhere, when you just want to get to prototyping a new idea you had. this one has recently really started identifying with the concept of Small Women, and aligns itself with that, and so there's been a desire to try and change some of the assets on its site to be self referential in that way. It can't, however, make a whole new site around this newfound sense of identity, because that involves going through the whole development stack, which it just doesnt have the energy for

it really want to create a frutego aero inspired website with a light blue neon bit, with cool post-processing affects and loads of energetic animations that just feel right, combined with art and images that feel very elysia! would be cool to have little pixel characters respond to what you do. but we couldn't even remotely do all this at once, so, for example, you can see the background aestehtic we're going for with this one's about this one page, and practising with interactive animations that change the rest of the page in the nav on our train page, and the way we wanna implement sound effects and some interactivity on our 3ds themed page.

the end goal is to make a single cohesive webpage like our current homepage ( our homepage is maybe the only page we've ever made that was written from the ground up ! )

once we feel like we have a lot of the individual components of what we want to make, we can put it all together. the whole strength of websites is that pages can be iterated upon over time ! so it makes working in this piecemeal way organic.

its really fun to practice though !!

ovulating.

a lot of the work when writing a page really is the prep ! the theory behind it! websurfing with personal site links out are good ways to find inspiration !!!

when writing css, it tries to outline the basics so it has something usable immediately. get the core divs set up and all that. it tries to write under idea of "less is more" so that cascade or retrofiting doesnt hurt. make sure basic accessibility is there from the start, its much easier to implement early on. polishing is always its favourite part of an art project, although its not very rewarding extrinsincally, which can make it hard ! ( please praise \\ doll if youre reading this >.< )

polishing looks like animating ! filling in placeholders !! adding cool flairs.

usually, when we have issues with something, we prefer to ask a friend than the internet, a book, or a teacher. our friends are usually much more knowledgeable about the questions we're asking, and maybe even have had their own experiences before ! my friends also understand the way we ask questions in the first place, so there is less likely that a error in communication will lead to confusion.

cursed css techniques

alright so. this is just where im gonna go hat off and go into the wild shit.

did you know css has a type system

@property --btnSize {
    syntax: "";
    inherits: false;
    initial-value: 150;
}
                        

this is a custom property declaration, or, in other words, a variable called --btnSize. oh also, um, css has variables if you hadnt heard, ,,,,

"<number>" is the type of this CSS variable. Number is like the int type, but has a floating point element.

The reason why the --btnSize is a generic number type is cus it lets me do lots of math with it and then converting it to a unit in the final stage. for example

--relativeBorderOutset: calc((var(--btnSize) - 125) * 1px);
                        

css doesnt really have concatenation, so i cant just put a px at the end of the statement. i think ive seen something to the opposite effect but the point is i needed to multiply the variable by the unit to get a useable value

something really neat you can do in super modern CSS ( like, it started being supported in chrome in Feburary 2025, and isn't in firefox or safari yet ) ,, is set a CSS type from an html attribute. So, in this example, chrome reads data-bg into the css, and we tell the css to read the value as the colour data type, whereas it isnt recognised as a colour on other browsers (for now...) !

<div data-bg="#b3135d">
    custom attribute data types
<div>
                                

div[data-bg] {
    background-color: attr(data-bg type(), blue);
}

                                    

isn't this neat!!!

this one would be willing to make the argument that CSS nesting in its entirety is kinda fucking awesome. i like it a lot and it can get out of hand super quickly

this one think basically anything that goes out of its way to replace JS can be kinda cursed. Like going all the way in using html checkboxes and styling their labels on click in a way that makes it looks like everything changes. you can get really excessive and extreme with it !! it's fucking awesome. my portfolio has a decent example of this but eugh linking to my portfolio what if i did anti SEO by not doing that

other day animation conditional variable bullshit on its train page couldve much easier been solved with javascript. maybe not as succinctly, but wouldve probably made more sense to use js.

tbh everyday it feels like it gets closer to its regular css being kinda cursed ! as it learns how to hack shit that isnt meant to be hacked , it learns where hacks start being applicable and the best option available .

border-images are cool as fuck.

this is a piece of CSS from my DS bios themed proof of concept:

it puts a border around whatever is being hovered! as if your selecting it.

button {
  /* unrelated css */
  &:hover {
    border-image-slice: 14 27 14 27 fill;
    border-image-width: 5%;
    border-image-repeat: stretch stretch; 
    border-style: solid;
    border-image-source: url(../storage/images/3ds.png);
    image-rendering: pixelated;
    animation: appear 0.3s ease forwards;
  }
}
                        

oh hello there ibuki!

aside from the interactive potential of border images, they're also amazing for decorations. This entire webblog article is surrounded by a cloudy border image with art we drew of cinnamon buns, witch hats, and cameras ! we absolutely love border images, and we think they add an enormous amount of visual flair to a website.

we also view things like box-shadow in a similar way, and to a lesser extent text-shadow and drop-shadow() and ::after. They give you so much room to do silly and cool shit !! box-shadows get special mention because of flexible and cool they are. you can change the size, if they are internal or external, you can have a lot of them !! they are so cool. for example, on our home page, we use box shadow to put cute little border rings around the edges of elements. need to be careful with how you use them though, cus restyling shadows and transperancies pushes css to its limits in terms of performance. ask me how i know ⨪-

mask images also sorta follow a similar vein, although we haven't totally gotten used to using them. Mask images change what something else looks like when it's below it. on our fighting game page, we have an animated SVG mask that we use to create foggy misty vignette around the viewport. a really straigthforward example of a mask can be seen on our books page when you open the details box! really helps break things up viisually !! yippie

clip path is very similar to masks! but use pre set polygons that are used to clip the subject. they is how ibuki is all scrungly shaped!

In a similar vein, we also love layering backgrounds in CSS. This is weird, and involves making multiple body-sized elements with nothing in them, and giving them special backgrounds and stuff. Again our home page is a really good example ! it has yuri as the back layer, then animated hearts on the next layer, then a layer of semi transperant dots to broke up the animation, then a layer of stars. Combining the layers with animations and blending makes it all really special ( although, be careful! layered animated transperancy is really expensive for processing ). on our train page, hovering over the site nav enables a fullscreen fg that dims the rest of the screen, to focus attention on the buttons!

with regards to animation, separating characters into different elements lets one animate them separately! should probably add an aria label for it so that computers know its a single word. i haven't ever made any of these on my own ( the ones you see on this one's sites were written by Moon sys ), but its seen so many amazing examples of this on other sites. just realising the extents you can go with animation is really fucking entrhalling, to the point where just separating the characters makes it exciting. its so cool, and complex animations ( even if they look simple ! ) are really just so so special. it wants to make more !

ely needs to find ways to make animations that are less exhausting...

answering questions from the internet

what is the best way to center an inline image vertically?

hmmm...

thinking about how to get an image inline in the first place. something like this? i feel like i should use float for this... hmm.

feel like the first problem we need to solve is the fact that there isn't enough text, and the image doesnt know that. there we could detect that ! but i dont feel like it. so one second

1x1/2 ( en: My Half of You) is a indie manga by Nakamura Taiyaki. It's about a girl, Asuka, who is deeply in love with her mother, Ayoka. we love the story a lot because we identify enormously with asuka !! we've had very similar experiences ! ayoka is such a sweetheart and soft hearted and kinda clueless and we love her hdjkfsghjdsgfdh. we really love the genuine loving dynamic and relatiopnship growth we get and its maybe the most real feeling manga we've ever read. its so emotionally tense and amazing and i love moms !!!!! i need them to be fluffy in part 2 though cus im gonna go insane. the book helped me a lot to navigate some nasty childhood trauma around my mum

so we have a couple problems: display:inline is only making the image inline to the same line it initially appears on ( might be something to do with the parent? overlfow-wrap and word break dont help...). we want to use display inline, cus it lets us use the vertical-align property. also, putting images inside paragraphs sounds like hell for screen readers, with the alt text. have you ever tried to read a wordle result emoji text with a screen reader? we may just have to use floats . Researching this problem is really difficult, because of how broad "how to make an image inline with text" is. It's like the first question a website maker will ever have, and since they havent learned what kind of vocabulary or concepts to use when talking about websites, there's a really broad range of keywords that bring these kind of questions up ( not that this is a bad thing ! it just makes it difficult ). The best we can find is to do with floats! although i also feel like flex will work here??

1x1/2 ( en: My Half of You) is a indie manga by Nakamura Taiyaki. It's about a girl, Asuka, who is deeply in love with her mother, Ayoka. we love the story a lot because we identify enormously with asuka ! we've had very similar experiences!! ayoka is such a sweetheart and soft hearted and kinda clueless and we love her hdjkfsghjdsgfdh. we really love the genuine loving dynamic and relatiopnship growth we get and its maybe the most real feeling manga we've ever read. its so emotionally tense and amazing and i love moms !!!!! i need them to be fluffy in part 2 though cus im gonna go insane. the book helped me a lot to navigate some nasty childhood trauma around my mum

ive been at this for a whole day, im not sure what we're gonna get,,, this one just cant figure out a way for text to automatically break istelf around an image without using a float, and using a float to get it in the center doesnt work because translating the image to the center doesnt actually change the float's bounding box. Using a grid or position absolute takes the image and the text out of the same box from each other

would be pretty easy if each word was its own element but... mrew. feel like it could do something but its just very exhausting

oh and if its just asking about float? just do it inline or set fun shape-shape outside polygon for where you want it, and then translate. the item over.

it probably wasnt asking to verittcally center. ah

whens it appropriate to use flex instead of a classic block layout? is there stuff in flex that's impossible normally or is it just a more convenient way to do things?

block layouts are using display inline and display block to make a layout horiztonal and vertically !

this one isnt too familiar with them or float layouts cus it learned web develpoment with flexbox widely available but from what this one is aware, it is impossible to dynamically size a block based on available space.

but the general idea is that flex takes an enormous amount of the work away and makes it a lot more automated. dont need to change how much size everything is every time, just need to fuck around with flex grow or whatever.

in our personal experiences, using flex well just gets rid of a lot of annoying challenges. Take the gap property for example, it just puts a gap between flex elements. no fuddling with widths or margins or position. its just there !

modern css really is a lot of being able to lay things out however one wants without having to use hacks