How to link HTML page to CSS file

This is a discussion on "How to link HTML page to CSS file" within the Web Page Design section. This forum, and the thread "How to link HTML page to CSS file are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Dec 13th, 2006, 07:11
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
How to link HTML page to CSS file

Hi,
I'm new to this forum and very much new to web site designing. Resently I came to know that by using CSS one can save a lot of time in redesigning or maintaining a site.
Could someone please explain me how to creat this CSS file and how to link HTML pages to this CSS file.
I have little knowledge about CSS but don't know how to link these two ( CSS and HTML)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Dec 13th, 2006, 07:35
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Well, like HTML, Cascading Style Sheets (CSS) are a pages of sorts. Whereas HTML is for hard content, like text, images and links, CSS is for a pages design. You don't need tables to organize a site. This is the CSS that controls my website:

http://ryanfait.com/workspace/css/layout.css

CSS and HTML work in harmony to make text look the way you want it, <div>'s to appear a certain way, or elements do out of the ordinary things (like giving a certain width and height to a link). There is no good way to code CSS other than by hand. There are programs to aid you in it, but any WYSIWYG website editor won't do things very well because it won't be able to take into account everything on the page and adjust the CSS for the site as a whole. It's a fairly simple language, but until you understand what it's capable of, you won't be able to do much with it.

http://w3schools.com/css/
http://csszengard.com/
http://css.maxdesign.com.au/

The above sites are all good resources and examples.

As for linking CSS into HTML, you use the link tag.

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

The task of learning CSS may seem daunting, but once you get the basics down, it's all uphill from there.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Dec 14th, 2006, 07:08
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Can you take the pain for me!
Thanks ryanfait for providing the information and useful links.
As of now I'm learning CSS from w3school.com itself.
Can you tell me how can I check my coding for CSS and HTML without uploading it on a server. Is there any option or I've to buy some server space.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Dec 14th, 2006, 08:13
Reputable Member
Join Date: May 2006
Location: Northampton, UK
Posts: 399
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Use some free server space .... Lycos offer tripod which is pretty decent
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Dec 14th, 2006, 10:45
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

There is a free CSS validator that you can copy and paste code in to see if it's valid. It's also not that hard to set up a small server environment on most computers. It's already done on Macs if you've got one of those
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Dec 18th, 2006, 17:12
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Is that mean if one is using CSS he doesn't require tables to design a site?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Dec 18th, 2006, 17:20
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: How to link HTML page to CSS file

That is what it means.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Dec 19th, 2006, 01:18
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Yep. Look at my site:

http://ryanfait.com/

Not a single table on my entire site.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Dec 19th, 2006, 07:44
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Then how to divide a page into 3 or 4 parts?
i.e. header, footer and so on...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Dec 19th, 2006, 10:31
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

CSS does it all.

http://css.maxdesign.com.au/
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Dec 19th, 2006, 14:02
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: How to link HTML page to CSS file

Generally you would have 4 style sheets. One for normal use, one for print, and one for each version of IE you plan to cater to.

<link rel="stylesheet" href="path/to/css" media="screen" type="text/css" />

<link rel="stylesheet" href="path/to/css" media="print" type="text/css" />

<!--[if IE 6]>
<link rel="stylesheet" href="path/to/css" media="screen" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="path/to/css" media="screen" type="text/css" />
<![endif]-->
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)

Last edited by moojoo; Dec 19th, 2006 at 15:26.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Dec 19th, 2006, 14:54
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

We're dealing with a beginner here, moojoo.

You should put the location of the CSS file inside the href tags of link. The if statements are not necessary, but if you want to add additional CSS properties for the different versions of IE, that is the best way to do so.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Dec 19th, 2006, 15:28
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: How to link HTML page to CSS file

Ok fine but we can't date any more. You are too pushy.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #14  
Old Dec 20th, 2006, 01:27
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Haha, well at least I didn't tell you that you were wrong! I'll take you out to a fancy dinner tonight, my treat.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #15  
Old Dec 20th, 2006, 09:38
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Thanks to both of you.
So I think now instead of troubling you people, can I ask a link in this forum where I can learn and discuss basics of CSS coding.
BTW If you ppl allow me, I can start asking my question here itself
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #16  
Old Dec 20th, 2006, 12:02
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

It's best to start a new thread if you have a new question.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #17  
Old Dec 20th, 2006, 17:54
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: How to link HTML page to CSS file

Also any time you need help never be afraid to ask. We may be a bit loony but we are also good at this stuff.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #18  
Old Dec 21st, 2006, 08:06
New Member
Join Date: Nov 2006
Location: India
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

OK
My questions will be regarding CSS and HTML coding for the same
so what should I name the thread?
one more thing if someone can tell me, what are the limitations of CSS?
What I understand is one can change the colors, text font etc in one shot but if one has to include some links, texts or pictures in a site he has to change all the pages manually or creat a new CSS file.
Please correct me where I'm wrong...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #19  
Old Dec 21st, 2006, 09:46
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to link HTML page to CSS file

Well, CSS is just a styling language. HTML handles content and CSS makes it look pretty. You can't use CSS to add links or replicate the img tag (but you can assign a background to a div so it looks like an image). If you're talking about what it can do for changing the looks of a page, it's basically boundless.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!