Hello! welcome to my css tutorial i will only be going over the basics and some other stuff here, i wont explain how to do boxes as i myself dont know how to. iam only posting this as i realized that theres no real tutorial that explains ALL of this stuff without you needing to click trough 69 tutorials to find 1 single part

what is a hex code?
a hex code is a six digit code that somehow is a color, for example #000000 is black while #FFFFFF is white, these codes are very important in css. you need them most of the time for this.

What you will need for css making :

-wordpad or any other writing app (should automatically be on your pc)
- coolors (website)
- a working imagine size changer or whatever it is called (i like to use this one, feel free to use others too)
-dropbox
- a working keyboard
- a computer / laptop

At first, take a look at this
this is a free to use example of css made by me :) simply copy and paste the whole code into wordpad or whatever you are using for this.

The background

the background is one of the most important parts, its extremly important to have in css to make it pretty. its the first two parts of the css you see, both titled media. before you can simply paste any picture into there and make it your background, check if the pic is the following :
1. 1900 x 1080 pixels or more
2. if not use the link i included in the what you need and change it to perfect size, you need to upload it to imgur or deviant art tho, as it will break otherwise (i forgot to add this at first oof)
3. your pic should include jpg or png at some part of it, doesnt always need to be the end some have it in the middle of the link and it still works
then simply copy the image adress into there where currently have the imgur link at the almost complete top of the code! remove the whole link and put yours in (make sure the '' are still there and your link is in the middle of the two)
now you have a background yay!

next part is the Lioden logo
it doesnt really care how big the replacement you use it, but its best if its around the same size as the lioden logo (around 192x120 pixels if i remember right)
go here for f2u pixels for replacements!


now, open coolors in another tab and choose a palette that you like, every where where theres standing #hexcode (aka numbers sometimes mixed with letters) its a hex code, change these with the codes you want to use but leave the # at the front.

track, handle and handle on hover

it is the thingy on the complete right side of your screen, the one you can drag around and all, track is the light gray almost white part, handle is the slighty dark grey and handle on hover is when you hover over the handle and it get slighty darker.

col and div container main

idk what col md is, so i like to keep it as none, container main tho is the main box thingy, plenty of people have it half visible , u CANNOT use hex codes if u want to make the main container only half visible, you need to use rgba, use this website and leave the 0.5 at the end i have in my code, theres a 1 in the end at the rgba thing, its the visibility. in order to simply have it 1 color with 100% visibility you need to remove the whole rgba part and change it with a #hexcode

navbar, navbar li a and navbar li a hover
navbar is the part that says "den , crossroads, hoard" etc. navbar li a is the font color and navbar li a hover is when you hover over the navbar (NOT THE FONT COLOR!).

breadcrumb
its the part that says "bookmark" and all that.

feature
this is the part, when theres a event and theres a special thingy, for example in october when you can carve a pumpkin, this it the background for it.

topbar
this is the complete top of your den, the one where it says "welcome back ....!"

sidebar
this is ONE HALF of your sidebar, basically the part around the chat.

panel
the white part on top of the grey sidebar, feel free to experiment with this :)

chat odd and even
these are the two parts of the chat, the gray and the white color

h1
this is the thing that says (name)'s pride

h3 to right cub
all of these are your kings profile and stats and lioness counter and all of that, best if you make these all one single color.

cave grid and beetle grid
im pretty sure we all know what this is, the cave and beetle boxes, the little bit of color under the font.

a link a visited a hover
i like to keep link and visited on white, best idea in my opinion. i always change the hover part tho, adds a little bit of color. btw these are when you get links and all that.

from alert danger to progress bar

the alerts are all when you have stuff like "lion is gonna leave cuz of starving or low mood!" warnings.
the selects are for the complete lowest part of the den, where you can change stuff and all that.
the progress is the side of your screen where it shows energy and all of that.

the breadcrumb after is my "signature" please keep this part on! i wanna know who makes css with my template oh and if you dont mind, please tell me if you make some css with this template! i wanna see :O

in order to have a custom cursor simply go here choose a cursor you like, then copy and paste the universal css anywhere into the code

ALMOST FORGOT THE MOST IMPORTANT MOVE!
save the thingy on wordpad or whatever you are using and put .css after it, this turns it into a css file, upload it to dropbox. copy the link of the css and then do this:

<*link rel="*stylesheet" type="text/css" href="include dropbox code here, change the www with a dl*" /*>
(remove the *)

. in order to have a custom font, switch out every "urale" in the css with a font . go to google fonts, look for a font, scroll down. there should be a blue little + in a circle. then go to the little 3 boxes and a + on the right, you should see the font you just selected there. import the font WITHOUT the style at the end and bottom, import it to the extreme top of the code. then simply put the font family : font everywhere you want a special font!

in order to have custom cave pictures, use this code:

a[href$="cave.php?id=insert cave id here"] > div.cave-grid > img {
background: url('insert picture url here') !important;
padding-left: 100%;
height: 120px;
}

its best to make the replacement 290x120 pixels :D

now, i hope you have a great night/day and i hope you learned something from this. anymore questions? shoot me a pm and imma answer as soon as possible