Welcome Guest [Log In] [Register]
Welcome to Project Tenacious. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Css: Small Beginnings
Topic Started: Jul 17 2009, 11:06 AM (133 Views)
omoi
Member Avatar
meshitsukai
Co. Founders
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:
 

<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:
 

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:
 

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:
 

<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:

Quote:
 
/*
at the beginning of the comment and
Quote:
 
*/
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.
Offline Profile Quote Post Goto Top
 
MrRataIsHere
Member Avatar
A Creative Mind
Founder
That's the thing about coding. Despite telling the basics of the basics, it still has complexity behind it all. Some greater than others, and yet you manage you grasp it all in the long run. This reminds me of the things we did to make the webpage in geocities back in 2007. Thanks again brother.

P.S. It just bothered me today, but does "href" mean a term abbreviated as "Home Reference"? I mean since that part of the code is used to pick up a reference from a different location.

-CFRatao
Offline Profile Quote Post Goto Top
 
omoi
Member Avatar
meshitsukai
Co. Founders
hypertext reference
Offline Profile Quote Post Goto Top
 
MrRataIsHere
Member Avatar
A Creative Mind
Founder
It had to be one or the other, though I guess hypertext reference would make more sense considering the name of the language: Hypertext Markup Language. Much appreciated, brother.

-CFRatao
Offline Profile Quote Post Goto Top
 
omoi
Member Avatar
meshitsukai
Co. Founders
sure things ;)
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Code Snippets · Next Topic »
Add Reply