Hi I'm Andy — this is the personal weblog of Andy Widodo

This tutorial is a CSS tutorial for beginner..in this tutorial, I presume that we have already knew the basic HTML.

The first thing you should know before applying CSS in your web pages is defining the CSS to be able to be accesed by your web pages.
There are 2 ways in defining your CSS to be accessible by your page, those are internally (in the same file with your HTML pages) and externally (as an external file).

Ok, let’s start by the first way to define your CSS

- Define your CSS internally
The normal tag structure of an empty HTML page is like this :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

and now to define your CSS, all you have to do is write this line before the <body> tag :

<style type=”text/css”>
</style>

then inside the <style> tag you can define the CSS of the HTML page, for example :

<style type=”text/css” >
body {
background:#000 repeat;
margin:0;
padding:0;
}
h1 {
font-family:”Verdana”, Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0;
padding:0;
}
h2 {
font-family:”Verdana”, Arial, Helvetica, sans-serif;
font-size: 10px;
margin:0;
padding:0;
</style>

By the style we have defined above, then we can apply it to our HTML pages.
Remember that the visible styles in the HTML pages are the only styles which we have already defined.

- Define your CSS externally
We can also define the CSS externally by linking the css file which is not defined in the html page. for example, i have the css like the example above in a file named style.css, so all you have to do, to be able to apply your CSS in your HTML pages, just write this line before the <body> tag :

<link href=”link/to/your/css/file.css” media=”all” rel=”stylesheet” type=”text/css” />

Where the ‘media’ value depends on the media you are working on for your CSS to work.

Well, now we know how to define the CSS, and now it’s up to you on how you define your CSS, but I think it’s easier to put your styles in a different file, so it will be more comfortable for editing.

Another tips, please create your styleguide of your HTML pages first, before proceeding to HTML template building.

Hope this tutorial helps..cheers

ajari CSS ndyk..

mowslotion August 31, 2006 — 4:50 pm
so dude, what is the different between:
1.

—- and —-
let say:
2. @import “file.css”

tomfreakz September 2, 2006 — 10:35 pm
whoaaa my last post is not displayed as a normal text…

tomfreakz September 2, 2006 — 10:37 pm
If you use “import”..it’s basically the same…but first thing you must know in “import”, if you want to save your web pages, the css file won’t be included..and also not all browsers support “import”, you can check it out here.

Also “import” is usually used when you want to hide a style from certain browsers.

hope it helps..

andy September 4, 2006 — 10:34 am