Newbie's CSS not having an effect.

L

Larry Lindstrom

Hi Folks:

I've done some CGI scripts, written in C++, about 10 years ago, but
haven't done any web related projects since. I want to get familiar
with web applications again.

To that end, I've loaded Apache on a PC running OpenSolaris so I
have a captive web host.

On my account I have the "Main" web page at

~/www/site.learn_html_htmldog/htdocs/index.html

This HTML file has a list with links to HTML files arranged in sub-
directories of htdocs.

I'm working through HTMLDog's tutorial, just starting the beginning
CSS at:

http://htmldog.com/guides/cssbeginner/applyingcss/

Files for this example are located at:
~/www/site.learn_html_htmldog/htdocs/css_beginner_tutorial/
applying_css

The first example is of an internal CSS, and works fine.

The next example is a separate CSS file, which looks like this:

----

p {
color: red;
}

a {
color: blue;
}

----

Should CSS files have a prologue? This example doesn't.

So I follow the text and create a file by this name and save it as
"web.css" in the applying_css directory, along with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<body>
<h4>This uses an external stylesheet to set paragraphs and
anchors.</h4>
<p>This is a paragraph</p>
<a href="link_file.html">Link</a>
</body>
</html>

When I select this HTML, the CSS seems to be ignored, the paragraph
is displayed as black and the anchor is displayed as blue.

I've tried moving the CSS file to the htdocs directory, with no
effect.

What am I doing wrong?

Thanks
Larry
 
C

C A Upsdell

Larry said:
<link rel="stylesheet" type="text/css" href="web.css" />

I've tried moving the CSS file to the htdocs directory, with no
effect.

What am I doing wrong?
Click to expand...

For this to work the web.css file would have to be in the root
directory, and it isn't. Given your situation you may be best off
specifying the full path in the LINK element.
 
L

Larry Lindstrom

For this to work the web.css file would have to be in the root
directory, and it isn't.  Given your situation you may be best off
specifying the full path in the LINK element.
Click to expand...

Thanks C A:

I attempted to get this HTML through CSS and markup validation, and
after a little effort got this to pass both validations:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="/web.css" />
<meta http-equiv="Content-Type" content="text/
html;charset=utf-8" />
</head>

<body>
<h4>This uses an external stylesheet to set paragraphs and
anchors.</h4>
<p>
This is a paragraph
<br />
<a href="link_file.html">Link</a>
</p>
</body>
</html>

As you suggested, I moved the CSS to my document root directory.
This makes a lot more sense than having it local, or linked, to each
directory that has HTML.

This XHTML passes both validations, but it still doesn't display
the paragraph or the link in the colors specified in the CSS.

Here again is the CSS. I have the anchor set to green, because its
different than the default to blue.

p {
color: red;
}

a {
color: green;
}

Here is my setup:

Server OS OpenSolaris 2009.06, kept as current as I can.
Apache version 2.2.13

Client OS Windows XP Pro
Firefox 3.5.5

I assume I'm making some dumb mistake, but I'm not seeing it.

I appreciate your assistance.

Thanks
Larry
 
C

C A Upsdell

Sigh. I gave you bad advice due to insomnia combined with profound fatigue.

Anyway, the href="web.css" will look for the CSS file in the *same*
directory as the HTML file.

As to why the text in your paragraph does not take on the colour you
want: best to put your stuff on the web, and give a URL, so that we can
see what you actually have rather than what you think you have.
 
R

richard

Hi Folks:

I've done some CGI scripts, written in C++, about 10 years ago, but
haven't done any web related projects since. I want to get familiar
with web applications again.

To that end, I've loaded Apache on a PC running OpenSolaris so I
have a captive web host.

On my account I have the "Main" web page at

~/www/site.learn_html_htmldog/htdocs/index.html

This HTML file has a list with links to HTML files arranged in sub-
directories of htdocs.

I'm working through HTMLDog's tutorial, just starting the beginning
CSS at:

http://htmldog.com/guides/cssbeginner/applyingcss/

Files for this example are located at:
~/www/site.learn_html_htmldog/htdocs/css_beginner_tutorial/
applying_css

The first example is of an internal CSS, and works fine.

The next example is a separate CSS file, which looks like this:

----

p {
color: red;
}

a {
color: blue;
}

----

Should CSS files have a prologue? This example doesn't.

So I follow the text and create a file by this name and save it as
"web.css" in the applying_css directory, along with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<body>
<h4>This uses an external stylesheet to set paragraphs and
anchors.</h4>
<p>This is a paragraph</p>
<a href="link_file.html">Link</a>
</body>
</html>

When I select this HTML, the CSS seems to be ignored, the paragraph
is displayed as black and the anchor is displayed as blue.

I've tried moving the CSS file to the htdocs directory, with no
effect.

What am I doing wrong?

Thanks
Larry
Click to expand...


Where exactly is your local file css?

You should have two lines before the </head>.
<style type="text/css">

p {}
a {}

</style>
</head>
 
L

Larry Lindstrom

Sigh.  I gave you bad advice due to insomnia combined with profound fatigue.

Anyway, the href="web.css" will look for the CSS file in the *same*
directory as the HTML file.

As to why the text in your paragraph does not take on the colour you
want: best to put your stuff on the web, and give a URL, so that we can
see what you actually have rather than what you think you have.
Click to expand...

Thanks Again C A:

I have exposed port 80 through my firewall, that's how the
validation sites get to it.

But I'm reluctant to display my IP address, because I'm not
knowledgeable about security issues. Is there a site where I can put
these files?

Larry
 
C

C A Upsdell

Larry said:
I have exposed port 80 through my firewall, that's how the
validation sites get to it.
Click to expand...

Did you validate just the HTML, or the CSS as well?
But I'm reluctant to display my IP address, because I'm not
knowledgeable about security issues. Is there a site where I can put
these files?
Click to expand...

Years ago there were quite a few free hosting services, but I don't know
what is safe and available today. One problem with free hosting
services, though, is that they tend to add things to your web pages,
like ads, and the code they add can interfere with your own code.

One possibility is your ISP: some ISPs offer free web space to
subscribers, though this is less common than it used to be.

Perhaps someone else can make a suggestion as to a good free host.
 
J

Jonathan N. Little

Larry said:
Thanks C A:

I attempted to get this HTML through CSS and markup validation, and
after a little effort got this to pass both validations:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="/web.css" />
Click to expand...

<snip code>

1) Is your file "web.css" in your document root? Because that is what
you have specified.

2) Is it named "web.css" all lowercase, because it is case sensitive
(common Windows user error)

3) Is the document root of your in your apache config set to

~/www/site.learn_html_htmldog/htdocs/
or
~/www/site.learn_html_htmldog/htdocs/css_beginner_tutorial/

If it is the former then web.css should be in htdocs folder else it
should be in the css_beginner_tutorial folder.

Aside of reviewing your config files your can do some tests... If the
URL to your document is http://localhost/index.html then what happens
when you enter http://localhost/web.css in your browser? Do you get the
CSS file?

Confirm the link in your index.html file. Unfortunately Mozilla removed
Link Info from the Page Info window in Firefox 3.x. You can restore it
with this extension:

https://addons.mozilla.org/en-US/firefox/addon/6939

Then from your index.html view the "Tools > Page Info > Links" and
confirm what the stylesheet links resolved to...

Lastly, on a WAG, you don't have a permission problem with the web.css
file? It is readable for your apache|www-data user?
 
T

Travis Newbury

No, he shouldn't. He's trying to link to an external style sheet.
Did you even bother to read the post you replied to? If so, what part of
"external stylesheet" do you not understand? Have you ever thought of
actually *learning* HTML before you try to give advice about it?
Click to expand...

You go girl!
 
L

Larry Lindstrom

Did you validate just the HTML, or the CSS as well?
Click to expand...

Thanks Again C A:

Both HTML and CSS passed. Both validators were passed the HTML's
address.

The instructions for the CSS validator state:

Enter the URI of a document (HTML with CSS or CSS only)
you would like validated

The HTML validation displays a pretty green:

This document was successfully checked as XHTML 1.0 Strict!

The CSS Valdation displays a pretty green:

Congratulations! No Error Found.
Years ago there were quite a few free hosting services, but I don't know
what is safe and available today.  One problem with free hosting
services, though, is that they tend to add things to your web pages,
like ads, and the code they add can interfere with your own code.

One possibility is your ISP:  some ISPs offer free web space to
subscribers, though this is less common than it used to be.

Perhaps someone else can make a suggestion as to a good free host.
Click to expand...

It's probably time to bite the bullet and get a site on a hosting
service.

It's Sunday here in the U.S. I'll look into it tomorrow.

Thanks
Larry
 
C

C A Upsdell

Another option would be to create a virtual machine, do your testing
within that machine, and delete it if it appears to be compromised.
 
L

Larry Lindstrom

<snip code>

1) Is your file "web.css" in your document root? Because that is what
you have specified.
Click to expand...

Thanks Jonathan:

Yes. Moving it to /tmp, for a test, causes the CSS validation to
fail.
2) Is it named "web.css" all lowercase, because it is case sensitive
(common Windows user error)
Click to expand...

Yes, re-naming it "Web.css" causes the CSS validation to fail.
3) Is the document root of your in your apache config set to

~/www/site.learn_html_htmldog/htdocs/
or
~/www/site.learn_html_htmldog/htdocs/css_beginner_tutorial/
Click to expand...

"DocumentRoot /export/home/larryl/www/site.learn_html_htmldog/
htdocs"

That's the former, htdocs, directory.
If it is the former then web.css should be in htdocs folder else it
should be in the css_beginner_tutorial folder.
Click to expand...

It is in htdocs.
Aside of reviewing your config files your can do some tests... If the
URL to your document ishttp://localhost/index.htmlthen what happens
when you enter  http://localhost/web.cssin your browser? Do you get the
CSS file?
Click to expand...

This seems odd.

I've been using an XP machine to browse my Solaris host. Except
for this problem, that has been working.

But attempts to browse "httpd://localhost/" from Firefox running
on the Solaris PC fails with:

Failed to Connect
Firefox can't establish a connection to the server
localhost.

Substituting my IP address, returned from www.whatismyip.com, for
"localhost" results in a successful browse.

Back to your point. Browsing "httpd/<ip address>/web.css/" results
in:

Not Found

The requested URL /web.css/ was not found on this server.

Is there a protocol other than "http" I should be trying?
Confirm the link in your index.html file. Unfortunately Mozilla removed
Link Info from the Page Info window in Firefox 3.x. You can restore it
with this extension:

https://addons.mozilla.org/en-US/firefox/addon/6939

Then from your index.html view the "Tools > Page Info > Links" and
confirm what the stylesheet links resolved to...

Lastly, on a WAG, you don't have a permission problem with the web.css
file? It is readable for your apache|www-data user?
Click to expand...

I'll try these if needed, but the CSS validation fails if I try to
move web.css or change the case of any character in it's name. Does
the fact that I get a nice green "Congratulations! No Error Found."
indicate that the CSS is present and readable?

The web.css is readable by group and others.

I saw that not all files in this site's directory structures are
owned by webgroup so I ran:

chgrp -R webgroup * and chaged everything except httpd.pid.
Still no luck.

I appreciate your efforts to assist me Jonathan.

Thanks
Larry
 
D

dorayme

C A Upsdell said:
Perhaps someone else can make a suggestion as to a good free host.
Click to expand...

At http://www.000webhost.com/ you can get free hosting at $4.84 a month
cheaper than their cheapest paid hosting rate hosting.

They do tend to stick a little script link at the end of your html
source to count the traffic I suppose, (which I have never been able to
get turned off in spite of trying to follow a procedure to do this).

If you want to check your validation for any local HTML doc, you can
check via Web Developer tools, there is a menu to check local, it
uploads your local file to the validation service...

The paths you are using on your local Apache sound awfully complicated.
Why not forget about connecting things to paths with htmldog, it is just
an external web site, you can bookmark it. (It is not bad, but is
misleading in that it ought to be discouraging you from using XHTML for
the moment. But this is another issue.)
 
J

Jonathan N. Little

Larry said:
Thanks Jonathan:

Yes. Moving it to /tmp, for a test, causes the CSS validation to
fail.
Click to expand...

CSS validation to fail? Not sure what you mean by that, do you mean not
found 404 error. If so, unless /tmp is alias or symbolically link within
your document root path of course it would not be found by the webserver!
Yes, re-naming it "Web.css" causes the CSS validation to fail.
Click to expand...

Again fail? Do you mean 'not found'?
"DocumentRoot /export/home/larryl/www/site.learn_html_htmldog/
htdocs"
Okay


That's the former, htdocs, directory.
Click to expand...

Which? 'htdocs' was the 'htdocs' or the 'site.learn_html_htmldog' was
the 'htdocs', or the 'www' was the 'htdocs'?

Also whatever you did to the filesystem it does match the DocumentRoot
directive in the httpd.conf? It this your default server or a vhost
site? Most times rather than change the default server's setting just
add a vhost for any development sites. Add plus is that you can have
*more than one*


NameVirtualHost *:80
<VirtualHost *:80>
ServerName learn_css.my.lan
DocumentRoot /var/www/vhosts/css
</VirtualHost>

<VirtualHost *:80>
ServerName test.my.lan
DocumentRoot /var/www/vhosts/test
</VirtualHost>

<VirtualHost *:80>
ServerName another_test.my.lan
DocumentRoot /somewhere/completely/different
</VirtualHost>



It is in htdocs.
Click to expand...

Well if htdocs is your document root then the url '/web.css' should work.
This seems odd.

I've been using an XP machine to browse my Solaris host. Except
for this problem, that has been working.

But attempts to browse "httpd://localhost/" from Firefox running
on the Solaris PC fails with:
Click to expand...

If you are not browsing from the machine that the webserver is running
then http://localhost should fail, 'localhost' means your machine. the
one your using aka 127.0.0.1 or loopback address.
Failed to Connect
Firefox can't establish a connection to the server
localhost.

Substituting my IP address, returned from www.whatismyip.com, for
"localhost" results in a successful browse.

Back to your point. Browsing "httpd/<ip address>/web.css/" results
Click to expand...
^^ ^
1 3

No, http://<ip address>/web.css

[1] protocol is "http://"
[2] no trailing "/" else Apache will parse "web.css" as a directory


in:

Not Found

The requested URL /web.css/ was not found on this server.

Is there a protocol other than "http" I should be trying?


I'll try these if needed, but the CSS validation fails if I try to
move web.css or change the case of any character in it's name. Does
the fact that I get a nice green "Congratulations! No Error Found."
indicate that the CSS is present and readable?

The web.css is readable by group and others.

I saw that not all files in this site's directory structures are
owned by webgroup so I ran:

chgrp -R webgroup * and chaged everything except httpd.pid.
Still no luck.
Click to expand...

Well I would look in the httpd.conf for the proper user. The default
install 2.x it has been

User www-data
Group www-data

In the past with 1.x

User apache
Group apache

Of course defaults don't matter it is what is in your httpd.conf that
counts.
 
D

dorayme

dorayme said:
If you want to check your validation for any local HTML doc, you can
check via Web Developer tools, there is a menu to check local, it
uploads your local file to the validation service...
Click to expand...

I should have mentioned Firefox (and related browsers where you can add
these tools). Yo can also, of course, check validation of local via
other means.
 
L

Larry Lindstrom

CSS validation to fail? Not sure what you mean by that, do you mean not
found 404 error. If so, unless /tmp is alias or symbolically link within
your document root path of course it would not be found by the webserver!
Click to expand...

Thanks Again Jonathan:

You asked if web.css was in the document root directory, and if it
was named with the correct case of characters.

The point I was making is yes. If the CSS file had not been in the
document root, or if it had been spelled with characters whose case
differed from the name used in the HTML,
the validation would have failed.
Again fail? Do you mean 'not found'?





Which? 'htdocs' was the 'htdocs' or the 'site.learn_html_htmldog' was
the 'htdocs', or the 'www' was the 'htdocs'?
Click to expand...

~/www is a folder with several sites in it. The site I'm using for
HTMLDog's tutorials, the site I'm using for w3school's tutorials and
several sites out of the O'Reilly Apachie book.
Also whatever you did to the filesystem it does match the DocumentRoot
directive in the httpd.conf? It this your default server or a vhost
site? Most times rather than change the default server's setting just
add a vhost for any development sites. Add plus is that you can have
*more than one*
Click to expand...

I'm currently working on the HTMLDog tutorial, so Apache is
configured to use that site.

I haven't worked with virtual hosts. It might be appropriate, but
I'm interested in getting up to speed with HTML before I deal with
other issues.
NameVirtualHost *:80
<VirtualHost *:80>
   ServerName learn_css.my.lan
   DocumentRoot /var/www/vhosts/css
</VirtualHost>

<VirtualHost *:80>
   ServerName test.my.lan
   DocumentRoot /var/www/vhosts/test
</VirtualHost>

<VirtualHost *:80>
   ServerName another_test.my.lan
   DocumentRoot /somewhere/completely/different



Well if htdocs is your document root then the url '/web.css' should work.
Click to expand...

Yea, that's what I'm thinking. :)
If you are not browsing from the machine that the webserver is running
thenhttp://localhostshould fail, 'localhost' means your machine. the
one your using aka 127.0.0.1 or loopback address.






                                          ^^                    ^
                                          1                     3

No, http://<ip address>/web.css
Click to expand...

The "httpd" was a typo from copying the text.

Removing the trailing "/" resulted in web.css being displayed.
[1] protocol is "http://"
[2] no trailing "/" else Apache will parse "web.css" as a directory


in:
Click to expand...
           Not Found
Click to expand...
           The requested URL /web.css/ was not found on this server.
Click to expand...
    Is there a protocol other than "http" I should be trying?
Click to expand...
    I'll try these if needed, but the CSS validation fails if I try to
move web.css or change the case of any character in it's name.  Does
the fact that I get a nice green "Congratulations! No Error Found."
indicate that the CSS is present and readable?
Click to expand...
    The web.css is readable by group and others.
Click to expand...
    I saw that not all files in this site's directory structures are
owned by webgroup so I ran:
Click to expand...
       chgrp -R webgroup * and chaged everything except httpd.pid.
Still no luck.
Click to expand...

Well I would look in the httpd.conf for the proper user. The default
install 2.x it has been

User www-data
Group www-data

In the past with 1.x

User apache
Group apache

Of course defaults don't matter it is what is in your httpd.conf that
counts.
Click to expand...

They look good to me.

My guess is that this is something simple that I'm overlooking
it.

I'm going to get a web host this week and I'll be able to show what
I'm doing there.

Jonathan, as stated before, I appreciate your assistance.

Thanks
Larry
 
J

Jonathan N. Little

Larry said:
On Nov 15, 2:07 pm, "Jonathan N. Little"<[email protected]>
wrote:
Click to expand...

~/www is a folder with several sites in it. The site I'm using for
HTMLDog's tutorials, the site I'm using for w3school's tutorials and
several sites out of the O'Reilly Apachie book.


I'm currently working on the HTMLDog tutorial, so Apache is
configured to use that site.
Click to expand...

So are you editing your main server's document root for each "site" that
you work on? If so, not only is that cumbersome, but prone to error
(which might be your current problem). Also you can only run *one* site
at a time. Far better to leave the main server setting alone at the
default /var/www/html with just some "Yah it works!" page or better to
your Apache documentation. Then for your sites just add vhosts like below...

Easy to do see:

http://httpd.apache.org/docs/2.2/vhosts/

You probably want *name-based* virtual hosts as I have shown.
 
L

Larry Lindstrom

So are you editing your main server's document root for each "site" that
you work on? If so, not only is that cumbersome, but prone to error
(which might be your current problem). Also you can only run *one* site
at a time. Far better to leave the main server setting alone at the
default /var/www/html with just some "Yah it works!" page or better to
your Apache documentation. Then for your sites just add vhosts like below....

Easy to do see:

http://httpd.apache.org/docs/2.2/vhosts/

You probably want *name-based* virtual hosts as I have shown.
Click to expand...

Thanks Again Jonathan:

You certainly are persistent, aren't you? :)

I didn't want to worry about Apache virtual hosts, but I know I'll
want to use them at some point.

The CSS isn't progressing that well, so why not now?

I've copied the conf and logs directories from www/
site.learn_html_htmldog to www, and modified httpd.conf to have two
virtual hosts, enough to start for now.

Modified the XP machine's hosts files and now I have virtual hosts
working.

On startup, Apache does post this complaint:

httpd: Could not reliably determine the server's fully
qualified domain name,
using ::1 for ServerName

But I can identify either virtual host to Firefox and the correct
site comes up.

I'm sure I'll want to tune up the virtual host configurations, but
I have basic functionality, thanks to you.

This doesn't get the CSS working, but it is an improvement to my
configuration.

Thanks
Larry
 
T

Travis Newbury

I've heard of a boy named "Sue" but never a girl named "Sherm"...
Click to expand...

Using the ethnic "You go girl" in this situation is implying that I am
encouraging Shemp to continue on his rant against evil (in this case,
evil is in the shape of an external style sheet). The "girl"
reference, in this example, truly has no gender attached to it and can
easily be applied to Shemp.

Sorry if this caused any confusion.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to keep an a:hover effect with css like "onMouseOut()"? 2
The color rule I coded in CSS doesn't go the same with HTML 1
CSS File does not really work? 1
Positioning CSS components 1
Im having trouble containing a title an image and a button 2
CSS basic issue 2
How to properly insert a landing page within same container beneath an image element? 0
Working on mobile css menu with plenty of frustration! 2

Members online

Total: 72 (members: 1, guests: 71)
Robots: 404

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,821
Latest member
AleidaSchi

Latest Threads

Top