html & css codeshere'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
notes in codingever 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! :)
vertically aligned text and imagesi 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 :)
text text text
in this example, you can see that there is awkward space above the text, which isn't very aesthetically pleasing
style imagesdid you know you can style individual images to have certain attributes, such as resizing them, giving them borders, adding padding, etc.?
above is just a plain image with nothing fancy going on
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 :,)
custom fontssometimes 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!
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 pointerscoming soon :,)
first letter different colori 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 :,)