ohhh my GOD i promise this is the most pretentious i will ever ever get with these articles and titles. ok anyways.

i'm writing this article as a bit of self-reflection on some projects i've been working on lately, things i've been learning, and re-learning, and re-learning. if there's anyone who reads this, i want you to be able to take away a couple points:

css so powerful you can do whatever you want forever.
think about page layout as a property of the whole page, rather than only thinking about the position of individual pieces.
if you'd like to think of it this way: css fills two purposes: fashion and layout. i am learning to organize these separately in my own code.
to center a div, give its parent element these css properties: display: flex; align-items: center; justify-content: center; AND check the parent element's height.

so. i'll probably use these points as an outline for this article! but anyways.

at the end of the article, i'll have some links to more css stuff. the last two -- the flex cheatsheet and grid guide -- are two that really really helped me. if you tire of my rambles and desire some immediate guidance, check those out!

css so powerful forever

especially on a static site, i feel like css is the glue between your pages when you're using the same stylesheets for all [or a selection of] pages, at least. it is what provides the consistent aesthetic/layout, which keeps ppl oriented while surfing.

shout out to everyone on neocities who makes every page on their site different, whether in color scheme, images, layout, etc. that fucking RULES!!!!!!

shout out to anyone who breaks the "rules" and "design philosophies" i talk about, they're not ever here to limit.

it also tends to be the most interesting part of your page, and frankly what i spend the most time on as i also try to make my projects mobile-friendly, which i find to be a fun challenge.

umm that said css can be really intimidating and confusing, especially as a beginner. and i think i wanna write this from the perspective of someone who has grown to love it, but still has a lot to learn. i think i really want to say that learning about grid/flex layouts really changed this world for me, and gave me a stronger sense of control over what i build. it also helped to learn and keep in mind that the <body> element has a default 8px margin, which i generally suggest setting to 0.

styling the whole page, not the sections

so this is where this gets really subjective and situational. NOT all pages are the same, not all pages must be the same. however for me, as an individual and a developer, there are going to be some trends in the things i make, i'm honestly writing this to talk out these trends and tendencies i'm picking up. it doesn't mean that everything i make is THE SAME, they certainly aren't, but i notice myself repeating the same steps often!

when i design a site or page, i always start with the sketch of the overall layout. maybe i don't even know what to title the page yet, i kinda just scribble where words should be, but the point is i start by thinking out the layout. which means that, ultimately, i start my project thinking about the css before the html. debatedly, honestly, as a key part of your html is how you group things, and at this point i am in fact thinking about how things are grouped together. i suppose that layout is at the intersection of html and css, if you'd like to think of it this way... however... i try to decide if the layout i'm drawing should be flex or a grid, or if i should just keep it to the default vertical-only layout.

when i actually get to the coding part, i of course start with the html, as you need content in order to style the content. however, this step is where it gets tricky for me. sure, i can write out a bunch of "lorem ipsum", but my struggle comes with deciding how to mark different elements. should the main section of the page just be a <main> element? or should that <main> have a class? should this secondary nav menu also be a <nav> element? do i style the element or the class? do i split these properties between two different classes? three different classes? WHAT AM I SUPPOSED TO NAME ALL THESE CLASSES? WHICH PARTS DO I GIVE IDS!!!!

anyways um. it's a lot. and i have these questions often. recently i completed a demo site for an unrelated project, and at a certain point i realized that i needed to restructure not the webpage or layout itself, but how i wrote my css. i'm still in the middle of this, it is TIRING and i don't WANNA! but, i'm trying to answer some of the above questions: i will be using more classes, and splitting up properties between multiple classes -- that will make more classes re-usable, which will make new pages easier to build, AND will make the visuals overall more consistent! i also plan on separating the pages overall layout from the smaller sub-layouts, or the reusable layouts [think evenly-spaced flexes, little rows of buttons, so on...]

so this sort of brings me to my next branch of the rant:

layout vs fashion

what i mean here is: placement/spacing vs colors/fonts/so on. distinguishing between properties that determine these two things has rewired how i think about css, and honestly made a lot of things much more manageable.

for example, here are some css properties i think of as "layout" properties:

padding
margin
display
position
height/min-height/max-height
width/min-width/max-width
order
flex
grid-area
gap
align-items
justify-content
top
right
bottom
left
z-index
and more...

and here are properties i think of as "fashion":

background-color/background-image/background
color
font-family
font-weight
font-style
text-decoration
text-transform
border-radius
and of course more...

just looking at these lists, ummm you may notice that i could think of more layout properties off the top of my head than fashion properties. and this is because, technically speaking, i'm pretty sure there are more layout properties than fashion properties. for example, flex and grid layouts each have so many properties! both for the parent container AND the flex/grid items.

i hope this sorta illustrates the two categories i have in my head. but alas! there are dilemmas...

for instance: border. where does it go! is the border property for fashion-only? no, because a border with any thickness ie, any visible border has consequences on the layout around it see: the box model.

do borders make things harder for you? do you want a border that doesn't mess with the layout and spacing of your page? TADA!!!!! see the outline property.

a good use for outline is when you want a 'border' to appear around an element on hover. the border property would make it wiggle around awkwardly in many cases.

i'm getting off-topic. i mean to say that border as a property may add a certain fashion or aesthetic to a page, but it also technically is a layout thing, as border has a place on the box model. so where i put it for my own purposes tends to be contextual! but it more often than not goes under fashion it seems...

there are other properties that break this binary as well. for example: content, a property that only really applies to ::before and ::after pseudo elements. the value of this property can determine the height/width of the psuedo element technically speaking, but it is again contextual to how you use it! i would even argue that shoe-horning the content property into one of my categories would be excluding or erasing its purpose sorta like gender, this binary is a construct that does not help or include everyone, but can be used to simplify things.

learn more about these mysterious psuedoelements here!

anyways, as a quick summary: i like to separate my css rules into two categories, "layout" and "fashion", as those are two central purposes css serves. by separating them, i can run through a checklist of getting the fashion at least in the neighborhood of where i'd like, and then i can focus more on what it takes to get the page laid out as i'd like. "fashion" and "layout" have some points of intersection, and i think that how these two interact is what design is all about BABEY!!!!!!! or not, i dunno, what do you think it's about!

how to center a div

because this is in fact where i post tutorials and not my private diary, here is something to be of direct and practical use: how to center a div. by wormboy 3. sponsored by nature valley granoly bar.

my friends ask me all the time... Wwom boy... how doyou center that div? and you know what i tell them? "hey man, define "center". do you want the div to be the center of the page? the center of a section on a page? do you want to center its content? what are you saying?"

it's TRUE! what ARE you sayign! the first one probably. i know it's the first one. i was like you once, typing it madly into google and crying when it told me to use flex. i know. it's ok. i know.

so let's do something simple: we're going to make a page that has a nice background, and one div in the smack dab center. what i'm gonna talk about here will hopefully get you started on your css flex journey, and you can apply these principles to all sorts of things.

step one: html


<!DOCTYPE html>
<html lang="en">
<head>
    <title>simple page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <p>my virtual business card. or whatever.</p>
    </div>
</body>
</html>

BAM. simple as it gets. your body has one thing: a little div. awesome

step two: css


body {
    /* make it as tall as the viewport, and disable scrolling. */
    height: 100vh;
    overflow: hidden;
    /* like i said before -- default is 8px. GET RID OF IT!!! */
    margin: 0;

    /* flex properties */
    display: flex;
    align-items: center; /* align vertically */
    justify-content: center; /* align horizontally */

    /* fashion properties */
    background-image: url(https://wormboy3.neocities.org/assets/images/carpet.png);
}

.card {
    /* fashion properties*/
    background-color: white;

    /* 
    optional height/width. 
    note: percentages are relative to the parent element [in this case: the body] 
    */
    height: 20%;
    width: 30%;
}

and ta-da! the div is centered! you will have a page with my silly carpet background, and a white rectangle in the middle, with times new roman font in black. awesome! it's not very pretty, but awesome!

the content within has not been styled to sit in the center of the card div. the card div hasn't even gotten a border. if you're so inclined, try playing around with the following code -- i even squished it into one file.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <style>
        body {
            /* layout */
            height: 100vh;
            overflow: hidden;
            margin: 0;
            
            display: flex;
            align-items: center;
            justify-content: center;

            /* fashion */
            background-image: url(https://wormboy3.neocities.org/assets/images/carpet.png);
        }

        .card {
            /* fashion */
            background-color: white;

            /* optional height/width. */
            height: 20%;
            width: 30%;

            /* add padding here! or make it another flex to center the p! do WHATEVER YOU WANT BABEY!!!*/
        }
    </style>
</head>
<body>
    <div class="card">
        <p>my epic website content</p>
    </div>
</body>
</html>

anyways.

conclusion

i didn't go as deep tonight as i wanted, but alas! it was good to get some thoughts out there. let me know what you thought, if you bothered to read? if this was way out there, i apologize, but it's been on my mind a lot and i've been thinking about ways to make css more approachable when i'm helping friends out with it.

i should really get back to that project i mentioned, but it's sleepy time now. worm boy just started lexapro!