silver-melusine
October 22nd, 2006, 06:53 PM
- Advanced HTML: Lesson # 1 (The Basic Stylesheet, pt. 1)
====================================================================================
1) What are Cascading Style Sheets?
2) Tools to create stylesheets
3) Your first stylesheet
4) Resources
5) Example
6) Your Assignment
====================================================================================
1)
Cascading Style Sheets or CSS allow you to control the layout and look of your page easily. You will find that using Cascading Style Sheets are in many ways easier than using some html tags that can be troublesome. With CSS you will find that it is much easier to create webpages without having the hassle of using most of the tags. You will still have to use some, but with using CSS the use of some html tags are eliminated. By the way, CSS alone would be an entire class. There is so much to learn that you would have to split it up into a class. I just want to teach you all the basics.
------------------------------------------------------------------------------------
2)
The tools are very simple. You need your hands and your handy dandy Notepad application. One thing that is different from before is that we are going to be adding a new type of file to our reportoire. This file is called the .css file. This file is what we will be putting our coding into. We will still be using the .htm/.html file since that is our main file. This will be explained better in the next section. Oh...one more thing. You do not have to use a .css file. In fact you can put your CSS coding in your html file. However, it is much easier to put it in a file of its own and reference back to it. Okay lets get to it.
------------------------------------------------------------------------------------
3)
Okay first things first. Lets open our Notepad application. We basically start off the .css file the same way we do our .html files. Except we skip the head and title tags. So you should have this:
<html>
<body>
Okay, now once you have that we get into the good stuff. Now for our first assignment we are going to be dealing with fonts. So lets begin.
<html>
<body>
<style type="text/css">
<!--
Let us stop before we go any further. The next two lines added begins the CSS coding in which you will be putting your properties in. Note: When doing CSS, as you will notice, we do not use the brackets that we have normally been using. You will see in a few moments. Let us continue.
<html>
<body>
<style type="text/css">
<!--
body {font-family:verdana; color:black; font-size:10pt}
-->
</style>
You are probably wondering what the heck did she do? Well, let me break it down. First, the 'body' part is the particular tag in which you want to change. You can also do this with the table tag and several other tags as I will show you in the next lesson. For now we are going to do a simple CSS page. Now, like I said before, you do not enclose anything in brackets. Instead you use the {} signs as your start and close brackets. Moving on, let us review what is inside the {} brackets.
font-family is used to specify either a particular font or a particular family of fonts. I chose verdana as my font. So it will specify that as my font in the body of my page.
color applies to the font color. I specified black and it will apply to my font color in my page.
font-size is used to specify the size of the font. Remember that you do not want to go lower than a 7 pt font. It gets extremely hard to see if you go lower. Believe me I have tried. If you do not know how your particular font will look in a size pt. Go to your word processor and look at the size on there. It is basically the same size you will get on your page. I chose a 10 pt for my page so it will apply.
You can see in my example that the font on my page has been changed to what I specified. You can do plenty other things as well, however, we are going to stick with the basics for the first part of the lesson.
You see that I have also ended the coding similarly to the way I began it. Except that there is no exclamation mark in the second to last line in the coding. The last line is just a simple ending tag. So you think you understand it so far? Well we will see when you do your assignment. If you have any trouble at all please email me at silver_melusine@yahoo.com or pm me at MysticWicks.com.
Now, for the last part. In order to integrate the .css file into your .html file you need to put a special line of coding in. For example:
<html>
<head>
<title>Advanced HTML: Lesson # 1</title>
<link rel="stylesheet" href="a1.css">
</head>
<body>
Welcome to the first Advanced HTML lesson!
</body>
</html>
You notice that between the </title> and the </head> there is a line of coding. The link begins your coding. The 'rel="stylesheet"' means that it is linking to a stylesheet in which you are going to specify. 'href' is the link itself. So I linked to a1.css and the CSS coding that I put in my .css file will make the changes in the html file. So that is it. That is how you make a .css file and integrate the changes. However, that is the beginning. Part 2 will finish off the basics.
------------------------------------------------------------------------------------
4)
Mulder's Stylesheets Tutorial - http://webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
Guide to Cascading Style Sheets - http://www.htmlhelp.com/reference/css/
------------------------------------------------------------------------------------
5)
Example 1: http://www.geocities.com/mwhtmlclass/advancedhtml/a1.html
------------------------------------------------------------------------------------
6)
Your assignment is to basically recreate what I have done in any font, color, or size you wish. I would also like you to do a web search for more resources for us to add to the class. I will give you two weeks to complete this lesson because Goddess knows I will need it to create your next lesson. ^_^ I am sure you will have your assignment done before then though. Hope you enjoy learning!
====================================================================================
1) What are Cascading Style Sheets?
2) Tools to create stylesheets
3) Your first stylesheet
4) Resources
5) Example
6) Your Assignment
====================================================================================
1)
Cascading Style Sheets or CSS allow you to control the layout and look of your page easily. You will find that using Cascading Style Sheets are in many ways easier than using some html tags that can be troublesome. With CSS you will find that it is much easier to create webpages without having the hassle of using most of the tags. You will still have to use some, but with using CSS the use of some html tags are eliminated. By the way, CSS alone would be an entire class. There is so much to learn that you would have to split it up into a class. I just want to teach you all the basics.
------------------------------------------------------------------------------------
2)
The tools are very simple. You need your hands and your handy dandy Notepad application. One thing that is different from before is that we are going to be adding a new type of file to our reportoire. This file is called the .css file. This file is what we will be putting our coding into. We will still be using the .htm/.html file since that is our main file. This will be explained better in the next section. Oh...one more thing. You do not have to use a .css file. In fact you can put your CSS coding in your html file. However, it is much easier to put it in a file of its own and reference back to it. Okay lets get to it.
------------------------------------------------------------------------------------
3)
Okay first things first. Lets open our Notepad application. We basically start off the .css file the same way we do our .html files. Except we skip the head and title tags. So you should have this:
<html>
<body>
Okay, now once you have that we get into the good stuff. Now for our first assignment we are going to be dealing with fonts. So lets begin.
<html>
<body>
<style type="text/css">
<!--
Let us stop before we go any further. The next two lines added begins the CSS coding in which you will be putting your properties in. Note: When doing CSS, as you will notice, we do not use the brackets that we have normally been using. You will see in a few moments. Let us continue.
<html>
<body>
<style type="text/css">
<!--
body {font-family:verdana; color:black; font-size:10pt}
-->
</style>
You are probably wondering what the heck did she do? Well, let me break it down. First, the 'body' part is the particular tag in which you want to change. You can also do this with the table tag and several other tags as I will show you in the next lesson. For now we are going to do a simple CSS page. Now, like I said before, you do not enclose anything in brackets. Instead you use the {} signs as your start and close brackets. Moving on, let us review what is inside the {} brackets.
font-family is used to specify either a particular font or a particular family of fonts. I chose verdana as my font. So it will specify that as my font in the body of my page.
color applies to the font color. I specified black and it will apply to my font color in my page.
font-size is used to specify the size of the font. Remember that you do not want to go lower than a 7 pt font. It gets extremely hard to see if you go lower. Believe me I have tried. If you do not know how your particular font will look in a size pt. Go to your word processor and look at the size on there. It is basically the same size you will get on your page. I chose a 10 pt for my page so it will apply.
You can see in my example that the font on my page has been changed to what I specified. You can do plenty other things as well, however, we are going to stick with the basics for the first part of the lesson.
You see that I have also ended the coding similarly to the way I began it. Except that there is no exclamation mark in the second to last line in the coding. The last line is just a simple ending tag. So you think you understand it so far? Well we will see when you do your assignment. If you have any trouble at all please email me at silver_melusine@yahoo.com or pm me at MysticWicks.com.
Now, for the last part. In order to integrate the .css file into your .html file you need to put a special line of coding in. For example:
<html>
<head>
<title>Advanced HTML: Lesson # 1</title>
<link rel="stylesheet" href="a1.css">
</head>
<body>
Welcome to the first Advanced HTML lesson!
</body>
</html>
You notice that between the </title> and the </head> there is a line of coding. The link begins your coding. The 'rel="stylesheet"' means that it is linking to a stylesheet in which you are going to specify. 'href' is the link itself. So I linked to a1.css and the CSS coding that I put in my .css file will make the changes in the html file. So that is it. That is how you make a .css file and integrate the changes. However, that is the beginning. Part 2 will finish off the basics.
------------------------------------------------------------------------------------
4)
Mulder's Stylesheets Tutorial - http://webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
Guide to Cascading Style Sheets - http://www.htmlhelp.com/reference/css/
------------------------------------------------------------------------------------
5)
Example 1: http://www.geocities.com/mwhtmlclass/advancedhtml/a1.html
------------------------------------------------------------------------------------
6)
Your assignment is to basically recreate what I have done in any font, color, or size you wish. I would also like you to do a web search for more resources for us to add to the class. I will give you two weeks to complete this lesson because Goddess knows I will need it to create your next lesson. ^_^ I am sure you will have your assignment done before then though. Hope you enjoy learning!