Top 4 CSS Learnings as a beginner
26th November, 2020CSS stands for Cascading Style Sheets, and we use it to style our boring-looking HTML pages.
When we start with CSS, it looks so daunting because there is so much to learn, and the simplest of things seem so complex to achieve. Even trying to center elements can get you to scratch your head. The key is not getting overwhelmed and take small steps to understand it.
I've had some similar experiences while I was coding this website of mine. But after using my favorite search engine Google to figure out things, I've learned a lot of things, which I think will be very useful for beginners just starting with CSS.
1. All heading tags (H1 to H6) and "p" tag have default margin values.
All heading tags and the paragraph tag have default margin values. It can be a big problem if you are trying to fine-tune your spacing around elements. The trick here is to reset the margins of all heading tags and the paragraph tag to 0px in your CSS file so that you have complete control over the spacing.
2. The unordered list "ul" and ordered list "ol" tags have a default padding of 40px to the left.
An Unordered list is our first choice when we want to create navigation elements in our navigation bar or create links to our social media profiles in our footer. Usually, we display the list items inside the unordered list in a line using the "display:inline" property and centering the elements by setting the text-align property of the "ul" or "ol" tag to center however, your elements won't look dead centered because of that 40px left padding. The key here is to set the "ul" or "ol" tags padding to 0px.
I won't recommend doing this globally since that default padding is necessary to create hierarchy when we're using lists usually. Ideally, you would target the "ul" or "ol" inside your footer or navigation bar and then set the padding the 0px.
3. Add hover animations to your buttons.
Wait, I can add a hover animation even if I am a beginner? Yes!!!, you read that right. Adding a hover animation is actually very simple. It can be done using the ":hover" pseudo-class in CSS. Refer to the image below to see how to use it
4. Using variables to store values that will be reused.
You can use variables in CSS to store information that needs to be reused multiple times. They are very useful to store colors. When you are coding a website for a brand it's very important to follow and adhere to the colors of the brand and keep the look of the website consistent. You can create variables inside the ":root" pseudo class to create global variables.
Just type -- followed by the variable name, and then store the color values or any value you want to reuse. You can use the variables by specifying their name inside the var() function. I've used variables for this website to store the colors that I have used on this website.
So that's pretty much it. Thanks for reading, and I hope you found this blog useful. Do share this blog with your beginner web development friends so that they can learn a thing or two.
If you want to learn more about CSS you can check out the following resources
CSS TRICKS : Go to website ->
Mozilla Developer Network : Go to website ->