hi

px
amount of pixels

%
percentage relative to the parent element

vw, vh
1% of the width and height of the viewport (browser window size) respectively

dvw, dvh
dynamic viewport units. most useful for mobile layouts

em
relative to the font size of the element. if your element's font size is 16px, 1em = 16px, 2em = 32px, and so on

rem
ditto but inherits the font size of the html { } element, which is 16px by default on most browsers

fr
fractional unit used for grid layouts. if you have four columns sized 1fr, then they will each take up 1/4th of the available width

these all have various use cases. px is helpful when you want something fixed regardless of the viewport size, but it is helpful to look into these other units. not everyone will be viewing your site from the same device or browser, and a lot can get lost in translation otherwise

flexboxes and grids make positioning elements way simpler and i'm surprised i don't see them utilized on neocities more. w3schools has some guides that are pretty easy to follow if you're looking to get started:
flexboxes
grids

also, i tend to start my stylesheets with these lines:

/*note that these can be a bit disagreeable if you're using on an already-established page!*/

* { 
    margin: 0; /*removes all default margins*/
    padding: 0; /*removes all default padding*/
    box-sizing: border-box; /*sizes are calculated with content, padding, and border, but not margin*/
}

body {
    height: 100vh; /*fills window height only*/
    width: 100vw; /*fills window width only*/
}

honestly, even if you're positioning content manually, it makes your life a whole lot easier.

the fact is not everyone always has a computer available and it gets a little irritating when people outright refuse to optimize their sites for mobile. i feel it's a lot easier than people assume:

first, put this line back in your <head> section if you removed it:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

next you can add these lines to your page's style:

@media (max-width: 600px) { 
    [selector] {
        [property]: [value];
    }
}

this is called a breakpoint and it essentially gives you a separate stylesheet that activates under a certain width! you can do just anything you want with any element from here.

600px is standard for most phones, but you can add as many as you like and optimize for other typical device sizes if you really want to. if you're on firefox, pressing ctrl+shift+m while viewing your own site allows you to preview it with different resolutions.

you can also use

display: flex;
flex-direction: column;

on any grid layout to convert it to a vertical flexbox and adjust it from there, or just add flex-direction: column on a pre-existing flexbox.

i won't tell you exactly how to create your own layout, but there's a whole lot you can do with just css alone. really nothing's stopping you from creating an entirely different page this way if you wanted to.

if u ever get tired of copypasting the same colors and styles over and over you can put this at the top of your stylesheet:

:root {
    --[variable-name]: [literally anything you want];
}

and then use them like this:

[selector] {
    [property]: var(--[variable-name]);
}

e.g.

:root {
    --cyan: #00ffea; 
}

body {
    color: var(--cyan); 
}

Its Fucking Awesome

i used a similar method for my avatar to the left (or above on mobile) but honestly w3schools has a more extensive guide for this more suited for something like an art gallery. youre free to inspect and pull my code anyhow

honestly i just ripped and made some adjustments to the code on this page lol

resources