CSS: Small Beginnings [#1]

CSS: Small Beginnings [#1]

Postby omoi » Mon May 28, 2007 4:00 am

As the aim of these CSS tutorials is to get you up and running, I won't go into many (if any) details about its history; you can find that here.

This tutorial is going to be on how to make CSS references. Since CSS was made to give HTML a boost, you will always see HTML paired up with CSS; that is, if you see CSS anywhere, HTML is sure to be close by. That being said, how do you use it? What does it look like?

Glad you asked.

Here are a few things you should know before we start.

CSS has three different flavors: external, internal, and inline.

Let's talk about the external CSS today.

External CSS lives in a file to itself. After you finish writing your CSS file, you can drop a little line of code into your HTML file that uses whatever you wrote in the CSS file to figure out what your webpage should look like.

Wow, that sounds complex... but it's not.

Let's use the "Hello World!" example from super3boy's blog. The actual code is here. It looks like this:

Code: Select all
<html>
<body>
Hello World!
</body>
</html>


When you are making your external CSS file, all you have to do it open up a blank file in notepad or something like that and start typing! No special software required (yay for the good guys!). The first thing you type is the html tag you want to change. In this case, we'll use the body tag.

Code: Select all
body{...}


"That pretty interesting, Omoi.... So, um... what goes in the bracket?"

Well, that's where attributes come in. You have a whole bunch of them and you can call them up in order to change something. For today, let's change the font color and the background color. We are going to make the background color red and the text color orange just for today.

Code: Select all
body{
background-color:red;
color:orange;
}


Yay! It's really simple for now, but you have officially made a CSS file! Congrats! Make sure you save it with the file extension ".css". If you don't, your HTML file can't use it. In addition to that, be careful if you are making this in notepad; notepad wants to make everything a txt file. Everything. Please makes sure, when you are saving, that the file type box on the bottom says "All Files" and that you typed ".css" in the file name. You can name this file "mycss.css" for now.

"But what would that look like on the HTML page?"

It wouldn't look like anything because you haven't linked the files together yet. For that, you have to add a line or two of code and you're set. Let's look at that code now:

Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
Hello World!
</body>
</html>


"Ooh, shiny...," you say (you'd better be saying it....)

Let's translate all of that code.

link = "I want to link my file to this page" as far as your HTML is concerned. You have to make sure to add this line to every page that you want to use your pretty CSS file with, otherwise it won't be used and that's sad.

rel = "this is the relationship my file has to this page; it's a stylesheet". Although you know that, your HTML file does not, so be sure to let your page know by including this attribute.

href = "my file is right here". If you don't tell your HTML file where to find your CSS file, it won't look (lazy, HTML file....), so be sure to tell the HTML file exactly where your CSS file is.

That extra slash at the end is there because today's web standards prefer that you include a slash before you close a tag that doesn't have a closing tag. There are a couple of tags like that like :

<input />
<br />
or
<img />

It's sort of optional, but it would be a good idea to get used to typing it there every time.

As an extra note, you can make comments in CSS using:

/*
at the beginning of the comment and
*/
at the end of the comment. Your HTML file cannot see anything in between those two markers, so please be careful about using both of them when you use them and using them in the right places.

Well, there you have it: a short and sweet tutorial on external CSS. On our next go-round, we will be talking about internal and inline CSS.
Last edited by omoi on Wed Jun 06, 2007 1:04 am, edited 2 times in total.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Small Beginnings

Postby super3boy » Mon May 28, 2007 8:54 am

Sweet! When you get on I will make you a blog.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Small Beginnings

Postby Brent » Mon May 28, 2007 3:24 pm

Looks good. One thing though, the bold bbcode doesn't work within the code bbcode. So you may want to remove the
Code: Select all
[b]
and
Code: Select all
[/b]
I see everywhere. ;)
Image
User avatar
Brent
Premium Member
Premium Member
 
Posts: 1821
Joined: Wed May 23, 2007 8:38 pm
Location: AZ, USA

Re: CSS: Small Beginnings

Postby super3boy » Mon May 28, 2007 5:09 pm

I wonder if I can do a custom bbcode for that.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Small Beginnings

Postby omoi » Mon May 28, 2007 10:59 pm

Computer-Geek wrote:Looks good. One thing though, the bold bbcode doesn't work within the code bbcode. So you may want to remove the
Code: Select all
[b]
and
Code: Select all
[/b]
I see everywhere. ;)


Done.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Small Beginnings

Postby super3boy » Tue May 29, 2007 2:49 pm

Great. Looks better.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest