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.
