Programming confusion

Tyger · #1 (**permalink**) 11-08-2007, 12:57 AM

alright, first off, I wasn't sure which forum to put this in. And since it's my first post I apologize if it's in the wrong place.

I'm building a website, and I know how to use html and css but this is the first site I'm building from scratch. I'm not using dreamweaver, or any software like that. I'm not sure how to use the css in with the html, I tried reading and figure it out but I'm still confused.

The summary is (for those who don't understand my rambling) the whole what goes where and how to put the css onto the page is what's confusing me. despite knowing html and css.

***John*** · #2 (**permalink**) 11-08-2007, 01:19 AM

Generally there are three ways you can use CSS:
1) A separate file
2) Defined in the <head> of your html file
3) As a tag attribute

I the third method is going to be depreciated in future versions of XHTML - I'm not sure which method you are asking about, since you want to use "css in with the html" I'm going to assume you mean the third method.

Most tags accept a style attribute, that style allows you to define the style using CSS for that particular element. Example:

html4strict Code:

<img src="../image.png" style="border: 1px solid" />

ETbyrne · #3 (**permalink**) 11-10-2007, 08:55 PM

The best method is to create a file for the CSS and then link to it in the <head> tags. Like so...

Code:

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

This is assuming the file with your CSS in it is called styles.css
Whatever the name of your CSS file is it must have the file extension .css

**TcM** · #4 (**permalink**) 11-19-2007, 03:55 PM

Quote:

Originally Posted by ETbyrne

The best method is to create a file for the CSS and then link to it in the <head> tags. Like so...

Code:

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

This is assuming the file with your CSS in it is called styles.css
Whatever the name of your CSS file is it must have the file extension .css

Yup, that will even help in future website editing, because if you modify that external file the whole website will be modified.. That's why I love CSS.

Death Slaught · #5 (**permalink**) 11-23-2007, 02:07 PM

Like they said, you can put it in as an: Internal or External Style Sheet, or insert the style tag.

Here's and example of Internal style sheets.

HTML Code:

<html>
<!-- Internal Style Sheets go in the head tag -->
<head>

<style type="text/css">
body {
  background-color:#000000;
}
</style>

</head>
</html>

It's a bad example, but you should get the idea.

Here's an example of External Style Sheets:

This is the HTML

HTML Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="Source" />
</head>
</html>

Now here's the CSS

Code:

body {
  background-color:#000000;
}

External Style Sheets are in seperate documents, with the .css extention.

Now here's an example of inserting the style tag:

HTML Code:

<html>
<body>

<div style="width:200px; height:200px; border:1px solid #000000; position:absolute; left:400px; top:150px;">

</div>

</body>
</html>

External Style Sheets are the easiest to read, and maintain, next would be Internal Style Sheets, and lastly inserting the style tag.

Hope it helps, Thanks, Death

DevilsCharm · #6 (**permalink**) 11-24-2007, 11:54 AM

Interesting how there are so many ways to output the same result.

Death Slaught · #7 (**permalink**) 11-26-2007, 08:11 AM

Yes that's both good, and bad. Good because it's not that hard to use, and get the desired output, but bad because:

1. The W3C created CSS to seperate structure(HTML) from style(CSS).
2. Making your CSS Internal/Inserting it with the style tag defeats what the W3C is trying to do. The reason I say this is because it makes the content of your head element extremely messy. Even with endentions, it's just sloppy there's no foundation or organization to using it. Using the style tag is even worse. Your doing exactly what the W3C worked so hard to get rid of.......putting structure with the style of the page.
3. Your more prone to mistakes by using them, because they are so munched together.

External style sheets are the best hands down, you're able to organize them by there file name. For example:

Say you wanted a black border around a white page, you can do it like this:

HTML Code:

<html>

<head>
<style type="text/css">

body {
  background-color:#ffffff;
}

.main {
  width:100%;
  height:100%;
  border:1px solid #000000;
}

</stlye>
</head>

<body>
<div class="main">
</div>
</body>

</html>

or do this:

Code:

<head>
<link rel="stylesheet" href="Main.css" />
</head>

and then put the CSS in another document, named Main.css

It's cleaner easier to edit, and saves you time and headaches.

- Death

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Beginning Programming	frank_l	C and C++	11	10-11-2007 03:23 AM
A General Idea about programming	feariel	General Programming	3	09-12-2007 08:50 AM
Not sure my college is good for Programming	marta	General Programming	1	08-17-2007 11:13 AM

WingedPanther	........	2753.6
Xav	........	2704
Brandon W	........	1702.32
John	........	1207.73
marwex89	........	1175.24
morefood2001	........	966.05
dcs	........	655.75
Steve.L	........	475.59
orjan	........	418.58
Aereshaa	........	383.54

CodeCall

Contest Stats

CodeCall Goal

Sponsors

Ads

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)