coding snippets

here are some html and css codes you can use on your own website! these are things i use across my own sites. i just think they're neat

note: i use a windows pc, and my primary browser is chrome; i also feel that because this site is hosted on neocities, that's where a lot of my visitors are from, so things will be explained from these perspectives. i unfortunately probably can't help if you use a mac because i don't use them. the processes should be similar enough to still follow along, but i just wanted to acknowledge this in case your experience doesn't match what i say in my instructions exactly. when in doubt, google is your friend

you can contact me and i can maybe try to help (discord much preferred for coding help)

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 your coding that won't affect how your pages display! there's a code for html, and a code for css, so make sure you're using the right code for the right purpose!

code for html:
code for css:

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:
yummy example:
code:

in my example i added some padding, 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!

using custom fonts on your website

the first step is to find the font(s) you'd like to use. there's several repositories that offer tons of fonts to choose from, that are usually free to use. (you always want to check creator terms of use, though; oftentimes to be able to use a free font, the creator requires a link back to them or another form of acknowledgement. usually they'll include a readme file stating their terms of use with the font download. sometimes a font may require a license to use, which would need to be purchased. licenses in these repositories are typically for personal use, which means they can't be used in any project that makes you money. a person running a personal for-fun site on neocities should be good with a credit link, but always check the terms)

places to browse fonts:

then, you'll download the font to your own pc, and if it's in a .zip or .rar, unzip it to a location of choice

you'll then want to check the embeddability of the font next. if the embeddability is restricted, that means it's not capable or allowed to be used as a primary font on a web page. as in, the font creator doesn't want it used on the web or in text editing programs, and has literally set it to be impossible. you can check the embeddability in the file properties, under details. save yourself a headache and always check if a font is restricted or not before moving on to other steps

also know that if you're dead-set on a certain font, the embeddability should still allow it to be used in programs such as photoshop - manually making things like header graphics is always an option, albeit more tedious. remember that using the font in graphics will still require appropriate credit based on the license of the font. there's also probably ways to unrestrict the embeddability, but don't do that. it's a douche move

to make sure the font always loads properly on every browser, the font should be converted into various formats. my personal favorite converter is available here; it automatically converts the font into every format you need, regardless of what format it was already in

from there, unzip and upload all the font files to your server, then you can start implementing the codes!

code:


(paste this code at the very top of your css file)

in this code, the relative file path is used over a full url; if the relative path is not used, the fonts may not work. if you're not familiar with relative file paths, it's essentially shorter paths based on the folder structure of your site. for example, say you're hosted on neocities and have a folder you put your fonts in. the relative path to the file would be /fonts/FONT.ttf while the full url would be https://YOURSITE.neocities.org/fonts/FONT.ttf. if you put everything in the same directy as your index file, then the relative path will simply be /FONT.ttf. you can learn more about file paths here

you also want to make sure you don't have a double file extension in the code. you want /FONTNAME.eot, not /FONTNAME.eot.eot. the parts you do want to leave in are ?#iefix for the second eot file, to have /FONTNAME.eot?#iefix. for the svg file, you'll want to keep #svg, and add the name of the font again, /FONTNAME.eot#svgFONTNAME.)

for the font name ("FONT NAME"), make sure it's the same as what it's called in the file properties, not necessarily what the file is literally named. right click on the file in your pc, and select properties from the dropdown menu. then select the "details" tab at the top of the new window. the first property should be name, and what it says there is what you want to say is the name in the code. for example, if it says FontName with capitals there, that's what should be used as the font name, even if the file name is fontname.ttf. the font name will not use a file extension

code:


(paste in the part of your css code where you want to use the font)

font-family is most often used for html, body, header, and div sections of a stylesheet. remember you can set different fonts for each of these for more unique designs, and bear in mind it's best to use a legible font for where the most text is going to be on your site - you want people to be able to actually read your content, right?

and voila! now you should have a custom font working on your website!

styling specific text

sometimes you may want differences on the same line of text. it's possible to make specific text have a different color, font, etc. even when an id or class is already styled. that's where the span tag comes in!

yucky example:

this is a line of text, and here's a portion i want emphasized
yummy example:

this is a line of text, and here's a portion i want
M emphasized N
code:

in the first example, i used the the <b> tag and <font color="white"> tag to make the text bold and a different color. it's effective that way, but i want a little more oomph. so in the second example, i used a different font entirely, and i even used the same code to add the sparkles before and afer because they're a different font. to get several fonts next to each other, just close the span tag and create a new one

you can also do things like set a background text this way!

yucky example:

example text,
boring edition
yummy example:

example text,
M fabulous edition N
code:

coming soon