A small introduction to HTML and CSS

**v1pera** · 02-12-2009

The basics

When creating a website you must save the file into a .hmtl. You can create websites with even notepad. HTML consists of tags which are parts of the html file written within "<...>". Most of tags must be closed with "<.../>", although there are a few exeptions. For example the tag doesn't have an end. It simply indicates where a new row starts.
The very core of every website is this:

<html>
<body>
</body>
</html>

The HTML determining where the website starts and ends, and the body being the part that you can actually see on the website. For example a site that says "Hi!" only needs this kind of a code:

<html>
<body>
Hi!
</body>
</html>

To add a title to your website, you must change the code to look like this:

<html>
<head>
<title>Your title here</title>
</head>
<body>
</body>
</html>

What title does then? This:

Defining individual tags

Here is a part of the HTML code of this site:

The basics

This defines the text color within the tags (underlined text) yellow. There are two "font" tags, both having their individual definitions. (Note that all the tags are invisible within a browser, unless the tag is invalid or not within <html> tags). The composition of a tag with a definition is basically this:

<Tag definition="value">

Based on the information for now, If I would have to write "Hi, I'm Matt", words "Hi" and "Matt" being yellow and size 4, I would do this:

Hi, I'm Matt

There is an easier way to this. You can add more than one definition per tag. Now it looks like this:

Hi, I'm Matt

The code just got smaller. So defining a tag looks like this now:

<Tag definition="value"; definition2="value">

There is even shorter way to do this

CSS

CSS stands for Cascading Style Sheets. It's the most common way websites are designed today. CSS files can be linked into an HTML file or they can be a part of the code. Linking is the easiest way to do this so I'll show just that.

<html>
<head>
<link href="Stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Your title here</title>
</head>
<body>
</body>
</html>

The underlined part of the code is where you insert the directory or url of the css file. A css file looks like this:

tag {
definition=value;
definition2=value;
}

So to make the code shorter you do create a stylesheet, for instance "stylesheet.css" that looks like this:

font {
color:#FFFF00;
font-size:x-large;
}

The CSS code looks a lot different from what the HTML was. This is relatively normal. You might notice two things: For example, the color doesn't say yellow, instead it's a weird serie of numbers and letters. It's a hex decimal code (here's a nice converter: [URL="http://www.psyclops.com/tools/rgb/"[/URL]).

In CSS, you must insert colors as hex decimal, otherwise it doesn't understand the code and ignores it. Also, the font size changed. In CSS you can use either pixels or smaller, small, medium, large, larger, x-large etc. Medium is the normal font size used on the site, or 12 by default. x-large is 3 bigger than that. If medium was 1, then x-large was 4. This may sound confusing but once you get into it, it's simple.

Now that you have your css file, you link it into the html file with this piece of code:[/color]

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

[color="Yellow"]So now your code looks like this:

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Your title here</title>
</head>
<body>
Hi, I'm Matt
</body>
</html>

Stylesheet works in the following way: You insert a tag and give it definitions. When you link (or insert) a stylesheet into an HTML document it automatically gives the definitions of the css file to all the specified tags. The tags may also have individual settings that almost override the CSS file, but generally this saves space and is easier to update, since you only have to change the css file for most of the changes. Anyways you can now drop the definitions within the font tags from the code. It now looks like this:

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Your title here</title>
</head>
<body>
Hi, I'm Matt
</body>
</html>

You really can't go further than this.

ID's

What if you use the same tag over and over again and all of the individual tags have different settings? CSS can't help with that, right? Well it actually can. Here's where the id's come in.

This time the guy has asked you to make a website that says "Hi, I'm Matt. I live in Washington", "Hi" and "Matt" being yellow and size 3 bigger than other, "I live in" being green and "Washington" being red. You make a few changes into your stylesheet.css file and now it looks like this:

font {
color:#FFFF00;
font-size:x-large;
}

#1 {
color:#00FF00;
font-size:medium;
}

#2 {
color:#FF0000;
font-size:medium;
}

You still have the original definitions for font tag, but you also have definitions for #1 and #2. What are these then? In a CSS file, "#" is used to define an id, instead of a normal tag. You can insert any id into any tag that has definitions. To insert an id into an HTML tag, you do the following:

<tag id="specified id">

So now you don't have to do much changes to the HTML file. Once you have done the changes, it looks like this:

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Your title here</title>
</head>
<body>
Hi, I'm Matt, I live inWashington
</body>
</html>

Let's compare the body of the code above to the body of the code you would have done if you didn't know about CSS:

CSS:
Hi, I'm Matt, I live inWashington

No CSS
Hi, I'm Matt.I live inWashington

Shorter huh? Besides... You can use the same id's for multiple different tags as many times as you wish

**Cenimap** · 02-14-2009

Nice. +rep

**suicidity** · 02-14-2009

I think I'm going to vomit.

>> A slightly better way than a crap-load of fonts..

Code:

.blank {
    font: Arial 10px;
}

.blank h3 { color: #FF00FF; }

.blank h2 { color: #00FF00; }

.blank h1 { color: #A080FF; }

Then html could be like..

Code:

<div class="blank><h3>COLOR3</h3>, <h2>COLOR2</h2>, <h1>COLOR1</h1></div>

While it very arguably loses it's meaning; It could be upheld depending on the situation, possibly a defining of importance of text for a specific body?
"Ugly", but still looks better that what you have there.

**v1pera** · 02-16-2009

Originally Posted by suicidity

I think I'm going to vomit.

>> A slightly better way than a crap-load of fonts..

Code:

.blank {
    font: Arial 10px;
}

.blank h3 { color: #FF00FF; }

.blank h2 { color: #00FF00; }

.blank h1 { color: #A080FF; }

Then html could be like..

Code:

<div class="blank><h3>COLOR3</h3>, <h2>COLOR2</h2>, <h1>COLOR1</h1></div>

While it very arguably loses it's meaning; It could be upheld depending on the situation, possibly a defining of importance of text for a specific body?
"Ugly", but still looks better that what you have there.

Well I wasnt exactly writing a guide to writing the cleanest html. I was writing about the very basics.

**cygnusX** · 02-26-2009

I would recommend this to begginers CSS Tutorial

. No offence but it's much better and covers all aspects of CSS.

Shout-Out

User Tag List

Thread: A small introduction to HTML and CSS

Thread Tools

Search Thread

A small introduction to HTML and CSS

Similar Threads

Looking for a Developer who knows PHP, HTML and CSS.

CSS ,HTML and XHTML Bible 3rd Edition

Wiki and CSS-BBCode

Valkor (html and pdf) and Spugnort html guides

DoD and CSS consoles

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino