Unofficial Stellular CSS / HTML Stuff

hii mostly making this for myself but also including some things ppl newer to code might want to know. i'll try to edit this when/if styling changes but don't quote me on that plz. currently a work-in-progress :)

---

Custom CSS

• simply just add a style tag to your paste! ¬

---

Markdown-To-CSS

• certain markdown doesn't escape, or we just can't get character escapes to work, so we have to separate them with inline code
• we add an exclamation mark to the first part of parrot formatting, this is only so it shows up inline. plz remove the exclamation

---

Bolded Text

**Markdown**

[b!] Parrot [/b]

CSS — strong

strong {}

---

Italic Text

*Markdown*

[i!] Parrot [/i]

CSS — em

em {}

---

Highlighted Text

= = Markdown = =

[h!] Parrot [/h]

CSS — .highlight

.highlight {}

---

Underlined Text

_ _ Markdown _ _

[u!] Parrot [/u]

CSS — [role=underline]

[role=underline] {}

---

Strikethrough Text

~~Markdown~~

CSS — del

del {}

---

Colored Text

[t! red]Parrot[/t]

CSS — [role=custom-color]

[role=custom-color] {}

---

Custom Text On Hover

[m! MESSAGE HERE] Parrot [/m]

CSS — [role=custom-message]

[role=custom-message] {}

---

Right Aligned Text

- > Markdown - >

[r!] Parrot [/r]

CSS — .text-right

.text-right {}

---

Center Aligned Text

- > Markdown < -

[c!] Parrot [/c]

CSS — .text-center

.text-center {}

---

HTML-to-Markdown

note : remove the space between the "e" and "#" in your actual code ; e# instead of e #

---

span

e #html span#
this is to style a small portion of text generally. either with a style='' or class=''.
e #chtml span#

---

div

e #html div#
this is for a division or section of an html document, style with either a style='' or class=''.
e #chtml div#

---

---

youtube iframes like to break code so I can't put an example, but paste one and hide it at the bottom of your paste (0px by 0px / opacity 0) and look up the code for youtube iframe autoplay if you want that. if you want to make a functional play button, just use the audio tag instead. sometimes they work with double quotes but you should probably change them to single quotes.

---

CSS Classes & Tags

---

body = the outer area of the main area ; usually used to change background .

body {}

---

main = the area that contains everything ; including footer and statistics . usually used to change the page width .

main {}

---

.card = the paste contents itself , the area you're reading this in .

.card {}

---

Variable Colors

all of these can be adjusted by using the below code ; can be used to replace color codes using var(--paste-variable-here) instead of a hex .

:root {
--paste-variable-here: color;
}

--text-color

--text-color-faded

--blue3 link color

--green3 save text

--red3 delete text

--background-surface . darker background color

--background-surface1 . paste background color + Some Buttons

--background-surface2a . hr / --- color