Css Basics Tutorial

Neutrality

Feb 27 2005, 03:11 PM

This tutorial will help those who want to get away from the mediocre formatting functions of HTML and into the stylizing formatting functions of CSS. Now here is a simple run-down of what CSS is. CSS stands for Cascading Style Sheets. It's used
to expand the possibilites of a website in terms of color, style, positioning and whatnot. It's a very simple scripting language (or markup language if you will ),
that has no other purpose than to add style to a website.

Now, let's get into the process of using CSS in webpages. Let's start off with the
ways CSS can be used. It can be used in three ways: a) through the current page,
b ) through an external .css file and c) through the style attribute in any HTML
element. I'll be focusing on the first one in this tutorial only.

This is how it would be written. But don't worry, I'll explain what it all means.

CODE

Now, this is the set up of every css that you use within the current page. The <head> tag should be recognizable to you. The STYLE tags let you create a
stylesheet within the webpage's HEAD tags (always remember to put stylesheets within the HEAD tags).

A stylesheet is just a set of style properties as you will see. The 'type=text/css' component makes sure that the Browser reads the text as CSS and not as HTML. Okay, you now maybe wondering what these  are for. Well, this is an old practice done by many specifically for users with older browsers. Older browsers can not read CSS, so some use those  to "comment" out the code. That means that the Browser does not look at that code. It just continues interpreting the HTML code (this same procedure applies to Javascript as well).

Now that you have the format down pat (well I hope you do), let's move on to some actual style properties. Here is a small example:

CODE

Here we have two html tags, BODY and TABLE. But they aren't tags. They are referred to as elements. These elements have been given several properties.
As you can see, there are a number of properties inside these elements.

A property is basically the same as an attribute in HTML. The only difference is that properties are assigned values without an equal sign. Instead, a colon (

is used. And after each property set, a semicolon(

is used. Please be sure to use these properly. Your stylesheet will not work properly if you leave out a colon or semicolon. Each set of styles needs curly brackets { }. Don't forget
these either, or else your stylesheet will not work.

Now, the BODY element contains three properties: background-color, font-family,
and font-size. I'm assuming that you know what these mean, so I don't really need
to explain them. The TABLE element contains one property - background-color.

The BODY and TABLE's properties are global - this means that all HTML tags,
including BODY and FONT, will take on the same properties as these two elements. This can be a blessing and a curse. Unless you use classes (which I will get into soon), everything within the body of the page will take on those font properties. And the same goes for the tables. Every table used in an HTML page will have the same background color.

But what if you want more flexibility? What if you want to have different tables with
different colors and different fonts? Well, this is where classes come in. Classes are basically sets of properties that don't effect all HTML tags in a webpage -
but effect specific tags. Think of a class as a set of traits. Each human has a set of traits. One human can draw, write fast, swim, while another can run fast, read quickly, and dance. The traits are the properties. I hope I didn't lose you there.

Here's an example of a class:

CODE

Okay, there are three classes in this code. Each class in this code (myfirstfont, mysecondfont, mythirdfont), set aside a number of properties for any specific HTML tag. These would most likely be used in FONT tags, but that's not important
right now. You understand what these properties mean, so now what? At this point,
these are useless. Utterly useless. For them to be of any use, you'll have to embed
them into HTML (don't worry, it's not hard). Here is a sample HTML page that
embeds those three classes into FONT tags:

CODE

<html>

<head>
<style type='text/css'>

</style>
</head>

<body>
<font class="myfirstfont">Here is my first font.</font><br>
<font class="mysecondfont">Here is my second font.</font><br>
<font class="mythirdfont">Here is my third font.</font>
</body>

</html>

Take a look at those three lines of HTML between the BODY tags. There are
three FONT tags used. Now, the three classes we made earlier have been embedded into the HTML. You do this by using the CLASS attribute as shown
above.

I hope this tutorial was of use to you. It's purpose was to introduce the basics to those just starting off in web design.

I've provided a list of CSS properties. If you want to learn what these properties
do, plus many other properties, visit http://htmlgoodies.com/beyond/css/cssref/.

text-align, text-decoration, text-transform, font-family, font-size, color, font-weight
font-style, margin-left, margin-right, margin-top, margin-bottom, background-color
background-image, vertical-align, align

Roly

Feb 28 2005, 02:29 AM

You can also use the link tag to link to an external style sheet

<link rel="stylesheet" type="text/css" href="default.css" />

In the default.css file you put the CSS code.

mizako

Feb 28 2005, 06:47 PM

QUOTE(Roly @ Feb 28 2005, 02:29 AM)

You can also use the link tag to link to an external style sheet

<link rel="stylesheet" type="text/css" href="default.css" />

In the default.css file you put the CSS code.

Totally agree Roly. In that way you provide a unique CSS page for the whole site and you decrease the size of your html pages avoiding repeating the style tag in every page.

spacemonkey

Mar 3 2005, 07:40 PM

Also, you should point out the different types of classes in CSS.

A "Generic" class is the type of class that you have used in your tutorial, it can be applied to any HTML element:

CODE

.verdana_class {
font-family: Verdana;
font-size: 8pt;
color: #FF0000;
}

<table class="verdana_class">
<tr><td>blah</td></tr>
</table>

A "Tag Level" class can only be applied to a certain tag that you identify. This way, you can use the same class name, but make it tag-specific in order to apply different formatting where needed. An example:

CODE

div.verdana_class {
font-family: Verdana;
font-size: 10pt;
color: #FF0000;
}
span.verdana_class {
font-family: Verdana;
font-size: 10pt;
color: #00FF00;
}

<div class="verdana_class">This is red Verdana text</div>

<span class="verdana_class">This is green Verdana text</span>

I should also mention that new standards are being created in which every tag must be lower case, so:

CODE

BODY { text-align: left; }

should become:

CODE

body {text-align: left; }

A good reference for HTML and CSS tags can be found at http://www.htmldog.com/.

andrewsmithy

Mar 16 2005, 04:36 AM

Additional CSS Stuff

Here are a couple more basic CSS tips that might be helpful:
First, if you want to access a element further down within a structure, you can prefix the element you want to add the styles to with the element name. For example:

CODE

In the previous example, we've taken a <span> element and given it a style based on its parent tag being a <div> tag. This way you can create unique styles without having to give it a class or an id.

Font Styling

I'm going to show you some easy font controls in css. This is part of what makes css so much more powerful than plain HTML. You can precisely control the appearance of your page with css.

I'll just list several css directives that you can use to format your text with:

font-family: Name_of_font, Name_of_backup_font, etc;
font-size: [x-small, small, medium, large, larger], [12 px, 15pt, 3ex (the height of the letter "x" in the font)]; // These are just several possibilities. Subsitute your own values in.
font-weight: 100-800, [normal, bold, bolder]; //These control the font weight, or how bold it is
color: [#00000, "Hexadecimal"],[rgb(255,255,255) "Red Green and Blue Values, respectively, with values from 1 to 255"] or the sixteen pre-defined colors such as [red,green,blue,black,white,orange,magenta,silver,etc.];
Other Directives that may be useful would be:
line-height:px, pc (picas), pt, in, mm, cm, em (height of the letter "m" in the font)
letter-spacing: Same as above

Browser Bugs

Don't freak out if your css is not working the way you want it to. Sometimes certain browsers don't support css the way the W3C (World Wide Web Consortium) wants it to be. You can't always fix that. Netscape 4.x has a bug where if you resize the page, the page loses its styling. I'll write a quick article on how to fix that too. Just remember, its not all your fault.

I guess that's all I have to say for now. I'll try to post more stuff for you that need to learn css. Hope that this helps.

haron

Mar 17 2005, 01:59 PM

Good tutorials!

Most browsers support CSS 1.0, but CSS 2.0 is not supported in some browsers. Gecko browsers (Firefox and Mozilla) support CSS 2.0, but Internet Explorer does not.

Visit this page in Internet Explorer and any Gecko Browser.

http://alas.matf.bg.ac.yu/~mm01142/uvod

Site is in Serbian, but you can see menu above in Gecko Browsers, but not in IE.

andrewsmithy

Mar 18 2005, 02:12 AM

Netscape Browser Resize Fix

Sorry, but I couldn't find the edit button, so I had to double post. Briefly, I'll explain the Netscape browser resize bug. First, the problem is that when you resize Netscape 4.x all the CSS styling disappears, and the html formatting takes over. To fix this you must use some JavaScript. First, you need to place this code in the <head> tag of your page.

CODE

This will solve the resize bug. Reply if this helps you at all.

leiaah

Jun 18 2005, 08:23 AM

Hey how about putting images on a cell?

I was given a code to switch styles on a click of button. So far I know how to change fonts styles and some background but I don't know how to change images within a cell. If I have a table with two cells with two different images, clicking the style-switch button changes the appearance of the page and naturally those two images.

What's the code in CSS for images inside a cell/table? I really hope someone could help me out. I've been looking for this topic for days now!

whyme

Jun 22 2005, 11:16 PM

Just a note,

Technically, you should not use these

CODE

by incoporating the CSS directly to your HTML file, your broswer needs to load the CSS again and again, which increases page load time.

Instead, you should create a seperate CSS file, and include it in the <head> tags like this:

CODE

whyme

leiaah

Jun 25 2005, 07:36 PM

I got it! Everything works fine now. Check my site it has a CSS style switcher code that I had just added.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE