LESSON ONE: CSS BASICS

The first part to making a template is understanding CSS. CSS stands for Cascading Style Sheets and it's the core of every template you see on any of the resource sites. You can do tons of really fantastic and complex things with CSS but you can also make really nice stuff just by knowing a few simple codes.

CSS is made up by linking together different variables to change how something looks, how it is positioned or how it behaves when an action is performed (such as hovering). First of all, though, we need to talk about divs.

Divs are the containers that hold our variables. Divs are simple tags that look as such:

[div]content here![/div]

However, since no styling has been done to this div container, it's not going to look like anything special. This is where variables come in. Most variables are really self explanatory, so it's easy to understand what each one will do. Let's try and change the font face and color of our div.

This div:

[div style="color: #ff0000; font-family: times new roman"]content here![/div]

Looks like this:

content here!

Whenever you want to add styling to a div, you need to add style="variables!" to the first div bracket. It is important that you have an opening quote before the first variable and a closing quote before the last variable, or your code won't show up right. It's also important to put semi-colons between each variable, or they also won't show up right.

So let's go over the two variables we just applied to our container. Color is the variable that changes font color. It isn't font-color, contrary to popular belief! You can put any hex code here, as well as rgba values (but don't worry about that right now.)

It's best not to use #000000 or #FFFFFF, just as a rule of thumb. These colors are usually too harsh, and an off-white or lighter black usually look better. But it's all up to you and the colors you prefer!

Font-family is the variable that changes the font face. You can put any known font face here, but it is best to stick to web-safe fonts that will show up on any browser. For example, if a Mac user uses the font "Helvetica" it will show correctly for them, but it won't show up for a Windows user, because Windows don't come pre-installed with Helvetica.

WARNING: DO NOT EVER use the fonts Comic Sans, Joker, Mistral, or any other cutesy or cartoony fonts. Mistral is really hard to read, Joker is literally a joke, and Comic Sans...just don't use Comic Sans. I beg of you.

Alright, but moving on with more actual coding things.

There are a ton of variables you can use to manipulate your divs, and it definitely doesn't stop at font colors and faces! Let's add a background, border, and padding to our little div.

This div:

[div style="color: #ff0000; font-family: times new roman; background: #333333; padding: 10px; border: 5px solid #666666;"]content here![/div]

Looks like this:

content here!

Now, let's go over our new variables. You'll notice that the first two are the same from before, so we're going to talk just about the new ones, of course.

Background is a variable that changes just that — the background. You can do a lot with this catchall variable. If you enter just a hex code, it'll make the background of your container that color. If you put url(URL HERE) it will make the background whatever image URL you put in between the parentheses. This is a really versatile variable that you'll be able to do a lot with.

Padding is something you should always include with your divs, especially if you have text on a background. Padding adds space between the edge of your div and the edge of the content inside the div. It makes your div taller and wider in accordance to how many pixels big you make the padding. In my example I added 10px of padding. This means that there is a 10px gap between the edge of the div and the edge of the content. This is a handy variable, because spacing between objects makes them a lot easier to look at.

Finally, border adds a border to your div. Imagine that, right? You need three things inside this variable: width in px, border type, and border color. In ours its 5px solid #666666 which will add a solid border 5px wide in the color of #666666. There are a lot of border types, like double, dashed, dotted, etc. I usually stick with double or solid, but you can use whatever tickles your fancy.

Alright, now we have fonts, backgrounds and borders down. But why is the div stretching all the way across the page? Well, if you don't include height and width, your div will be as long as the page it is on and as high as whatever content you put inside of it. So, let's figure out how to add height and width to our div.

This div:

[div style="color: #ff0000; font-family: times new roman; background: #333333; padding: 10px; border: 5px solid #666666; height: 20px; width: 100px;"]content here![/div]

Looks like this:

content here!

Let's go over these last two variables.

Height and width do just that — change the height and width of whatever div you're working in. By putting a number value in pixels, you'll be able to change the size of your div. It's as simple as that!

A NOTE ABOUT PADDING, BORDERS AND HEIGHT/WIDTH: You'll need to do some simple math to get the correct heights and widths if you decide to use padding and borders. For example, I set the height of my div to be 20px. However, the height is actually 50px. This is because I have 10px of padding and a 5px border.

A cross section of the height of my div would look like this:

5px border
10px padding
20px content height
10px padding
5px border

5+10+20+10+5 = 50. It's the same for the width as well. If you need your div to fit in a certain space, you need to take in account your padding and borders, which all it really requires is some simple addition!

-----

Alright, I know that was a lot to cover, but the basics of CSS are pretty easy. I know you all will be able to pick them up really quickly! There are a lot of variables we didn't go over, just because I didn't want to bombard you. However, use the w3schools link below to learn more about the different variables if you want.

Now, for your assignment:

Make a div using all the elements we learned today. If you feel comfortable, introduce other variables as well. Use different fonts, colors, paddings, dimensions and borders than I did, please!

Resources to help you out:

w3schools: This is an awesome website that has literally every single CSS variable along with an explanation of what each one does. Check it out to get more information!
Web safe fonts: If you need an idea of what fonts are generally web safe, check out this page.
HEX codes: Literally every hex code you could ever need can be found on this site. There are other sites with hex codes, this just happens to be my favorite.

Now, go forth and code! I'll keep this up for about a week.