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!

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:

using images as a border (without tables)

yucky example:
this is a table with separated graphics set that form a whole custom border. it has to be set to specific sizes (in this case 855px), meaning if it's too wide, it will expand past the width of a page, and not be responsive.

likewise, depending on the height, the sides can cut off in wonky ways, or if a height isn't set with a scrolling div placed inside. depending on your browser and the size of your screen, this can appear in various ways, so i recommend resizing your browser window to see how it doesn't respond

yummy example:

this is a responsive div. the border is set as an image and therefore responds to the overal size of the div. it's a lot easier to utilize than old-fashioned tables, more reliable, and uses far less coding. the only caveat is either making the border image, or finding one

i've also included an image with the same styling, to show that you can apply the same border to images as well!

code:

paste the first code in your css; the code provided is specifically set as it's own div class, so that you can use it several times. the code provided only includes the coding to set up the border - you'll still need to set other parameters yourself, such as the div width and padding. you may also need to edit the border-with and fill round to suit your image size. replace BORDERIMAGE with the url of your border. if you'd like, you can apply the styling to an element like a blockquote as well

the second part of the first code is for images specifically - if you put in a parameter such as width, it will automatically resize images to be that size, so you want to set them separately to not have a width or height

the second code can be used on pages where you want to include the div with the border

the third code is used on pages where you'd like to include an image with the border

coming soon