HTML Help

AmyR9 · Joined: 14 Sep 2008 Posts: 79

I've got Microsoft Word open so I can try and figure out all the CSS stuff before adding it into the site I'm doing for my sister and her husband.
How do I format it in CSS at all? I see HTML up top.
But when I went to the help areas of the site I'm creating the site on for my sister and husband they say the CSS codes aren't suppose to even go in the html file. It's suppose to be linked. So, you have to do it in a seperate page and linked in.
Did I not understand something right when you said I can just add it in the Html document, I'm suppose to link it?
But what I don't understand is when I go to the styles and formatting area I don't have CSS listed. I went to Tool Menu and then to Templates And Add Ins.
Then it says Document Tempelate up top. It says Attach or Linked CSS.
When I click Attach it says attach tempelate and has a Tempalate folder listed above Only thing in there it says Normal. It's trying to make me save the document.
I try to type .css but it's not even down there in the file types available.
I also tried doing it the Linked way, and then just link it into the document. That doesn't work either, it tries to find a website addreess.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Microsoft word is not meant to be an html or css editor. You best bet is to use notepad. The general layout for html is
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
A blank notepad file will work for css. Just put all your css rules on that page ie.
Code: * {
margin: 0;
padding: 0;
border: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
Nothing else goes on this page. When you save it in notepad choose 'All Files' and save with whatever name you want it to have plus the .css extention. To link to it from the html pages, in the head section of each page put this link
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
In the above referenve, main.css being the name you saved the css file as.
For more info on stylesheets, google stylesheets or external stylesheets.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

I'm beginning to understand the CSS stuff a little better now.
Still a bit confused on how to do the text in CSS in relation to my HTML code?
In html I have
<body background="lightblue.jpg" text="#000000" link="#0000ff" vlink="#0000ff">

Trying to figure out how to do the text part of that to be black as I have it?
Here is what I have so far for my CSS part- I've started it out
body {
background-image: url(images/lightblue.jpg");
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Since you are just beginning keep this in mind. MARKUP---content you want to appear on you page ie. text, images etc. By using html tags this is accomplished---ie. h1, h2, p img etc.
To get this markup to appear in some sort of design that is orderly and pleasing to the eye is called PRESENTATION or css.
There is three ways to do css...externally with a link on the pages it effects, embedded in the head section of each page by using the <style> opening and closing tags. And lastly inline styling whereas styles are written for each html tag inside the html tag. I don't recommend this method as it bloats the html content too much.
You have a good start, but if you use the embedded or external method you do not need to use any inline css. Simply use the <body> tag by itself.

For a stylesheet you should start by removing all default styling from the browsers. Then start with the body and work your way down the page styling the main containers first. Then style the content inside each container. Learn to use css shorthand to cut down on css bloat. For the css you have so far it can be cut down
Code: * {
margin:0;
padding:0;
}
}
body {
font: 1.2em Arial, Helvetica, sans-serif;
background: #87ceeb url(images/lightblue.jpg");
}
There is no need for all the margin elements because this
Code: * {
margin:0;
padding:0;
}
just removed them.
Instead of using two lines to style the font
font-family and font-size, font can be used with the size and famile all in one. The background can be reduced to the color and image in one also. If you desire a font color other than black which is the default it can be added to the font style as well
Code: font: 1.2em red Arial, Helvetica, sans-serif;
If you want to set black as the color
Code: font: 1.2em #000 Arial, Helvetica, sans-serif;
Where #000 is shorthand for #000000 using the first, third and fifth letter/number of the hexidecimal code for the color.

Other elements to become familar with for presentation are positioning, floats, margins and padding. There are a lot of good tutorial on this forum and thousands more on the web plus a lot of good people to help.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Like if I have my html tag to do
<center>
<img src="banner.jpg">
in CSS I would just put
img{"banner.jpg" align="center"}

And the thing about the order, do I have to do it in the order I've got the codes for my Html tags to show up that way correctly?
Like if I have the html codes for the banner first
and then I have the codes for the table or whatever I have next do I need to do it in that order in the CSS section?
Here is what I have the main page at the moment in html-
<body background="lightblue.jpg" text="#000000" link="#0000ff" vlink="#0000ff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center><img src="astbanner.jpg"><br>
<p><center>
<table border="0" width="100%" cellpadding=8 cellspacing=2>
<tr>
<td width="50%" valign="top"><b>

<a href="http://www.astresurfacing.com/main.html">Main</b></a><br>
<p>
<b><a href="http://www.astresurfacing.com/floors.html">Floors</b>
</a><br>
<p>
<b><a href="http://www.astresurfacing.com/countertops.html">Counter Tops</b></a><br>
<p>
<b><a href="http://www.astresurfacing.com/baths.html">Baths</b></a><br>
<p>
<b><a href="http://www.astresurfacing.com/findanaffiliate.html">Find An Affiliate</b></a><br>
<p>
<img src="kitchen.jpg">

</td>
<td width="50%" valgin="top"><b><font size="3">Take a look at all the things</font>
<font size="4">Ast Resurfacing</font><font size="3"><br><center>can do
do for you.</font></b><br>
</center>
<img src="bashower.jpg"><br>
</td>
</tr>
</table>

So, since I have the <p><center> and then the table code, do I put it in that order in the CSS area?
And then the stuff I have in the table like my pictures what should I do with that?

I'm also going through printing so many things out. I just figured out that I can actually print off the page codes to sites. So, I'm doing that at the moment so I can look at everything in both CSS and Html to understand it all better.
Only other thing I keep getting confused on too is classes, Id's all that stuff.
Like if someone has div class=logo
It's reffering to something in the CSS part that you gave the name logo to?
and can you give it any name you want? Like amy,
or like if they have <div class="menu">
or if they have <table class="userprofile">
so instead of having menu can you put something else?
how would you do just that in CSS?
and then it says use Id if there is only one occurance.

See, I know how to do frames in html. That you have to give each frame a certain name. I took so many notes when I was trying to learn how to do that. I know you can give it whatever name you want. Like on my Jtt websites I've done, I did one of them with frames, to learn how to do it. I know you have to give each page a name so that when you do the links on the links page, you have to say target="jtt" if that is the name you gave for it to show up in the main frame.

So, I'm trying to find out if that still matters what name you give things?
sometimes I keep seeing they say p class
p id
and does it matter if you put a . or a #?
I've notices people having all different things?
Does that matter?
like p.back
or p#back in the CSS?
Also, I noticed something else in the html tag for an image I'm now seeing they put like alt="floor"
But I can't seem to find where they wrote the name floor in the CSS area or the word alt?
Same as if they say
<table summary="">
I don't see the word Summary in the CSS part.
Just the word Table.
or if they say <img style=>
Style where is that written?
<img style="width=:440px; height:156px;" src="http://wwww.astresurfacing.com/floor.jpg" alt="Floor">
how do you do that in the CSS section? I'm getting really confused here.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Ok, I'm trying to understand the definitions a bit better for container?
styling the content by the style container. What do you mean by container? or the style tags?

and also elements not to sure. Elements mean everything on the site?
you say html elements.
or margin element

AmyR9 · Joined: 14 Sep 2008 Posts: 79

A couple other questions.
do you see how I have my font sizes in the one post where I put my codes I have in html.
like <font size="3">
<font size="4">

how would I do that in CSS part to match what I have?
do I put 3pt or is it 3px?
and then for the part that has 4 do I put 4pt or 4px?
I also have deleted my index thing and renamed the thing already so just go here http://www.astresurfacing.com/
to view the site and you will see the size of things, and maybe can help me figure out how to write it all out in CSS.

The other thing too I was going to ask is, in the post when you gave me the codes for the general layout
for both html and css and talking about me being a beginnger, I wanted to make sure that you understand that I'm not a beginner in designing websites at all.
I've been doing it for years in just Html.
Wasn't sure if you thought I didn't know any html at all?

I had not any idea about CSS until at just now when trying to get my stuff lined up properly in the tables.

I'm also printing out several codes from other sites to study over it more and try and compare to the CSS parts of the site, to try and understand it better.

Oh and another question, I've noticed in the style tag areas, like on myspace, I've printed out my layout codes to try and study that too.
like they will have
<style type="text/css">
all the CSS codes they have in there
</style>
<style type="text/css">
all the CSS codes they have
</style>

Why do they do it like that?

Plus I've notices like several sites have tables on one the left side of the site and tables on left side.
They must be dividing the table into 2 columns and then putting other tables in the cells, and then set it to automatically justify with want is on the site.

Also, you know how I have the links in my tables?
When I do that in CSS, do I need to put the CSS coding for the links in the table CSS codes?
because see I've been doing the colors for things in html like this
<body bgcolor="#00ccff" text="#000000" link="#0000ff" vlink="#ff0000">
And that does all my links I put on my site anywhere in that color.
So, in CSS, do I only have to put it once like I did in html?
and then I've also learned in html how to change the colors here is a site I've changed the colors in html
to show you what I'm talking about
http://www.geocities.com/abctvshows/bmwlinks.html

Now, how do I do that in the CSS part?
Do I need to put it in that same order in CSS section to match where on the page I have placed everything in html section, or does that matter?
Or when you talk about CSS being easier way of doing things and saving alot of work, do you mean if I say specify the color red and have it apply to several of my html tags?
I'm still not sure if I'm understanding it to mean that.
Since the 1st set of links I have in that lightblue color,
the 2nd set in the other colors, and so on down the page.
Then in the CSS codes, do I need to put it in that order to keep my page looking the same way it does now, or does it matter?

AmyR9 · Joined: 14 Sep 2008 Posts: 79

I've found a place that you can test the codes out with.
So, I was playing around with it, and moving things around in the CSS area. I think I'm finally understanding the CSS area, doesn't necissarily need to be in the same order as you have your html tags.
in the CSS area, I tried adding the p, p1, p2, p3, h2 above the body CSS. and came out in the same order I have it in the html part. The paragraphs and heading still seem to be in the same area. Or is that because the html tags part is in the order I want it?
<html>
<head>
<style>
p, p1, p2, p3, h2{ color: blue; }
body { background-color: white; }

</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the style tag we are able to modify
the appearance of HTML elements.</p>
<p1>Hi </p>
</body>
</html>

AmyR9 · Joined: 14 Sep 2008 Posts: 79

I've just found out another thing too.
As to why doing it all in just html has been working all this time.
Because of the xhtml having to be in all lowercase letters.
I've been doing the html tags in lowercase all along.

I think I'm finally understanding everything so much better.

Thank you so much for all of the great help you all have been giving me with everything.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

I'll have you a css layout by tomorrow that you should be able to edit by changing image names and saving as a new page.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here is a layout that can be used for each page with minimal editing to the html and none to the css.

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AST Resurfacing</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">

<div id="header"></div>
<div id="content">
<div class="wrapper">

<p>Take a look at all the things <span>Ast Resurfacing</span> can do for you.</p>
<img class="photo" src="kitchen.jpg" width="440" height="166" alt="Kitchen...before and after" />
<img class="photo" src="bashower.jpg" width="440" height="331" alt="Bathroom...before and after" />

</div>
</div>
<div id="sidebar">

<a href="http://www.astresurfacing.com/">Main</a>
<a href="http://www.astresurfacing.com/floors.html">Floors</a>
<a href="http://www.astresurfacing.com/countertops.html">Counter Tops</a>
<a href="http://www.astresurfacing.com/baths.html">Baths</a>
<a href="http://www.astresurfacing.com/findanaffiliate.html">Find An Affiliate</a>
</div>


<div id="footer">
<p>© ~ 2008 Copyright <a href="index.html">Ast Resurfacing</a></p>
</div>
</div>
</body>
</html>

CSS
Code: /* CSS Document */
/************************************************

GLOBAL STYLES

************************************************/
* {
margin: 0;
padding: 0;
}

img {border: none;}

a:focus {outline: none;}

body {
font-family: Arial, Helvetica, sans-serif;
background: url('lightblue.jpg');
font-size: 1.2em;
}

#container {
width:760px; /* any width including 100% will work */
color: inherit;
margin:10px auto 0 auto; /* remove if 100% width */
}

#header {
width: 601px;
height: 116px;
background: #4041fe url('astbanner.jpg') no-repeat;
margin: 0 auto;
}

#content {/* use for left sidebar */
color: #000;
float: right;
margin: 0 0 0 -180px; /* adjust margin if borders added */
width: 100%;
}

#content .wrapper {
margin: 0 0 0 180px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}

#sidebar {
color: inherit;
float: left;
width: 150px;
padding: 10px;
}

.clearer {
height: 1px;
font-size: -1px;
clear: both;
}

#footer {
clear: both;
border-top: 1px solid #058eff;
border-bottom: 10px solid #058eff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
/***************************************************

CONTENT STYLES

***************************************************/
#footer p {
padding: 10px 0;
color: #058eff;
}

#footer a {text-decoration: none;}

#footer a:hover {
text-decoration: underline;
color: #058eff;
}

#sidebar a {
font-weight: bold;
display: block;
width: 150px;
padding: 5px 0;
}

#sidebar a:hover {
text-decoration: none;
color: #058eff;
}

#content .wrapper p span {
font-size: 1.3em;
color: #058eff;
}

#content .wrapper .photo {
margin-top: 10px;
}

Save the html page as index.html. Save the css on a blank page as main.css.
The html code can be applied to all new pages, saving each one with the appropiate name ie. floors.html, countertops.html etc.

For each page edit this part only
Code: <p>Take a look at all the things <span>Ast Resurfacing</span> can do for you.</p>
<img class="photo" src="kitchen.jpg" width="440" height="166" alt="Kitchen...before and after" />
<img class="photo" src="bashower.jpg" width="440" height="331" alt="Bathroom...before and after" />

changing only the paragraph text and img src. There is no need for the span tag to used on any other page. Each new image must have the correct width, height and alt text to display correctly. A third row is added but commented out to not display on pages with only two sets of images. On pages with three sets of images, remove the  and fill in the img src, width, height and alt text.

AmyR9 · Joined: 14 Sep 2008 Posts: 79

The other problem I keep having is when I try and save it after using notepad to do it.
It wont let me add .html or .css as an extension.
Will only do .txt
Even though I did click All files, it still wont do it right.
The only way I can give it an extension of .html is to create the files in Microsoft Word, or in the sites file manager area, like Geocities, Angelfire,
the one I'm doing for my brother-in-law at the moment.

I also was just in the chatroom the other day with the help people for the site I'm doing for my brother-in-law
and they said CSS isn't even needed, and that it would be fine with just the way I've done it in html.
I'm really getting confused here.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

You should be able to open notepad, copy and paste the code from here, click save as, type the name in with the extention, click all files and then click ok. Same for html or css files.[/b]

AmyR9 · Joined: 14 Sep 2008 Posts: 79

Still seems to only let me save things with .txt as the extension. It wont allow me to save it with any other extensions than .txt
Even though I did click on all files.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Ok, google Crimson Editor, download and install. It's free. You can have numerous files open at once and it will savw as html or css.