Figmint designs goodly designs for the average tasteful chap

css basics

In this tutorial you'll learn what CSS is, the structure of a normal webpage and where it fits, as well as some important CSS vocabulary. This is the first step in learning the language.

What is it and what does it do?

CSS stands for cascading stylesheets. It's used to style (basically spiff up) web pages. HTML on the other hand, is a language for structuring.

Let's look at a page with HTML and no CSS here.

As you can see there are some things going on. The page is broken into paragraphs with a heading, and there is also bold text and a link. Even with all those things, the page is very plain. The font color and page color is default black and white. This is because the HTML is only in place for the kind of structure you see here--paragraph divisions and headings. The kind of thing you do in a basic text editing program.

Now let's look at this same page with CSS added, here.

Eheh, whoa now! That's what styling does for you! As you can see, the structure is still the same. The header is where it was, the paragraphs are broken up the same, but the page looks entirely different! It also looks a lot more like a web page. The CSS I wrote changed the font size and family, background color, and also threw in a div (short for page division) that seperated the area that wants your attention from the background.

CSS takes what looks kind of like a word document and makes it into something worth staring at all day. Maybe. xD

the structure of a web page

If you've never made a web page before, well, you might want to figure that out. Basically, you save a document with code in it as a .html, .htm, or any other web page suffix, and upload it to the internet. You might want to investigate that and pick up some HTML skills if you're starting this with none.

Anyhow, there are some rules when it comes to making web pages, or at least standards that you should follow, lest elitist web designers look down their noses at you. Here's what every web page you make should include. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>

Your HTML and webpage content here.

</body>
</html>

I'm hoping this is review, but those things you see there, between the <brackets> are called tags. Tags are like little commands of code to the computer that mean different things. Tags are fundamental to HTML--Basically, tags are HTML and vice versa.

Going from top to bottom, I'll explain what each tag does.

Fitting CSS in

CSS goes inside the head section, between its very own <style> tags. Below is the code for a web page, with CSS included. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>

<style type="text/css">
body{
background:black;
color:white;
}
</style>

</head>
<body>

Your HTML and webpage content here.

</body>
</html>

The style tags function like any other set of tag, indicating where the CSS begins and where it ends. This particular kind of CSS is called internal CSS, because it's part of the main webpage document. There are three kinds of CSS, which we'll go into another time.

CSS Components

Zooming in on the actually CSS now, we see there's a structure to it. 
body{
background:black;
color:white;
}
The bold word there is called the selector. It "selects" what part of the web page you're applying style to. Here, the selected part is the body tag.
Since the code in the head tag is invisible, the body tag pretty much means everything you see. The entire page.
body{
background:black;
color:white;
}
Curly braces open up to the actual styling. CSS is written in lines, as you can see, and the end of a line is marked with a semi-colon. Lines begin with properties, which are the bold words here. Properties are an attribute of the page that you want to change. For example, here the properties are background (short for background-color) and color, which means font color. 
body{
background:black;
color:white;
}
After a property comes a colon, and then a value. This describes how you want the property to look. Here you can see, the values indicate that the background should be black and the font color should be white.

When you're done applying code to a selector, don't forget to close with a curly brace.

vocabulary review


doctype
the very first part of a web page that declares the language version your code is in.

tag
A short command between pointed brackets. Many come in pairs with begining and ending tags.

selector
a part of CSS code that states what section of a web page you want to change

property
an attribute of a selector, like font-color or font-size.

value
a part of css code that defines what the property looks like. For example, red for font-color, or 10px for font-size.
Figmint © Frisby. Please enjoy and respect my work. Terms of Use.
eXTReMe Tracker