Hi everyone, I'm Nikolai, I'm back with another tutorial about the web.
This time we'll be talking about CSS, this is what we'll be building.
It's a very simple two column layout just to get you started.
I'm assuming that you have some basic knowledge about HTML because we'll be covering it in
another tutorial.
Before I get started I found this wallpaper, it's a TextMate cheat sheet.
It's very useful, I highly recommend it.
If you're using TextMate, get this wallpaper, you won't regret it.
It's a little hard to call it a website.
This is the layout that we're going to be building.
It's very simple stuff, it's for the real beginners, someone who hasn't touched CSS before.
Let's start with what's CSS.
So let me close all those open files, let's open a blank HTML document.
So when you're writing a markup, when you're writing HTML, its purpose is to be, how should
I say it, it's supposed to look like a document, not like a website.
And the purpose of CSS is to take that document and make it look like a website.
So CSS is only for styling your website.
And for styling you should use only CSS and not HTML, like tables.
It's a very old practice and yeah, that's basically it.
So how to use CSS.
So first, you need to make a new CSS file.
That's easy.
Now I'm using TextMate, it should be pretty similar in other text editors, just make a
new file and save it with.css file extension.
So I already did that and here is my file.
And now we need to link it to our HTML file.
The way we do this, well first of all, I have opened two websites.
The first one is w3schools.com slash tags, it's a reference for HTML and there's one
element that I will be discussing right now, it's the link tag, not element tag, sorry.
We can use the link tag to point our HTML document to our CSS file.
So there are a couple attributes that you need to put in that tag.
The first one is Rails.
It defines what's the relationship between the HTML and the CSS file.
In this case, the Rails should be stylesheet.
And by the way, CSS means cascading stylesheets.
We'll learn why they're called cascading in a few minutes.
The next attribute is href, that's simple enough.
Just a path to the CSS file.
And the next one is type, which says the file that I'm pointing to is CSS file and media
screen.
You can read more about media, the media attribute here, it specifies on what device,
the link document will be displayed, yeah, in our case it's screen.
So another great website that I use all the time, that's w3schools.com slash css, that's
for referencing all the CSS properties and whatnot.
So we have linked our CSS file to our HTML file and now all we need is some markup so
we can style it.
By the way, I'm just using XHTML 1.0 template, nothing complicated here.
And once again, I'm assuming that you have some basic knowledge about HTML, sorry, because
this tutorial is going to be about CSS only.
So let's get started with the markup.
We'll make, first we need a page wrapper.
We will, you'll see why we need a wrapper in a moment.
So you know about tags and attributes and so on.
And when you're using CSS, you're going to be using this tag a lot.
It's the div tag.
I believe it comes from a division.
It's used only to separate, you know, at least that's my personal opinion.
That's how I understand it.
It's used to separate one part of your document from the rest of the document.
So when I say, div with an ID, we'll be talking about ID a bit later, with an ID of page wrap.
Normally I'm saying everything inside this div is inside my page wrap or something like
this.
I hope you understand you.
I hope you'll get the concept as we are working on.
I believe the best way to explain it is with practice.
So first we need a page wrap.
Let's, let's see the other, the finished document.
Here we have a header, body container for the, you know, this could be a block, there
could be articles here, there's a sidebar and there's a footer, you know, just a simple
layout.
So before we're going to be making, so let's make the header again, div tag with an ID
of header, close the div, then, then we'll make the content, then we need to make the
sidebar and finally the footer, just one second, okay, so I believe it's, it's about
I might talk about what's this attribute ID, the ID attribute and the class attribute.
They are used to reference your HTML, your markup back in the CSS file.
So okay, we have, let's just make a title, let's say title.
So how do we reference this header division, we'll call it div, how do we reference it
back in the CSS file so we can style it.
Now we, we will use the ID attribute which we, we choose, I can say anything, I can say
header wrap or header whatever, we just keep it simple for now and we can say like this
header, background, red and we, we won't see anything right now because we need to, no
actually we'll see, let's save it and preview it in Firefox and yeah, here we have our
header division with the h1 inside it, so first one, first let's reference the wrapper
and say it's 96 pixels wide and we'll center it, for that we need to say margin is zero
auto, we'll talk about whether those a bit later, for now we just have to take my word
for it, so here we are referencing the header tag, sorry, the, this div with an ID of header
we are referencing this, I lost my top here, so the, my point was that ID is supposed to
be a unique, the ID should be unique for each, for every other tag, for example it would
be, it will be working but it won't be right if I make another div with an ID of header,
you know, for that we need to use class, class works the same way as ID but its purpose
is to use it for when you have many, many divs that need to have the same properties,
for example, let's say that this is body element, this div has class of body element and let's
copy this to all our divs, oops, because all those four elements will have common properties,
so let's continue with the header, now first another important concept that I forgot to
mention, we can reference all tags by just like this, just by typing the tag name and
we are going to reference body in order to change its background, let's just use something
a little bit, light, ee, bb, cc, what's that color, maybe not, ff, aa, gt, let's try this,
it's even worse, okay, whatever, no, I don't like it, let me just copy this color, I liked
it, okay, that's better, so we can reference any group of tags just by typing the tag name
and we, now we are going to use the class in order to define some common properties
for all those four divs, so let's say, what did we call it, body element, now we can see
that I am using a period in the beginning of the line, that's because we are referencing
a class and for all those items I want to say background white and float left, don't
worry about those properties for now, I'll explain later, so now let's delete this, now
if we save and refresh, we can see that the header division has turned white, that's because
we referenced the class, all elements, all tags with class of body elements and we gave
them white background and which tags have class of body elements, all are for tags,
so let's continue, for the header let's say we want it to be 960 pixels, white 200 pixels
tall and that should be it, now I don't know why this hasn't centered, is it because we
have given the body a width of 100%, nope, why didn't it center, oh yeah, maybe I should
just pause it.
Oh yeah.
Oh, yeah, still let me, so this one we don't need, this one as well, okay, we named our
wrapper pagewrap and I was trying to reference it with wrapper, so we need to correct it and
say pagewrap and now if we save and reload it should be centered like so, I guess now
is the time to talk a little bit about the syntax of CSS and it goes like this, you know
the general, excuse me, the general syntax is like this selector, this is where you say
which elements, which tags you want to affect, like for example header or body element, then
those parentheses, in those you need to put the attributes, attributes go like this, attribute
name, semicolon, value and this and it doesn't matter if you put them all on the same row,
like so, that's perfectly fine, you can also another common, I should say layout is like
this, every attribute on a new row, like so, it's more readable but it makes your CSS bigger
and ultimately it can be harder to read, personally I prefer to put everything on one row but
that's just me, so let's continue with our page or layout, so we did the header, so let's
move to the, what do we call it, content, let's go to content and now we'll make it, let's
make it 700 pixels wide, 500 pixels tall, see what we have, but there's a little problem
here, it's not quite like what I showed you, there's no space between those two elements,
what we can do is say for the header put margin on the bottom and make it 20 pixels and now
there should be margin between those two elements, so let's move on, let's say sidebar is, how
big should it be, let's say 240 pixels and 500 pixels tall, like the content area, we'll
make it the same height, so let's see what we have, well same problem, there is no space
between those two elements and we'll say for the content we'll say margin right, 20 pixels
and a good idea is to keep the same margins everywhere on your page just for consistency,
it gives a better and more professional look to your page, let's move to the footer and
let's make it 960 pixels wide and 100 pixels tall and we can see we have a footer, but
no, no space and we can say footer, put a margin on the top, make it 20 pixels and there we
have it, our basic, very, very basic page layout, from here let's use, let's reference
the H1 and style it a little bit, what we can say is I haven't talked about something
very important, that's the priority of selectors, for example if I try to say H1, I'm not sure
if this example will work but let's try, if we say H1 margin 40 pixels, when I say margin,
I mean margin of all sides, top, bottom, left and right, there are also other ways you can
say, you can define margins, for example if we supply two numbers like we did here, let's
just pretend that auto is a number, that means 0 for the top and bottom and auto for the
left and right, also we can say 40 pixels, 30 pixels, 10 pixels, 20 pixels, for example,
that means margin on the top, right, bottom, left, you can remember them just by looking
at the clock and yeah, they are just clockwise directions, top, right, bottom, left, so let's
leave it at 40, refresh and we can see that the title has moved away from the edge of
this div and now what we can also say is, let's make another, let's copy this H1, let's
put it in content, refresh, we can see that both H1s have margin of 40 pixels but what
we can say now is, give a margin of 40 pixels to the H1 only with an ID of, no, only which
is inside the div with an ID of header, so you can stack different selectors and that
means the H1, look for an H1 which is inside the div or any other tag with an ID of header,
so if we save now and refresh, we can see that the H1 which is in the content tag, not
tag element, lost its margins because we're referencing only to the H1s which are inside
header, what we can also say is H1 will give it an ID of title and let's leave this, so
we have both our H1s affected by a certain attribute, a certain style and now if we say
H1 with an ID of title, make it red, so what we just did is said look for an H1 with an
ID of title, so this, the order in which you can supply selectors, no not selectors but
ok the order goes like this, tag dot, actually I'm not really sure about this, ok I'll ask
to correct me in the comments section if I'm wrong but right now it just doesn't want
to pop into my head what was the order, it was something like tag dot class hash tag,
no not tag ID, I'm pretty sure that was the correct order, ok correct me in the comments
section if that's not quite the case and let me see if I haven't talked about something
important, we talked about what CSS for, we talked about how to use CSS, how to link
the CSS file to the HTML file, we discussed the types of selectors that you can use and
that's about it, so look for another tutorial which will cover only HTML, again basic stuff
and Diane, yep we are done for today, my name is Nikolai and look for my other tutorials
in the very near future.
