most of the cool effects that you see on pastes are done with css! css, which stands for cascading style sheets, is a language used for styling the content of a web page or other document written in a markup language such as html (for "hypertext markup language"). html defines the content and structure of the page, while css defines the presentation of the content, such as colors, font sizes, backgrounds, et cetera.

bundlrs paste content is typically written in markdown, a simpler markup language, but it also supports most html. even though it's not strictly necessary for bundlrs, html proficiency is a good skill to have, and it makes it easier to style pastes with css, so this guide will use html whenever possible instead of markdown. for a guide to bundlrs markdown, check here!

in html, pieces of content are labelled using tags. one you'll probably use a lot is div:

this is a div!

a div defines a section of html content; this allows specific pieces of html to be easily targeted in css or javascript using the id and class attributes. here's an example of a div with id "myId" and class "myClass":

this is a div with an id and class!

these attributes can be used for any html tag! the main difference is that id is used for only one element (hence "id", for identification) and an element can only have one id, while classes can be applied to many elements and elements can have many different classes (separated by a space, so if an element has classes "one" and "two", you would set class="one two"). id is also more specific, meaning that styles applied to an element's id will override styles applied to an element's class if they are in conflict.

another tag you might use is p, which defines a paragraph. an empty line is automatically added before and after p elements to space them out. each paragraph on this page is inside of a p element!

this is a paragraph!
this is another paragraph! there will be a line of space between us!

to add images, use the img tag. the src attribute should have the image's url (the link you get when uploading to catbox/filegarden or any other file hoster), and the alt attribute contains alt text for screenreaders or if the image doesn't load. width and height can also be specified directly, in pixels (no unit needed).

hyperlinks are created using the a element; the href attribute is the link's target url. a elements can also contain images instead of text, so you can use them to make image links or fake buttons.

this is a link!

a note about using html in bundlrs: some less-common tags, such as pre or iframe, are not fully supported. for these tags, you can use the opening tag normally, but they will need to be closed using bundlrs markdown syntax for html closing tags, which is "e # chtml [tag name] #" minus the spaces (sorry, the renderer won't let me add it in the code block because it's converted to html).

there are many other html tags; a full list of them can be found here. the only other ones you'll probably need to know are span, which works similarly to div but is used more for styling "inline" elements (such as small sections of highlighted text inside of a paragraph) as opposed to "block" elements (such as entire paragraphs or textboxes, created with div), b, which is used for bold text, i, which is used for italics, u, which is used for underlined text, and br, which creates line breaks.

text text text this text is red and larger! text text text


we're now on a new line! this text is bold! this text is italic! <u>this text is underlined!</u>

as mentioned previously, the class and id attributes can be used on any element, just like you would use them for a div. the style attribute can also be used for any element to set inline styling with css, as seen above with the span example. however, using entirely inline styling is messy and hard to read; it's better practice to have most of your css in a style tag or separate stylesheet. speaking of css...