Threaded Mode | Linear Mode

hyperstream · 08-13-2010, 02:22 PM

Id like to share a few things that i learnt along the way when picking up HTML.

It was a year or so ago when i got a interest in modifying site templates(I know right, a ripper!) I only wanted to change small things just to customize it for myself. I soon learnt that it was not a easy task, this was thanks to CSS. Which i hated at the time but its really important that we use CSS(Cascading Style Sheet) to give our HTML layout a make over! its how we make it look fancy and pretty.

CSS Positives(From my view)

We can use one .css file to layout our whole page.We can use one .css file to layout our whole page.
We can also change the whole site by just changing one file!(or make a second one to have two different styles!)
Or say we want to change the borders on every input box(where we type our details into!) we can do this with one/two short lines of CSS
We can also change the whole site by just changing one file!(or make a second one to have two different styles!)
Or say we want to change the borders on every input box(where we type our details into!) we can do this with one/two short lines of CSS

CSS Negatives(From my view)

It can be time consuming trying to target the right thing we want to style
It might look good in your browser, but might be completely messed up in other browsers/os's
CrossBrowser support can be a real pain (^)

Some of the key things i learnt, were from IRC channels on freenode chat network (#CSS) great place for help with CSS.(Admins if this isnt aloud just remove this from my post, im not intending to advertise anything)

There is a points system when you are trying to select certain things to style.
I wont go to far into this just yet as it gets heavy quickly - i advise doing a tutorial or two first before worring about this.

Anyhow: tagging HTML elements such as:
//HTML
<html>
<body>
<h1 class="Header1">This is a header</h1>
<h2 id="Header2"> this is a smaller header</h2>
</body>
</html>

//CSS
body { background-color: black; }
.Header1 { color: pink; }
#Header2 { color: green; }

<body> - is an HTML element. as you can see in the CSS section, we are selecting the html with body { } - This is worth 1 point.
.Header1 - This is how we select a class, anything with class=".Header1" will be effected - This is worth 10 points.
#Header2 - This is how we select an id, same goes again, anything with this id will be effected by our CSS style. Its not good to use an ID more than once! and it bad practise(use classes in stead!) - This is worth 100 points.

NEVER USE TABLES to make the layout of your site, its un-needed junk and poor quality coding, tabular data should be used with tables!

I hope this helps, i will add more to this pretty soon. There are lots of other things that need to be mentioned on the topic of HTML/CSS.

BCKLUP · 08-14-2010, 02:35 PM

Wow, You know more than my first week with CSS lol

~~_S_H_I_R_~~ · 08-15-2010, 04:28 PM

thats help me alot :)
im starting my own web...
and I using this guide with more guides :)
Ty Very Much.

Eleqtriq · 08-20-2010, 05:22 AM

Some useful information :) I will be creating tutorials on HTML and CSS when I start creating JavaScript tutorials, do you mind if I use some of your positives vs negatives in them? I'll credit you obviously.

karm09 · 09-02-2010, 04:09 AM

well for me , i if i will a website, i'd rather make it to flash and simply embed it to dreamweaver to make it more fancy and awesome.. Most of us dont know how to make it more great and fancy thats why it comes with simple and non attractive work as others did.. If you are one of the new in this html, better to learn the basic first.. Learn how to make it in notepad.. and save it as .html...

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	my website		0	86	Today 05:04 PM Last Post: