Member Avatar for Heidegger

I'm a beginner at web design, so my webpage is not that great. I use notepad to edit my HTML and IE7 to display my webpage. I tried to put in CSS in my webpage to make purple letters and a yellow background, but it never works. I had to use html to do it. I would really like to learn how to use CSS. My website is heidegger001.angelfire.com. This is my code.

<html>
<head>
<meta name="author" content="Jackson Hong">
<meta name="description" content="Jackson Hong">
<meta name="keyword" content="Jackson,Hong">
<title> Jackson Hong's Personal Web Page
</title>
</head>
<body bgcolor="yellow" text="purple">
<p> My name is Jackson Hong. </p>
<p> I live in Cupertino, California. </p>
<p> My hobby is html. Still trying to learn it so I guess I'm not that great at it. </p>
<img src="http://www.freeimageslive.com/galleries/nature/roses/floralrose0659_small.jpg">
<iframe width="650" height="480" src="" frameborder="0" scrolling="no"></iframe>
<!-- \/ GuestGEAR Code by http://htmlgear.com \/ -->
<a href="http://htmlgear.lycos.com/specs/guest.html"><img border=0 ismap src="http://htmlgear.lycos.com/img/guest/gb_white.gif"></a><br>
<a href=""><font face="arial,helv,helvetica,sans serif" size=-1>View My Guestbook</font></a><br>
<a href=""><font face="arial,helv,helvetica,sans serif" size=-1>Sign My Guestbook</font></a><br>
<!-- /\ End GuestGEAR Code /\ -->
<!-- START OF HIT COUNTER CODE -->
<br><script language="JavaScript" src="http://www.counter160.com/js.js?img=1"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/1/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/1/right.png" border="0" align="texttop"></a>
<!-- END OF HIT COUNTER CODE -->
</body>
</html>

  • 2 Contributors
  • 4 Replies
  • 213 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Heidegger

Dani AI

Generated

Good catch by — a missing pair of curly braces will break a CSS rule and make the browser ignore that block. confirmed adding the braces fixed the immediate problem. A few extra points make the page more robust and avoid similar surprises later.

A minimal, modern approach is to use a standards DOCTYPE, a charset meta, and an external stylesheet. Example skeleton (place this in the page head and link to a separate styles.css file):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personal Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="site">
  <p>My name is Jackson Hong.</p>
</body>
</html>

And a short example in styles.css (keeps presentation separate from markup):

.site {
  background-color: #fff59d; /* pale yellow */
  color: #6a006a;           /* purple */
  font-family: Arial, sans-serif;
}

Quick troubleshooting checklist (common causes when CSS "does nothing"):

  • Syntax errors earlier in the document (missing braces, stray angle brackets) cause the CSS parser to stop.
  • Style definitions must be inside the head (or in an external file linked from head) unless using inline style attributes.
  • Browser cache or a bad upload path can make an old copy appear; check the CSS file URL and force-refresh the browser (Ctrl+F5).
  • Inline attributes (deprecated bgcolor, text, or inline style on an element) have higher priority and can override stylesheet rules.
  • Use developer tools (F12) to inspect computed styles and any 404/parse errors.

Notes: move away from presentational attributes like bgcolor and <font>, validate the HTML if problems persist, and use a modern browser for easier debugging. This preserves accessibility and makes future styling much easier.

Recommended Answers

All 4 Replies

Member Avatar for Hangfire

Are you trying to enter your CSS in the same page or an external page and then link to it?

Member Avatar for Heidegger

I am trying to do it in the same page, but either way would be fine.

Member Avatar for Hangfire

okay, within your head tags type this

<style type="text/css">
body
{
color:#cc00cc;
background-color:#ffff00;
}
</style>

Notice I specified what I wanted to apply the style to in this case body. The styles I applied are encased in curly brackets {}.
Then you enter what you want to change for the text color it's just color, then a colon : then the value, I use #values. Finally a semi-colon.

If you ever find when playing with CSS that something is not happening, double check your semi-colons and colons.

I've give you a snippet of CSS, I would highly recommend www.w3schools.com for the full run down.

Hope that helps and good luck

Member Avatar for Heidegger

Thanks. I forgot to put the curly brackets. It works now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.