FULL CSS GUIDE - Profile page By DefNotCrycry

By @DefNotCrycry
POSTED: 23 Aug 2025 09:30
CATEGORY: Educational
FEATURED: Yes (@Draconid_Jo)
(Go to comments)

This is a full css guide for those who want to customize their profile page. My profile's CSS is availiable here.

-- HTML ELEMENTS --

HTML elements are what shapes a website. There are many different types of elements : some that are outdated/obsolete, some that you will find on every website. Some of the most common html elements are : <div></div>, <html></html>, <body></body>, <p></p>, <h1></h1> to name a few. You might recognize some of them, as they are either widely used or mandatory to make a website.

Here is the list of all the HTML elements you will find on your profile page and be able to customize :

- BODY : This is the main container of your page. Changing css properties of your body element will apply to all of the other elements (only the font-family and color).
- DIV : This is to create a container. View this as a smaller body element that can be used for many purposes. On this website, it is mainly used to create different sections and align specific elements. There are a minimum of 45 of them on your profile, depending on how many profile pages/blogs/comments you have.
- H1 : This is to make your text appear bigger, mainly to make titles. There are 6 of them in total on your profile. All are used to name different sections of your profile (for example, the comment section or the badges section).
- A : Also called "anchor element", this is used to link URLs. It can be applied to texts, images, or other elements. There are a minimum of 15 of them on your profile, depending on how many profile pages/blogs/comments/links in bio you have.
- IMG : This is to display an image. There are many image formats, but you will only find PNG and JPG formats on your profile. There are a minimum of 3 of them on your profile depending on how many blogs/comments/images in bio you have.
- FORM : This is used to manipulate data on a database. It basically tells the website to send or receive data (this is not useful information for customizing your css). There are 2 of them in total on your profile.
- INPUT : This is used to store the data that will be sent to a database thanks to a form element. There are many types of inputs, you can find all of them here. Most, if not all inputs on your profile act as buttons.
- TABLE : As its name suggests, this is used to create a table. Its layout can be customized using other html attributes. You can find all of them here.
- TEXTAREA : This is used to create a textbox. You will mostly find them in forms. The data contained in the textarea is then sent through the form element. There is only 1 textarea on your profile.

This is how you can give CSS properties to raw HTML elements :

body { color : white; } Here, I changed all of the text contained inside the body element's color to white.
h1 { font-size : 15px; } Here, I changed the size of the text inside the h1 elements.
div { width : 200px; } Here, I changed the horizontal size (width) of all div elements.

! NOTE : Giving CSS properties to a raw HTML element will affect ALL elements with the same name on the page. !

-- CSS CLASSES --

CSS classes are attributes that can be assigned to individual HTML elements. Therefore, any HTML element can be assigned as many classes as possible, and all of the css properties of these classes will apply to said HTML element.

This is what it looks like on the HTML side :

<div class="my_class"></div> Here, the my-class class has been assigned to this div element.
<h1 class="my_class text_class"> This is an example ! </h1> Here, multiple classes have been assigned to this h1 element.

CSS classes and HTML elements are stored on two different files that can interact with one another. Because the two .html and .css file format are fully compatible, this means the CSS styling can be done inside the HTML code using a <style></style> element. But let's be honest, no one does this, as it can quickly make the code become unreadable.
The reason I am explaining this is because instead of assigning a class to an element, you can directly assign it style attributes. This is something you will never find on modern websites, as it is not an optimal way of styling a website. (I mean, could you imagine having to manually change every attribute on every single element ?)

You will still find a few isolated CSS attributes inside some HTML elements on your profile. Here is an example of what it looks like :

<div class="menu_section" style="padding:0px;"></div>

To customize your profile, you will mostly have to pay attention to CSS classes. ! Keep in mind that all changes made to a CSS class will apply to every HTML element containing this said class. !

This is how you can change a class' properties :

.button_div{
width: 300px;
height: 250px;
border-radius: 5px; Here, the corners of the element will be curved.
color: yellow; Here, all of the text inside the element will be yellow.
background-color: black; Here, the background of the element will be black.
}

Notice the difference between calling an HTML element and a CSS class ? To change an HTML element's properties, you simply need to type its name, whereas to change a CSS class' properties, you need to add a dot before its name. This is why it is not recommended to create classes that have the same name as HTML elements, as if you forget the dot before your class' name, you risk changing all of an HTML element's styling !

Here is the list of all the CSS classes you will find on your profile page and be able to customize :

- .menu_section : These are the different sections of your profile. There are 7 of them in total. This class is only assigned to <div> elements.
- .nav_avatar : This is your profile picture, on the top-right of your page. It is assigned to a <div> element, and contains an <a> element and an <img> element.
- .nav_div : These are the two rows of text in the first .menu_section. The first one is a <div> containing text and an <a> element (the logout button). The other one is a <div> that only contains text (amount of messages).
- .head : This is the quote at the top of your profile informations, in the second .menu_section. It is a <div> that simply contains text.
- .row : These are the multiple information rows below .head. They are all <div> that contain a classless <div> (text on the left) and orphan text (text on the right).
- .button_div : These are the "block" button below all the information rows, and each profile page's button in the fourth .menu_section. The text inside the "block" button is an HTML attribute, whereas the one in each profile page's button is an <a> element.
- .form_body : This is your profile's biography. It is a <div> inside the third .menu_section that can contain orphan text, <a> elements, <img> elements, <br> elements depending on what is in your bio.
- .badge : These are your badges. They are <div> elements inside the fifth .menu_section that contain an <a> with an <img> inside, and an orphan text below the <a> element.
- .zebra : These are your blogs (the sixth .menu_section), and the top and bottom parts of your comments (the seventh .menu_section). They are all <div> elements.
- Blog part : They contain an <img> element on the left, followed by an <a> element and two orphan texts. They also contain a <div> with a .blog_right class, which is the number on the right, and contains orphan text.
- Comment part : The two parts are inside a classless <div>. The top one contains an <img> element on the left (the profile picture), followed by an <a> element (the commenter's name), orphan text, and an empty div at the bottom for spacing. The bottom one only contains orphan text (the comment).
- .avatar : These are all of the commenters' profile pictures. They are all <img> elements.
- .form_textarea : This is the textbox inside your comment section. It is a <textarea> element.
- .form_button : This is the "post" button below the textarea in your comment section. This is an <imput> element. The text inside is an HTML attribute. The text to the right of the button is an <a> element.

You can also apply the same attributes to multiple CSS classes at once, by doing this :

.badge,
.zebra,
.avatar{
width: 10%;
}

-- PARENT/CHILD ELEMENTS --

Every HTML code is structured and follows a hierarchy. HTML elements that contain other elements are called parents, and HTML elements that are inside other elements are called children.

This is what an HTML structure can look like :

<body> Here, <body> is the parent of <h1> and <div>.
<h1> This is a title ! </h1> Here, <h1> is the child of <body>.
<div> Here, <div> is the child of <body>.
This is some orphan text.
</div>
</body>

HTML elements are like LEGO bricks. You can change how they are assembled, and the code's hierarchy will follow along.

Therefore, this is what happens if I change the order of the HTML elements :

<body> Here, <body> is the parent of <h1> and <div>.
<div> Here, <div> is the child of <body> and the parent of <h1>.
<h1> This is a title ! </h1> Here, <h1> is the child of <body> and <div>.
This is some orphan text.
</div>
</body>

And this hierarchy also applies to CSS ! You can target specific CSS classes or HTML elements that are contained in certain HTML elements or elements that are assigned certain CSS classes.

Here is an example of an HTML code with a variety of elements and classes:

<body>
<div class="menu_section">
<div class="head"> <-
<h1></h1>
</div>
</div>
<div class="row">
<div class="head">
<h1></h1> <-
</div>
</div>
</body>

.menu_section .head{ Here, I am only changing the properties of .head inside .menu_section, and not of .head inside .row.
width: 50px;
}

.row .head h1{ Here, I am only changing the properties of h1 inside .head, which is inside row.
font-weight: 500;
}

-- CSS PROPERTIES --

You can find the full documentation of every CSS property on this site.

Here are the main CSS properties you need for styling your profile :

- font-size : Change the font's size in px.
- font-weight : Change the font's thickness. 400 is light, 500 is normal, 600 is bold.
- font-family : Change the font's appearance. Find all web-safe fonts here.
- letter-spacing : Change the spacing between letters in px.
- word-spacing : Change the spacing between words in px.
- color : Change the font's color.
- border : Change the border of your element. -> border: 1px solid black;
- border-radius : Change the curve of the border's corners.
- margin : Change the spacing around your element from outside of its border. -> margin: 1px(top) 1px(right) 1px(bottom) 1px(left);
- padding : Change the spacing around your element from inside of its border. -> padding: 1px(top) 1px(right) 1px(bottom) 1px(left);
- background : Change the background of your element.
- text-decoration : Change the decoration of your text.
- text-shadow : Change the shadow of your text. -> text-shadow: 1px(offset-x) 1px(offset-y) 1px(blur-radius) black;
- box-shadow : Change the shadow of your element. If a border-radius is set, the shadow will take its shape.
- opacity : Change the opacity of an element and all of its children.

If an attribute won't apply to an element, you may need to add !important before the ";".
You can find more CSS examples on my profile page about my CSS.

-- COLORS --

There are 4 ways of using colors when styling your CSS :

- Default color names : These are default color names you don't need the hexadecimal or RGB values of to use. You simply need to type the color's name. However, this method is very limited as you cannot use any color you want.
- RGB Hexadecimal codes : These are codes assigned to a color. They start with a #, followed by a 6-digit hexadecimal number.
- RGB codes : These give the same result as hexadecimal codes, but are typed differently. Instead, they use 3 values of Red, Green and Blue, ranging from 0 to 255. These codes start with "rgb" followed by (255, 255, 255).
- RGBA codes : These are the same as RGB codes, but with the color's opacity. This is very useful when you don't want your opacity CSS attribute to apply to all of the children elements. These codes start with "rgba" followed by (255,255,255,0.5), with the opacity value ranging from 0 to 1.

I personally use this site for converting color values.

--
And there you go, you can now fully customize your profile ! If you have any questions, feel free to ask me in the comments !

+6 -0

FULL CSS GUIDE - Profile page

Comments