@roseyvern brought up a good question:
I know this post is a tad old, but I've been going crazy trying to figure out how to even LEARN the CSS stuff and all I'm getting is recourses for HTML. How did you go about learning??
So, here is a super quick and short guide to using and learning CSS code!
There are three things that I use when I'm writing my CSS code:
The 'Inspect' tool!
This is literally your best best friend, bro. I'm unsure if you can access this on iphone/android, but on desktop if you right click anywhere on your screen and go all the way down to 'Inspect' OR just click F12 on your keyboard, a side bar will pop up. It should look like this:
Now, it looks like a hot mess of code that can confuse you, but we're only using this for one specific thing! When writing CSS code, you need to know the name of whatever you're trying to change and this Inspect tool will show you the name of the specific area!
For example, let's say you want to change the little banner at the top to another image! Or, maybe you want to get rid of it altogether! Right click on the banner area, click Inspect, and the area that is being highlighted will show up in code. It should look like the image below:
[Hint: if you hover your mouse over the code, the area it's talking about with highlight just as in the picture below. It doesn't show my cursor, but my cursor is currently hovering on the code, and as you can see, the banner is being highlighted in a blue box]
As you can see from the image, the banner itself is called 'banner' in code. Along with that, you can see that the image background is being controlled by another code 'background-image: url(INSERT IMAGE ADDRESS URL)'. These are the two codes you need to know if you wanna change the background!
ALL CSS CODE IS FORMATTED LIKE THIS!!!
.example { property: value }
Thus, with that in mind. If you wanted to change the banner to a different image, the code would look like this:
.banner { background-image: url(https://i.pinimg.com/1200x/29/d0/03/29d003d3a371a7780cf875ab8c0acd04.jpg) !important }
[Hint: if you look at the code, the properties are within a brace/bracket {}, this allows the properties to work for a specific item + helps to keep different properties of different items from interferring.]
Now, as you can see, there was something I ended up adding for this code to work. This is the !important keyword. DO NOT OVERUSE THIS KEYWORD NOR USE IT FOR EVERYTHING! This is something you'd use if there is any conflicting code and you want to override it. There are some cases where a code will not work unless the !important keyword is in place. The banner is just one of those cases.
Not only this, but multiple properties can be used at once for an item.
.banner { background-image: url(https://i.pinimg.com/1200x/29/d0/03/29d003d3a371a7780cf875ab8c0acd04.jpg) !important; background-size: cover !important; background-position: center !important; height: 300px }
[Hint: properties and values can be found within the Inspect tool and shows you what you can change. I showcased this in the image below in the red box]
Like I said before, the Inspect tool is legit your best friend. If you love the way someone's ArtFight CSS code looks like, you can always go to their profile and learn the different values and properties they used to change their code!
2. Use pre-made CSS codes to learn!!! There are many examples of code snippits that people make and they are all so so good to use and learn from. Here are some links to themes and code snippits that are very useful! These are only few of the many out there:
https://toyhou.se/~world/182526.art-fight-assets/characters/folder:5716859/tags:1/order:group_age_desc
https://toyhou.se/~forums/16.htmlcss-graphics/663153.battalias-ftu-artfight-css-templates
3. The ONLY CSS guide I ever used while learning all of this slowly was: https://www.w3schools.com/cssref/pr_background-position.php. This Guide has a TON of properties and examples of how to use them within code. Just remember that not everything can be used. ArtFight restricts a lot of the code so you struggle to try and move some items around. If a code doesn't seem to work (esepcially if you're trying to move your profile image or something of the sort) then it is most likely being restricted by ArtFight itself. Sadly, you can't fight it ߹𖥦߹
The best way to use this guide is to try and see all the types of values you can change for a specific property. For example, the banner image again. There are different types of values for different types of properties
For the background-size property, the different kinds of values are (I used the 'cover' value for my banner example):
That's all that I can think of at the top of my head! Again, this is a SUPER DUPER SHORT GUIDE!!! There is still so much out there that you can do, just have fun and try things out! Coding is always trial and error.
I'm not much of a coder myself nor do I know all of the properties and values that I can use, but so far this is what I know!
If there's anything I missed or said incorrectly, please feel free to correct me! 𐔌՞ ܸ.ˬ.ܸ՞𐦯
