Solved

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

Posted on 2000-04-04
13
162 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
  • 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now