A little introduction to CSS
A lot of people sees code as an almost impossible thing, a bunch of words and equals that makes no sense, but I’m here to prove to you that there is nothing to be afraid of and actually CSS is simpler than you might think!.
Before talking about CSS I need to explain some HTML, the basics so we can use CSS with it.
HTML is a markup language composed by containers, these containers are called div, or in HTML5 section, footer, header, etc., and inside each div you can add more div’s to create an organized website, for example a navbar. Mostly is composed by a main div, holding the whole component together, then you have what most people call a container, which will live the logo and the nav links, then you have a separate div when you organize the nav links, see where I’m going?.
Now, how can we add styles to each div and how can we differentiate them from each other?. You have 3 ways of doing so, in CSS you can add specifics styles to an HTML element like a div, ul, li, etc., but it’s kinda messy when you use a lot of div’s or anything actually, then you have an HTML class or id. Each does different things but the main idea is that an id is unique, no other component can have that id, but classes, you can add them where ever you want and how much you want it.
This article will focus on classes because I love to just write one time my code and use it everywhere.
How do you call a class in CSS? This is how:
You have a lot of options for styling your HTML elements, they are called properties and trust me, there are a lot! So I will cover the basics of what you need to look when styling a element.
1. Display: Here you have some options, ‘none’, ‘inline’, ‘inline-block’ and ‘block’ are the basics here.
2. Background-Color: This is simple, here you can add the color of the background by name, e.g. Yellow, hex, RGB, and hsla.
3. Margin: This is really confusing at the beginning with padding, but the margin is space outside the component! You can use margin 2 ways, ‘margin: 0 0 0 0’ or ‘margin-left:20px’.
4. Padding: Here we are talking about the space inside an element. This property has the same way of using as the margin.
5. Font: This property has a lot of sub-properties like ‘-size’, ‘-family’, ‘-weight’, and so on which call’s a different part of the font used in the HTML element.
6. Color: This property is used for the color of the font inside the element, there are no such things as ‘font-color’, it’s just ‘color’ (Beginners mistake, been there).
I can go on and on talking about CSS properties but this is not this type of article, I just want to show you that most of the names are really intuitive, not hard at all and with some practice you will use them without thinking, trust me. When you feel confident about your basic CSS skills then you can start learning about flexbox, CSS Grid, preprocessors like SCSS, LESS, and STYLUS, animations, mixins, em’s and rem’s, media queries, responsive design, and so on.
