Directory

What is CSS & HTML

Where to put CSS & HTML code

• About Me
• Pros and Cons to using About Me
• CSS Editor
• Pros and Cons to using the CSS editor
• Other functions
• Known bugs and risks when using About Me and the CSS Editor
• Some questions

How to format code

• Where to put your code
• Organize your code in order of priority
• [Tags, and do you put everything in `. The only way for them to work is if you put it within style, as this tag dictates that the code is to be used for styling content.

So what specifically belongs under a style tag? Look at the codes I’ve provided, then you’ll see it’s the code that includes the class ID and the properties that you’ve assigned to it (properties are the things like ‘color’, ‘border-style’, ‘background-image’).
Ex:

.css-0 {
background-color: white;
}

You may also see bits of code that start with @keyframes or @media. These belongs within style too.

Do I have to put everything in their individual `` element?

The truth is, no. The reason why I put each base code I’ve provided here is because I know the people going into the guide would skip the introduction where I would have put this explanation. I also put them all in style (the ones that require it anyway) on the guide to make it idiot proof. No offense.
But yes, anyway, you can put every CSS code within one ``. Like so:

<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
.css-rioh04{
-webkit-mask-image: url(IMG URL);
mask-image: url(IMG URL);
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-position:center;
mask-repeat:no-repeat;
}
</style>

Giving elements the same style

You don’t need to give each class ID their own sections of code if they’ll have the same properties/design. So instead of this:

.css-1ifv49 {
}
.css-tn683j {
}
.css-x2gqu0 {
}

Do this:

.css-1ifv49, .css-tn683j, .css-x2gqu0 {
}

You can do this with however many other class IDs. This prevents you from overloading your page with CSS, which may affect performance too.

Labeling what codes are for (CSS or HTML comments notes)

Label sections of your codes like this, so you don’t confuse yourself:

/* pfp, username, follower count */
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
/* profile picture shape */
.css-hsi2ui {
-webkit-mask-image: url(IMG URL);
mask-image: url(IMG URL);
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-position:center;
mask-repeat:no-repeat;
}

Basically encase words within /* */. Text within them will not be read as code. Just remember that this only works within the style element.

To label outside of .**

• You didn't put the whole code. Maybe you got code from my collection or from others, but you thought that some parts of it were unneeded or you unintentionally cut things out. Paste in the whole thing, and maybe ask someone knowledgeable in css about the purpose of the other parts.
• There are characters that shouldn't be in there. Maybe there's a random slash in there, or you accidentally left out a semicolon. Frick semicolons bro
• Conflicting pieces of code. Perhaps you put in something to remove a gradient, but it shares the same class ID of an element you were going to modify. Same as trying to make something visible when you had another thing making it invisible. Make sure to take note of what you put in your About Me section.
• You copied codes from my collection, but failed to change the capitalized words to the correct values. Each code should have instructions on what to replace.
• You already have put in coding for that element/ID. If this happens, just try placing the properties (like background-image, color, etc) in the existing section of code for that element.
• You need to put a linebreak between tags. for example, you have the embed link things for your font and immediately put after it. There needs to be space in between these two for it to function.
• You'll need to put !important before the semicolon.  This is only needed to be done when the site refuses to change the style of the element due to it prioritizing the default style of the website. Do it like this: background-color: white !important;

Going on the profile sent me to the reload page!

• This is most likely because the code you've put in is incorrect, thus resulting in an error. I've only seen one case of this happening, and it's because someone had been messing with the code for the audio player. I am not sure what specific things triggers this, but here's how to stop your profile from directing you to the reload page:
• Go to the main page of the website.
• Access the Settings page through the top right corner drop down menu.
• Delete the code that likely caused this issues.
• Afterwards, look over your code to see what could have made it go awry.

Updated on: 07/08/2025