hjonk css tutorial but bad

okay this isn't going to be a all-encompasing guide to css. not my job to teach you. this is about how to change the css on YOUR hjonk page. first: my css is available in the shop, just search "suletta" and it'll appear. it's 5 whatever-the-currency-is, but if you want it for free just wait a bit and i'll tell you how.

i will preface this- DO NOT STEAL OTHER PEOPLE'S CSS, ONLY USE WITH PERMISSION. the site warns you about this any time you view their css, don't claim you forgot. ask for permission. only view other user's css for study purposes, or with explicit permission.

 

so first, you gotta know how css works. there are some amazing tutorials on the web, just google them.

https://www.w3schools.com/cssref/index.php and https://developer.mozilla.org/en-US/docs/Web/CSS both contain a lot of information about css, keep it open while you're working on yours for easy reference.

 

now, we gotta figure out what each thing does. almost all modern web browsers contain an inspect element tool. this is our friend. this can tell us how the css on every object on screen works. common shortcuts for inspect element include F12, ctrl+shift+i, and right-clicking then pressing inspect element. you should see the html of the site, and the css affecting the element selected. in the top corner of that window is a button with a box, and an arrow pointing to the top left of the box. this allows you to select an element and view the details of it.

there should be a style section, this will contain all css that affects the selected element. if you're only looking to change colors of elements, just click on the element, note the name of the element (will be in gray above the properties, click and you can copy it) and the property you want to change. add it to your page in this formatting:

element {

property: value;

}

often times elements will have periods preceding them, these are MANDATORY. here's an example: say i wanted to change the color of the text in the main post area. i'll click on the element picker and click the text. i can scroll down and see the color is dictated by the color property in the body element. if i wanted to change it, i could add the following to my css:

body {

color: #1e1e2e;

}

this will set the property to the specific hex value. once again, refer back to the css references listed above if you want to know everything changeable with each element and the possible values for the property. repeat for the rest of the objects until you're satisfied. this is a very small change, so you might not be satisfied. you can jump in further if you wish.

 

the process of changing other elements isn't much different than above, it just involves some more looking. say i wanted to make the image at the top invisible. this might be a bit harder, so you can click on the elements in the list to find the one containing the header. as of writing, it's under "container header-container min". i'll scroll down until i find the link to the image. i see that it's under .container::before, and the image is controlled by the background-image property. if i wanted to remove it, i could add this to my css:

.container::before {

background-image: none;

}

you might notice there's now a gap at the top which needs to be filled. i'll scroll until i find the margin. at the moment, it's under .container. currently it's at a value of "140px auto auto", because margin is a shorthand which combines the top, left, right, and bottom margins. if i only wanted to affect the top margin, i could add the following to set it to 20px:

.container {

margin-top: 20px;

}

that combination of css will remove the header's image, and remove the margin that leaves such a huge gap.

 

now, this might get you a decent way in, but you might wanna study some people's css to get a better understanding. thankfully that's also done from inspect element. DO NOT USE THIS TO STEAL CSS. on the two most common browsers, this is how to find the user's CSS

on firefox, click >> near the top and open the style editor. scroll down until you find the username of the person, and click. the user's css will be displayed.

on chromium browsers, click sources. open top, then hjonk.me. under cdn, you'll find a css folder containing the user's css

this is how you can get my css, if you want to practice the method. steal my css all you want, i could not care less. only use this for study purposes.

 

if you have any questions, @ me or message me on discord @asticassia.suletta and i'll be happy to help. let me know how i can improve the tutorial because i'm REALLY bad at writing them.