Solved

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

Posted on 2000-04-04
13
171 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

948 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

20 Experts available now in Live!

Get 1:1 Help Now