CSS is the paint of the canvas, the folds of the paper, the decoration on the HTML, wait...
CSS is used to style or HTML code by changing the color of the text, the size of an image, or the alignment of the text, it is used for many things so it is essential to know. In concept CSS is easier than HTML but at the same time, it is more difficult to use due to it's many steps. Luckily because your code doesn't get graded each time you test it, trial and error is very practical here.
CSS is best used when stacked with itself. If it's just on it's own it kind of looks weird... Remember, if it looks done, is there anything you could do to add to it?
FIRST! Target a tag of your choice, you can target classes and IDs as well. Classes will have a "." before them and IDs will have a "#". Classes are meant to be used for multiple targets while ID's are meant for one.
Ex: h1 {} .cheese {} #watTheDogDoin? {}
Now that you got your target, you're going to type it into your CSS file and then put a curly bracket after it.
Your CSS for this target will go within the curly brackets {text-align:center;} Also this is typically not caps-sensitive.
Quick note: For anything using colors, you may use hexcodes, whole words(like "red", or "aqua"), or the actual RGB value.
Using the color tag you can change the color of your text in your desired fields.
This will change the background of your desired selection
The Border tag will let you set the thickness, color, and style of the border. Also, you can use border-radius to make it curve the selected amount of pixels that you want.
Margin and Padding are both for supplying spacing between the target and it's surroundings. Thinking as if a package, padding will provide more space from the inner wall to the target while margin will increase the distance between the outside wall from other targets. (The border tag will set the thickness of this wall). You can also set the margin to auto to center on the screen.
This aligns your text. Simple. (Left, Right, Center)
The font-size tag let's you change the size of your font.
I rarely use this tag but it lets you decorate your text. You can set your text to be underlined, overlined, striked-through, italicized, or bold. I usually use this to hide my a tags by hidding the underscore and painting it black instead of the default blue :P
This applies to images and boxes not just stand alone text. An example of using this property is the css I used for the body of these webpages, I have a max-width of 540 pixels meaning that the page will stretch until it hits that width, at that point it will stop stretching and remain frozen until it goes below that threshold. (This can be used for the height as well, just replace the word "width" with "height")
Column Based Design is the idea to stack columns next to each other. What we are quite literally doing are creating rows to place our data within and then adding columns within those rows to develop stacking columns within the same row. The code on the right makes it easy so you already have the CSS and just require the HTML.
When working with Column Based Design, you will make different 2+ divs, one will be for the row that your info will go in and the other will be within this row div to make the columns. The row divs class will be "row" and the columns div could be anywhere from "col-1" to "col-12", this is based on how wide you want the box to be, so if it's col-6, then the box will take up half of the selections width. (HTML example below)
Flexbox is a really difficult concept to understand and half the time I just play with settings until I find something that works. With Flexbox uses the a parent type relation with it's elements. This means that if there is a div with a paragraph tag inside, the paragraph tag being within the div would be a child and the div would be the parent on the outside. The reason this is important is because some CSS properties must be given to the parent and it will apply it to the children. The parent and children may also be called the container and items.
Align -Content similar to Text-Align will align all of your targets in a certain way.
Justify-Content will stretch the margin between your children to an even amount based on the selection.
(Click Image below to Download)