Programming confusion

**Tyger** · 11-07-2007, 09:57 PM

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** · 11-07-2007, 10:19 PM

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:

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

**ETbyrne** · 11-10-2007, 05: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** · 11-19-2007, 12:55 PM

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** · 11-23-2007, 11:07 AM

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** · 11-24-2007, 08:54 AM

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

**Death Slaught** · 11-26-2007, 05: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: Programming confusion

LinkBack

Thread Tools

Search Thread

Display

Programming confusion

Thread Information

Users Browsing this Thread

Similar Threads

Confusion with 2D array

string in C: confusion

little confusion in C

sizeof operator confusion..

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions