Basic CSS

Now we're getting to the fun part! Let's talk for a little bit about what CSS is, and then we'll dive right in to the code.

CSS stands for Cascading Style Sheets - something else that's a fun fact to know, but you don't really need to understand. Remember how I said that HTML tells you what to do? Well, CSS tells you how to do it. For example, HTML might tell you that you want to emphasize a piece of text. It's the CSS that tells you how the text will be emphasized - perhaps you want it to be both bolded and italicized, as well as bright pink. You can do that with CSS, and more.

In this little tutorial, we will first cover basic styling of HTML tags. Then, we will talk about classes and ids. Finally, we'll go over some basic coding with divs.

Coding with Style

Let's say you have a bit of code like the following:

beautiful <strong>constellations</strong>

If that's all you have (no CSS), it will look something like this: beautiful constellations. But let's say we want to make it fancier. Using CSS, we can change the way the strong tag affects the text. We can make all strong text purple, or underlined, or bigger, for example.

Your CSS code has to go in between style tags, like in the example code below. Inside of these style tags, we can style things but putting the name of what we want to style in front of curly braces, and putting our styles inside of the curly braces. That probably sounded a little confusing, but it should make more sense with an example: 

<style>
strong {
	color: #eee;
}
</style>

Notice how we have strong in front of the curly braces. This tells us that we're changing the way the strong tag affects the text. Inside of the curly braces, we have different CSS attributes in the format "attribute:value;" (semicolon). In this example, we set the color to #eee, or a light gray. Now, if we use the same HTML, we get a different result: beautiful constellations.

Well, we can't see that very well. Luckily, there's another attribute we can change that might make that text easier to see. The background-color attribute will change the background color of whatever you are styling. Let's add a line for background-color, changing it to #000, or black:

<style>
strong {
	color: #eee;
	background-color: #000;
}
</style>

Now, our HTML will render like this: beautiful constellations.

Now you should have a basic idea of what CSS is, how to use it, and what you can do with it. Just like we styled the strong tag, we can also style other HTML tags, like the ones we learned about in the first tutorial. In the remainder of this tutorial, you'll see some other CSS attributes as well.

Classes and ids

Finally, the only other thing we need to talk about is classes and ids. A CSS id is another way to specify that something needs to be styled. We use an id when there is only one of it on the entire webpage. For example, there is usually only one header and footer on a webpage, so these commonly are styled using ids. To give something an id, we name the id anything we would like (like "header"), and then use the id HTML attribute:

<div id="header"></div>

Then, in the CSS, we can style this. For example, we could give a header a width and a height. To style an id, it is just like styling a tag, except we put a hashtag symbol in front of the id's name.

<style>
#header {
	width: 100%;
	height: 100px;
}
</style>

This code will style everything with id="header" (which should only be one thing.) A note about the new attributes here: width and height can be specified either in pixels (px) or in percentages, in which case it is the percentage of the browser's width or height.

CSS classes work almost the same way, except you can have multiple elements on a page with the same class. You would specify a class using the HTML attribute class. For instance, say we have a class called "red":

<div class="red"></div>

We style this just like the id, except we use a period instead of a hashtag. The following code will give a red background to every element with the attribute class="red".

<style>
.red {
	background-color: #f00;
}
</style>

More Useful Attributes

There are hundreds of CSS attribues, and there's no way I could list them all for you here. However, here are a few common ones and the values that they can take, that you are likely to want to use:

A Note About Colors

Colors in CSS and HTML are represented by a 6-digit hexadecimal code. This code consists of three 2-digit hexadecimal numbers: one representing the red component, then the green component, then the blue component.

I don't want to spend too much time on this, because it isn't necessary to understand the physics behind it in order to use it. However, it is worth noting that the colors we see are subtractive, but computer colors are additive, meaning that colors don't mix the way we are used to. We are used to red and green mixing to a dark brown, but, in additive color theory, they mix to yellow. Therefore, the color #FFFF00 (in #RRGGBB format) is actually yellow.

I wrote a more detailed explanation of color codes here. For now, it suffices to remember that #000000 is black and #ffffff is white. If you want to know other color codes, use an online color picker that tells you the code. This is not something you need to memorize.

Finally, note that in CSS only (not HTML) there is a 3-digit shorthand when each 2-digit number has the same digits. For example, if you have the color #112233, you can shorten it to a 3-digit color #123.

Conclusion

That's all there is to basic CSS and HTML. All that's left is for you to learn more HTML tags and CSS attributes. For example, some CSS attributes you may want to research are: padding and margin, border, and position. Most importantly, have fun!