Personal Development for Smart People^TM Forums

Bitsy · 08-09-2008, 09:02 PM

I have been wondering what the difference between CSS and HTML? What are they? I had imagined they are two different coding languages to make websites with, but I don't really know. Why would there be two unless one couldn't achieve different things than the other?

Can someone tell me how they are different and what can you do with the one that you can't do with the other? And if you are going to make a website, which one of these are you supposed to use?

illuster · 08-09-2008, 09:53 PM

Look at following URL for a limited explanation:
WikiAnswers - What is the difference between HTML and CSS

Basically HTML is used to put everything in a webpage.
You define the image, you type the text, links, etc…

CSS is then linked to the HTML "to make it look pretty".
You have a lot more lay-out possibilities with CSS than if you’re only using HTML.

Lanya · 08-09-2008, 09:54 PM

HTML is like the base language. CSS is like a support language that makes it easier to maintain a lot of web pages.

So for example, say you wanted to make 30 pages with dark green, underlined text with the "Lucida sans unicode" font. Using just HTML, you'd need to write this...

Code:

<html>
<font="lucida sans unicode"><color="red"><u>Blah blah yadda blabbity etc.</u></color></font>
</html>

...for each of these 30 pages.

But what if you decided you want to change the look of all the pages, so that all text color was green? You'd have to edit each of these 30 pages, and change "red" to "green." Very tedious.

With CSS, you can set up a page that takes care of all of these. Like this:

Code:

.content {

color: red;

font-family: lucida sans unicode;
}

Your HTML pages can have just the following:

Code:

<html>
<link rel="stylesheet" type="text/css" href="http://www.justzelda.com/css/green/green.css" />

<class="content">Blah blah yadda blabbity</class>
</html>

And if you want to change the text color from red to green, you only need to change that one CSS file, and it changes all 30 HTML files automatically.

In short, CSS makes it easy to change multiple HTML pages at once.

If that explanation's confusing, that's alright. I was confused, too. I only got a really good understanding of it by finding tutorials and making pages. Mostly from W3Schools Online Web Tutorials

Good luck!

Bitsy · 08-11-2008, 02:19 AM

Ah, thanks!

Lanya, I found that site too just after I posted the thread.
I started on the HTML one. It's fun so far

.
Should you learn both or just one, and if just one, which one is best to learn?

Minsc · 08-11-2008, 05:12 AM

Quote:

Originally Posted by Bitsy

Should you learn both or just one, and if just one, which one is best to learn?

You need both to make any non-trivial web page. You should just learn both of them at the same time. HTML has things like the font tag which are useless if you use CSS(so no reason to learn it), and there are a lot of things possible with CSS that you can't do in HTML(like positioning elements).

Anyway, CSS is dependant. It needs something to change the appearance of. You could either use it with HTML or XML, for example.

I'd recommend learning how to just use HTML first(ex. how to make a page with a title and some text that's a valid web page, use a validator for that) and then start with CSS and learn any HTML you need as you go. Learning CSS will help you understand how HTML works(ex. inline and block elements) and it'll be very easy for you to use a new HTML tag if you understand CSS.

W3Schools Online Web Tutorials is a good place to learn because they have examples for most concepts which you can modify the source code of. It is incomplete though so after you've been developing for a while you might want to read the specs(here: World Wide Web Consortium - Web Standards ).

Also you should probably learn XHTML rather than just HTML. (HTML has things like implicit tag closing for some of the tags but not others; to me XHTML makes more sense)

Good use of CSS will cut down on the ammount of code you need to write and make it easy to change your web page. CSS selectors let you style tags depending on their location in a document which will reduce the number of id and class tags you'll need.

For example, you could have every other row of a table be a different color(this isn't valid HTML btw):

.table1 tr.a td { background-color: red; }
.table1 tr.b td { background-color: blue; }

<table class="table1">
<tr class="a"><td>A</td><td>B</td></tr>
<tr class="b"><td>C</td><td>D</td></tr>
<tr class="a"><td>E</td><td>F</td></tr>
</table>

If you wanted another table on your page with different colors, you could just copy and paste that one and change its class to "table2", and then make two rules for it:

.table2 tr.a td { background-color: yellow; }
.table2 tr.b td { background-color: white; }

Since the rows with class "a" and "b" are part of table2 now, they're yellow and white and you don't have to change every row of the table. You can also have table1 coexist with table2, which you couldn't if you just changed the rules for table1.

That will make it easy to change your document and add things to it.

After you have a good understanding of HTML and CSS, you should probably learn Javascript. If you want to continue web development, you could learn things like Java, Flash, PHP(or some other language), SSI, how to use Apache, MySQL, etc, but HTML, CSS, and Javascript are essential for any web developer.

Brutha · 08-11-2008, 05:39 PM

I think the best way to make a website these days is to take a content management system (CMS) like Joomla, Drupal or Wordpress.
When you have installed the thing you change the html and css till the website looks like you want it to look.
I think that way is a lot more effective than creating websites from scratch.
It is a lot less work to develop websites that way.
The code might look a bit messy but that not the point of developing websites.

Five years ago I would have also started with plain html. Today it's simply easier to take a CMS and play around till the website looks like you want it to look.
There no need for reading tutorials or for reading specs.
Play around with the CMS and when you have a certain question google around to find an answer.

Davidya · 08-30-2008, 07:30 AM

HTML is page structure, CSS is style. The idea was to separate the content from the design so people could post content without worrying about design. Designers could set the design and not have it broken by content changes. Hence the dawning of blog themes, etc.

They are 2 different standards that use 2 different syntax. But CSS dramatically improves what HTML only could do, makes the pages smaller, and much easier to manage.

The cascading part is a key detail to get. You can apply styles locally like to a word, you can apply styles globally to a page like for all paragraphs, or you can put styles in a "style sheet", a separate file called from each web page. Thus, the same style can be applied to all pages. Change it one place changes all. Lanya showed how you link the Stylesheet.

Brutha's suggestion to just use an existing template driven system like Wordpress is good but that may not be a choice. There are free web design programs out there.

The key is to design the sites style in a style sheet, then all you have to do is add the link to each page and every time you add a paragraph or heading or list, it will look the way you want without extra code. For example, this will set the font and colour of all text in paragraphs.
p {color: red; font-family: lucida sans unicode;}

Or you get get fancier as examples offered here and add class (common) or id (page unique) selectors to control specific things. It can get fancy fast but if you remember the cascading layers, you will understand the result. More local trumps general.

If you like free software, check out this resource of reviews:
Gizmo's - Welcome to Gizmo's Best-ever Freeware | Gizmo's Tech Support Alert for example:
Gizmo's - Best Free HTML Editor | Gizmo's Tech Support Alert

Brutha · 08-31-2008, 02:00 PM

Quote:

Brutha's suggestion to just use an existing template driven system like Wordpress is good but that may not be a choice. There are free web design programs out there.

Starting off with a CMS is always a choice. The only question is how much work you have to do in addition to using it.
Maybe you need to write a function that you need yourself but especially as someone who is new to webdesign using a CMS has a lot of advantages.

Davidya · 09-01-2008, 08:18 AM

Brutha - I agree - anyone new is much better off with a template driven site.
But if you need functionality not provided, you may need a custom setup. That may or may not be more work from within a CMS than simply building a web site. It depends on the need. Requirements should drive the technology solution.

Pixel Ink · 09-08-2008, 10:00 PM

A great website design program for the Mac is Rapid Weaver. I have built over 50 websites with it! If Joomla (content managment) or Dream Weaver (builder) is just way beyond what you need (both in scope and price) then Rapid Weaver is a nice scaled down version of both.

And it's a nice price too. I'm not affiliated, just a fan.

ragtag · 09-13-2008, 07:36 PM

Even when using something like Joomla, it can be a good idea to learn the basics of HTML and CSS, just so you can do simple things like customize your template just the way you like it.

08-09-2008, 09:02 PM	#1 (permalink)
Bitsy Senior Member Join Date: Dec 2006 Location: NYC Public Library Posts: 358	CSS and HTML-what's the difference? I have been wondering what the difference between CSS and HTML? What are they? I had imagined they are two different coding languages to make websites with, but I don't really know. Why would there be two unless one couldn't achieve different things than the other? Can someone tell me how they are different and what can you do with the one that you can't do with the other? And if you are going to make a website, which one of these are you supposed to use?

08-09-2008, 09:54 PM	#3 (permalink)
Lanya Senior Member Join Date: Apr 2008 Location: Pennsylvania Posts: 307	HTML is like the base language. CSS is like a support language that makes it easier to maintain a lot of web pages. So for example, say you wanted to make 30 pages with dark green, underlined text with the "Lucida sans unicode" font. Using just HTML, you'd need to write this... Code: <html> <font="lucida sans unicode"><color="red"><u>Blah blah yadda blabbity etc.</u></color></font> </html> ...for each of these 30 pages. But what if you decided you want to change the look of all the pages, so that all text color was green? You'd have to edit each of these 30 pages, and change "red" to "green." Very tedious. With CSS, you can set up a page that takes care of all of these. Like this: Code: .content { color: red; font-family: lucida sans unicode; } Your HTML pages can have just the following: Code: <html> <link rel="stylesheet" type="text/css" href="http://www.justzelda.com/css/green/green.css" /> <class="content">Blah blah yadda blabbity</class> </html> And if you want to change the text color from red to green, you only need to change that one CSS file, and it changes all 30 HTML files automatically. In short, CSS makes it easy to change multiple HTML pages at once. If that explanation's confusing, that's alright. I was confused, too. I only got a really good understanding of it by finding tutorials and making pages. Mostly from W3Schools Online Web Tutorials Good luck!

08-30-2008, 07:30 AM	#7 (permalink)
Davidya Member Join Date: Aug 2008 Location: Western Canada Posts: 35	basics HTML is page structure, CSS is style. The idea was to separate the content from the design so people could post content without worrying about design. Designers could set the design and not have it broken by content changes. Hence the dawning of blog themes, etc. They are 2 different standards that use 2 different syntax. But CSS dramatically improves what HTML only could do, makes the pages smaller, and much easier to manage. The cascading part is a key detail to get. You can apply styles locally like to a word, you can apply styles globally to a page like for all paragraphs, or you can put styles in a "style sheet", a separate file called from each web page. Thus, the same style can be applied to all pages. Change it one place changes all. Lanya showed how you link the Stylesheet. Brutha's suggestion to just use an existing template driven system like Wordpress is good but that may not be a choice. There are free web design programs out there. The key is to design the sites style in a style sheet, then all you have to do is add the link to each page and every time you add a paragraph or heading or list, it will look the way you want without extra code. For example, this will set the font and colour of all text in paragraphs. p {color: red; font-family: lucida sans unicode;} Or you get get fancier as examples offered here and add class (common) or id (page unique) selectors to control specific things. It can get fancy fast but if you remember the cascading layers, you will understand the result. More local trumps general. If you like free software, check out this resource of reviews: Gizmo's - Welcome to Gizmo's Best-ever Freeware \| Gizmo's Tech Support Alert for example: Gizmo's - Best Free HTML Editor \| Gizmo's Tech Support Alert

09-08-2008, 10:00 PM	#10 (permalink)
Pixel Ink Junior Member Join Date: Sep 2008 Location: Asheville, NC Posts: 2	If on a mac... A great website design program for the Mac is Rapid Weaver. I have built over 50 websites with it! If Joomla (content managment) or Dream Weaver (builder) is just way beyond what you need (both in scope and price) then Rapid Weaver is a nice scaled down version of both. And it's a nice price too. I'm not affiliated, just a fan.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

08-09-2008, 09:53 PM	#2 (permalink)
illuster Junior Member Join Date: Mar 2008 Location: Belgium Posts: 18	Look at following URL for a limited explanation: WikiAnswers - What is the difference between HTML and CSS Basically HTML is used to put everything in a webpage. You define the image, you type the text, links, etc… CSS is then linked to the HTML "to make it look pretty". You have a lot more lay-out possibilities with CSS than if you’re only using HTML.

08-11-2008, 02:19 AM	#4 (permalink)
Bitsy Senior Member Join Date: Dec 2006 Location: NYC Public Library Posts: 358	Ah, thanks! Lanya, I found that site too just after I posted the thread. I started on the HTML one. It's fun so far . Should you learn both or just one, and if just one, which one is best to learn?

08-11-2008, 05:39 PM	#6 (permalink)
Brutha Family Member Join Date: Nov 2006 Location: Berlin, Germany Posts: 8,749	I think the best way to make a website these days is to take a content management system (CMS) like Joomla, Drupal or Wordpress. When you have installed the thing you change the html and css till the website looks like you want it to look. I think that way is a lot more effective than creating websites from scratch. It is a lot less work to develop websites that way. The code might look a bit messy but that not the point of developing websites. Five years ago I would have also started with plain html. Today it's simply easier to take a CMS and play around till the website looks like you want it to look. There no need for reading tutorials or for reading specs. Play around with the CMS and when you have a certain question google around to find an answer.

09-01-2008, 08:18 AM	#9 (permalink)
Davidya Member Join Date: Aug 2008 Location: Western Canada Posts: 35	Brutha - I agree - anyone new is much better off with a template driven site. But if you need functionality not provided, you may need a custom setup. That may or may not be more work from within a CMS than simply building a web site. It depends on the need. Requirements should drive the technology solution.

09-13-2008, 07:36 PM	#11 (permalink)
ragtag Senior Member Join Date: Nov 2006 Posts: 326	Even when using something like Joomla, it can be a good idea to learn the basics of HTML and CSS, just so you can do simple things like customize your template just the way you like it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML/CSS Help	tstesen	Technology & Technical Skills	3	12-12-2007 04:37 PM
Help me please with HTML	Master X	Technology & Technical Skills	4	11-05-2007 01:16 PM
Quick question about html	ericwordelman	Technology & Technical Skills	2	08-26-2007 04:44 PM
PHP Code that optimizes your HTML	Minsc	Technology & Technical Skills	1	05-04-2007 03:08 AM
I Need Help Converting .vnu Files To .html!!!	VetTechJess	Technology & Technical Skills	2	05-01-2007 12:41 PM

Personal Development for Smart PeopleTM Forums

Personal Development for Smart People^TM Forums