Solved

CSS question in html project... i need help!!!

Posted on 2000-04-04
13
201 Views
Last Modified: 2010-04-09
I am very confused on the CSS topics in the HTML 4.0 for the WWW text im reading(not school work)

I have wrote the html for the previous question (example is below) but now its asking me to make the following changes:

1- table captions to be blue, font 14 font helvetica

2 - background white

3-  links yellow

4 - vlink red

5 - alink black

6 - link hover to be background of cyan and text teal

7 - intro to be blue background with thick double green border

8 - use <H3> tag to set intro section font size to 10 and font family times new roman

9-  table header blocks olive color

10 - table data blocks gray color


_______________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4,0//EN">
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
</HEAD>
<BODY BGCOLOR=GREEN TEST="#FFFFC6"
LINK=REF VLINK=WHITE ALINK="#FFC6A5">
INTRODUCTION:<P>
<HR size="15" width="75%" align="center" noshade>
<TABLE border=10>
<CAPTION>FRIENDS</CAPTION>
<TR>
<TH><BR>
<TH>CAR
<TH>PET
<TH>E-MAIL

<TR>
<TH>TOM
<TD>NEON
<TD>DOG
<TD><A
HREF="mailto:Tom@RTC.NET">CT</A>******************
**************************************************
*******************tlpar2


if you can change the above html to accomplish ALL of the 10 changes you can have all of the points...

thanks



0
Comment
Question by:schmitty22
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
13 Comments
 
LVL 1

Author Comment

by:schmitty22
ID: 2685621
should state this better.  

considering the above html---> i want to create the Cascading sytle sheet that accomplishes all the noted 10 changes above.

thanks again
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2686374
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4,0//EN">
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<style type="text/css">
<!--
body {  background-color: #FFFFFF}
caption {  color: blue; font-family: Helvetica; font-size: 14pt}
a:link {  color: yellow}
a:hover {  background-color: cyan; color: teal}
..intro {  background-color: blue; border: green; border-style: double; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick}
th {background-color: olive}
td {background-color: gray}
..test {  font-family: "Times New Roman", Times, serif}
-->
</style></HEAD>
<BODY BGCOLOR=GREEN TEST="#FFFFC6"
LINK="YELLOW" VLINK="RED" ALINK="BLACK">
<div class="intro"><font size="10" face="Times New Roman">INTRODUCTION:</font></div>
<HR size="15" width="75%" align="center" noshade>
<TABLE border=10>
<CAPTION align="bottom">FRIENDS</CAPTION>
<TR>
  <TH>&nbsp;</TH>
  <TH>CAR</TH>
  <TH>PET</TH>
  <TH>E-MAIL</TH>
</TR>
<TR>
<TD>TOM</TD>
<TD>NEON</TD>
<TD>DOG</TD>
<TD><A
HREF="mailto:Tom@RTC.NET">CT</A>
</td>
</tr>
</table>

</body>
</html>
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2686383
Should mention that the link, vlink, alink property are part of the <body> statement and are not css styles.  

If you wish a css equivalent, for IE only you can use the psuedo classes of a:link, a:visited, a:hover, and a:active.  Let me know if this was what you intended rather than actually using the link, vlink and alink as stated in your question.

There are other ways to attach style to elements, these would include #someID { style properties } and then in a html tag include id="someID"

let me know what else above you need,
davlun

*** answer as listed above
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:davlun20080
ID: 2686392
one correction, delete the "..test { font-family.... }" line in the style sheet, it was only there for testing purposes.... sorry
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2686395
davlun20080 changed the proposed answer to a comment
0
 
LVL 3

Accepted Solution

by:
davlun20080 earned 500 total points
ID: 2686397
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4,0//EN">
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<style type="text/css">
<!--
body {  background-color: #FFFFFF}
caption {  color: blue; font-family: Helvetica; font-size: 14pt}
a:link {  color: yellow}
a:hover {  background-color: cyan; color: teal}
...intro {  background-color: blue; border: green; border-style: double; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick}
th {background-color: olive}
td {background-color: gray}
-->
</style></HEAD>
<BODY LINK="YELLOW" VLINK="RED" ALINK="BLACK">
<div class="intro"><font size="10" face="Times New Roman">INTRODUCTION:</font></div>
<HR size="15" width="75%" align="center" noshade>
<TABLE border=10>
<CAPTION align="bottom">FRIENDS</CAPTION>
<TR>
  <TH>&nbsp;</TH>
  <TH>CAR</TH>
  <TH>PET</TH>
  <TH>E-MAIL</TH>
</TR>
<TR>
<TD>TOM</TD>
<TD>NEON</TD>
<TD>DOG</TD>
<TD><A
HREF="mailto:Tom@RTC.NET">CT</A>
</td>
</tr>
</table>

</body>
</html>

HERE IS the code with the corrections referenced above.  I also adding closing tags for your original code.

davlun
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2686412
the valign=bottom tag will let you specify where the caption will appear, above or below the table.  In this case it will appear below the table header, I just included it for example purposes.
0
 
LVL 1

Author Comment

by:schmitty22
ID: 2686950
thats pretty much it....  I was finding that IE was rejecting it in cascade but wasnt sure why.. thanks for explaination and help..

can this be converted now to an external sytles sheet web page?  how?

and if i open it in Netscape and IE which would or not work? any ideas?

thanks again...
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2688391
To link, place this in your head section of your doc, making sure that the path is correct for your style sheet:
<link rel="stylesheet" href="mystylesheet.css">

As for cross browser, the styles that will most likely give you bad results from the choices above are the background and the border properties.  IE as might be expected has much better support for this than NS.

davlun
0
 
LVL 1

Author Comment

by:schmitty22
ID: 2689584
ok.. thats what i have found out too trying it in both browsers yesterday..  I wonder if the new NETSCAPE 6.0 fixed that..

also ... what about the converting to EXTERNAL STYLES SHEET?

is that what your last comment was?  link with the <link rel=....> ?

what actually is the the converting to external styles sheet web page do to the previous html?  im lost here....

i  will reward you 100 more points for the conversion to external style sheet if you can do that and post the finished html... can you?
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2689968
Not sure if it is worth a 100 points but here is my answer to your question:

Place this code in a separate file and call it mystylesheet.css (where mystylesheet is whatever name you want to call it).

<!--
body {  background-color: #FFFFFF}
caption {  color: blue; font-family: Helvetica; font-size: 14pt}
a:link {  color: yellow}
a:hover {  background-color: cyan; color: teal}
..intro {  background-color: blue; border: green; border-style: double; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick}
th {background-color: olive}
td {background-color: gray}
..test {  font-family: "Times New Roman", Times, serif}
-->

Then add the link statement in my previous comment in place of the embedded style sheet you have in the code I first posted.  So the finished code would look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4,0//EN">
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<link rel="stylesheet" href="mystylesheet.css">
</HEAD>
<BODY LINK="YELLOW" VLINK="RED" ALINK="BLACK">
<div class="intro"><font size="10" face="Times New Roman">INTRODUCTION:</font></div>
<HR size="15" width="75%" align="center" noshade>
<TABLE border=10>
<CAPTION align="bottom">FRIENDS</CAPTION>
<TR>
  <TH>&nbsp;</TH>
  <TH>CAR</TH>
  <TH>PET</TH>
  <TH>E-MAIL</TH>
</TR>
<TR>
<TD>TOM</TD>
<TD>NEON</TD>
<TD>DOG</TD>
<TD><A
HREF="mailto:Tom@RTC.NET">CT</A>
</td>
</tr>
</table>

</body>
</html>

let me know if you have any questions,
davlun
0
 
LVL 1

Author Comment

by:schmitty22
ID: 2690205
THATS IT.. THANKS AGAIN... you've been a great help .. not just answers but explainations. thats what makes this site great is people like you!!  


I think i got it now....
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2692048
glad to help
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question