CSS Confusion. [Archive] - Webmaster Forums

Master Austin

11-21-2002, 05:35 AM

I'm learning style sheets some and I got what I basicly want out of it. But I have a question.

Say I make a page like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<style type="text/css">
h3 {font-family: verdana;}
p {font-family: verdana; font-size: 8pt}
</style>

</head>

<body>

<h3>Hello World</h3>
<p>Hello everyone at Eversoft. Here's the problem. See the h3 code with "Hello World" in it? In order for me to make this text the font I want, I have to put a p there. P makes a space right? But i have h3 there already which already makes a space. Whats the point of having two? But, without the p, the text will just go back to the defalt. What can I do?
<p>
I wish there were a way to make all of the text on the page verdana with 8pt. =(

</body>
</html>

See what I'm saying?

ByteWizard

11-21-2002, 07:04 AM

I am far from an expert on CSS, but here goes (DC will correct everything I say wrong)...

I would first recommend you review one of the CSS tutorials or syntax explanations. There are a few concepts you have overlooked. you can specify a style for an entire tag (such as H3 or P) called selectors... and BTW <P> is the opening tag for a paragraph, not a space. You may specify a style for the <body> tag if you wish and place all of the various specifications you wish within the body style, such as font and font size.

The <p> paragraph tag and the <Hx> tag both will create some white space so when you include both, the browser is doing exactly what you ask it to do.

If you specify <body> style specifications, you can change them selectively in the document by overridding specific parts of the doc. To me, Verdana is a font which belongs to the sans-serif family. If the target browser does not have Verdana, then specifying a generic family will tell the browser to select a font from within the family you specify.

Body {font-size: 8pt; font-family: Verdana, sans-serif}
Look here (http://www.htmlhelp.com/reference/css/) for additional help.

DCElliott

11-21-2002, 08:31 AM

I see old Bytey there has directed me to reply. :p

Here is a doctored page. Look carefully at the differences:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen" >

</style>

<title>Untitled</title>
</head>

<body>
<h1>My Improved Page</h1>
<h3>Hello World</h3>
<p>Hello everyone at Eversoft. Here's the problem.
See the <span class="hl">h3</span> code with "Hello World" in it?
In order for me to make this text the font I want, I have to put a <span class="hl">p</span> there.
<span class="hl">P</span> makes a space right?
But i have <span class="hl">h3</span> there already which already makes a space.
Whats the point of having two?
But, without the <span class="hl">p</span>, the text will just go back to the defalt.
What can I do?</p>

<p class="special">I wish there were a way to make all
of the text on the page verdana with 8pt. =(</p>

</body>
</html>
Very simple markup can make changes that ripple through the whole document. If you've seen my other posts, you will know I believe in allowing user control of font size except in elements that, because of positioning, would be detrimentally affected by user changes. Therefore, all the font sizes except the "special" paragraph style are based on "ems". Notice also that the border widths for the heading tags are based on ems so that they scale proportionately with the font. In order to see what I am talking about you have to save the code as a page and cycle through some font size changes. Take another look at the P.special style and note the 8pt/16pt in the font property. The 16pt is effectively giving double spacing. I threw in the fancy border at no extra cost. :D

Notice that the paragraph <p> tags are closed with: </p>. Your code will work, but is sloppy without the closing tag. New versions of markup like XML will require all tags and attributes to be in lower case and properly closed. Develop good coding habits now.

HZR

11-21-2002, 08:50 AM

I wish there were a way to make all of the text on the page verdana with 8pt. =(

body {
font: 8pt verdana, sans-serif;
}

I don't recommend using points though as it is for printing, use pixels (px) instead.

About the space - it can be justified with margin like:

h3 {
margin: 1px 2px 3px 4px;
}

which will make a 1px margin at the top, a 2px margin at the right and so on clockwise.

Master Austin

11-21-2002, 03:47 PM

The body one wont work for me. When I put it in the head it dosn't do anything.

DCElliott

11-21-2002, 05:00 PM

"Master"

Post your code so we can scope it out.

Master Austin

11-22-2002, 12:48 AM

DCElliott

11-22-2002, 05:01 AM

Please look at my previous post where I higlighted in red the comment tag  that must enclose embedded styles. Paste that code into your editor and play around with the properties so you can see the effects. Or, you could just swap in the BODY style to you own page and modify it accordingly.

Finally. Make sure you have no font codes that are over-riding the body style. Font changes in tags will over-rule styles.

If you are still having problems, please post your complete HTML minus most of the content. Sometimes DOCTYPE declarations or other factors can cause problems. (I know 'cause I've made every mistake in the book :mad: )

Master Austin

11-22-2002, 05:46 AM

I fixed the problem. The thing was that the body font size dosn't work on liks. So I made another one for links with the font size, it works now.

Here's the new one.

<style type="text/css" media="screen">

</style>

Can somone fix it up were I can add link colors and make topmargin, leftmargin, marginwidth, and marginheight drop to 0 in the style sheet? I'm still new to this.:)

ByteWizard

11-22-2002, 06:46 AM

Austin, My Young Man...

There are two ways to put together a web site 1) Throw a few things together and see what sticks then ask someone to correct it for you and 2) Dig thru and find what went wrong.

One is easy and the other results in you learning something because you had to dig / try /dig / try until you got it to work.

Everyone here has their own set of tools they refer to for reference. You will over time develop your own. I am going to recommend a HTML reference I have used for years. Unfortunately the author has ceased to update the help file but it is still excellent until a host of new changes hit. If anyone here knows of a similar tool which is currently being update, I too would be interested in finding it. But until then, this little tool will help you with all your HTML questions.

Just click here to download HTMLib (http://www.htmlib.demon.co.uk/hlbsetup.exe) an excellent help tool prepared by Stephen Le Hunte.

Everyone here is eager to help and I in no way am suggesting you do not ask more questions. Just friendly advice so you can advance your knowledge base and before long you will be helping young whippersnappers with their code.

Master Austin

11-22-2002, 08:01 AM

Umm... I already know html. I've been knowing html for about two years now... I just figured I would try to learn css so I wouldn't have to do all of that font face crap.:)

Zero Angel

11-22-2002, 09:01 AM

Wow, 2 years and you're just now being weaned off of <font>? I've only known HTML for 14 months.

Master Austin

11-22-2002, 09:06 AM

I gave up on it after a while. I made templates for people but that was it. I didn't have the time or resources to build websites. With school and all. But I've decided to come back to it. This time I will learn CSS and PHP and I'll be set.:)

HZR

11-22-2002, 10:59 AM

You could alternatively use '*' as a selector like:

* {
font: 11px verdana, sans-serif;
}

'*' means all elements in the page.

Older browsers will not recognize this.

Zero Angel

11-22-2002, 11:30 AM

A thing to note is that Netscape browsers will ignore BODY fonts if the text is in a TD, so you'll have to use code similar to this:
<style type="text/css">

</style>

Its typically better practice to use percentages for font-sizes for users who have a hard time seeing. If you must have an absolute size, I find that pixel values work well. (ie: 14px)

Master Austin

11-22-2002, 10:14 PM

So putting body td will make it work on all browsers? Thanks for telling me that! I want my templates to work on all browsers.