html & css codes

here's some html and css guides you might find useful in building your neocities site! :)

please note: all codes are offered as is, recommended for folks who are at least semi-familiar with html/css
please do not contact me for further help, i don't have the spoons or time to take requests or give extensive support. sorry!

notes in coding

ever wish you could leave a note in your coding? like, a note that says, "this code does _" because you'll forget (like i do, lol.) fear not! with this code, you can add notes to you coding that won't affect how your pages display! :)

code:

vertically aligned text and images

i would die as a designer without this one tbh lmao. you know how when you place an image in a page, and text right next to it, if the image isn't the same height as the image to begin with things look... bad? but if you try to do an image align, it'll shove it all the way over to the side of the page, not still flush against content? using tables to vertically align everything to the middle gives you cleaner, cuter displays! using padding you can make it so everything's flush, but not squished, too :)

yucky example:

text text text

in this example, you can see that there is awkward space above the text, which isn't very aesthetically pleasing

yummy example:

text

in this example, you can see how the roses and text align in the center, vertically. a subtle change, but doesn't this one look a lot nicer? i personally build sooo many menus with this technique lol. maybe other designers find tables archaic but i still find uses for them :)

code:

style images

did you know you can style individual images to have certain attributes, such as resizing them, giving them borders, adding padding, etc.?

yucky example:

above is just a plain image with nothing fancy going on

yummy example:

in this example, i doubled the height of the image, made the width relative to that height (ie it keeps it's dimensions without getting warped), added some pading, added a background, added a border, and rounded the corners. i don't think it's reasonable for me to list all options, but basically you can style an image like a div, so play around with css attributes to see what you like :,)

code:

custom fonts

sometimes you don't want to be limited by fonts that are built-in to browsers, and you need something custom for some oomph. sometimes google also doesn't offer a font in their repository. this very website uses a number of custom fonts for headers and other bits and bobs. here's how to install a custom font on your page!

first, you'll need the font you want to install. i have a list of fonts i like over here that are already converted to what you need, but there's also tons of font repositories, such as dafont

if you're not downloading a pack i offer, you'll want to find a service that will allow you to convert the fonts you downloaded into other formats. i've personally had luck with cloud convert. it will automatically convert a ttf font into other relevant formats! once converted, you need to download all the files

next, you upload all the files to your own server :,) note: neocities allows you to upload font files to their server!

once uploaded, take note of the file names. copy and past this code into your .css file:

where it says FONTNAME, that's where you'll... well, put the font name, lol. you can actually use a different name than what it actually is for sake of ease when calling it in your css, but i do recommend keeping it recognizable lol. for each part it says URL, paste the url of where you uploaded the file to. DON'T USE THE .ttf OR OTHER EXTENSIONS TWICE IN THE URL SLOT; i just have them listed in the code so you know which "slot" to paste each url for each file type. i hope that makes sense ;w;

for example, you want "https://yourhost.com/YOURFONT.ttf", not "https://yourhost.com/YOURFONT.ttf.ttf"

then in your code, wherever you'll use "font-family: FONTNAME," just... plug in what you named the font. and there you have it! custom fonts with cross browser compatability! :)

custom mouse pointers

coming soon :,)

first letter different color

i personally think this one is super cute if you're trying to make things look fancy, or bring in interest to a certain area. this can be used to make the first letter of different areas different colors! designers often use it to add oomph to headers, but with some clever use of div's you can set it to do things like style the first letter of individual paragraphs, or all paragraphs on a page!

coming soon :,)