Solved

Basic CSS

Posted on 2000-05-11
15
260 Views
Last Modified: 2010-04-09
if i wish to use css for my webpg, do i jus need to use include the folowing code and use it as in <a bla bla></a>?

<STYLE type="text/css">
<!--
.nafi { font-family:Verdana; text-decoration:none; color: #990000}
.nafi:visited { font-family:Verdana; text-decoration:none; color: #990000}
.small  {font-family: Arial, Verdana, sans-serif; font-size:9pt}

A:link {  font-family: Arial, Helvetica, sans-serif;
          text-decoration: none;
          color: #330099}

A:visited {  font-family: Arial, Helvetica, sans-serif;
             text-decoration: none;
             color: #0000CC}

A:active {  font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #000000}

A:hover {  font-family: Arial, Helvetica, sans-serif;
           text-decoration: none;
           color: #FF0000}

.roll { font-family:Arial; text-decoration:none; color: #330099}
A.roll:hover { color:red; }
.roll2 { font-family:Arial; text-decoration:none; color: #000000; font-size:14pt}
A.roll2:hover { color:red; }
.whitelink {  color: #FFFFFF; text-decoration: none}
.redlink {  color: #FF0000; text-decoration: none}

-->
</STYLE>


<span class="nafi"></span>
<style type="text/css">
<!--
.whitelink {  color: #FFFFFF; text-decoration: none}
-->
</style>
0
Comment
Question by:java_kevin
  • 7
  • 6
  • 2
15 Comments
 
LVL 4

Accepted Solution

by:
yowkee earned 50 total points
ID: 2803231
If this is the style setting you want, just paste these text (<Style>...</Style> inside header <head>..</head> of your html file.

If you want to use it in multiple html file, save it to a file (without the <style> and </style> tags), said main.css. Then specify in header of your html file as:
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="main.css">
</head>
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2804157
You'd want to remove the SPAN element that snuck in between the two STYLE elements in there (class="nafi").

Apart from that the style sheet looks ok after a quick glance.  You'd want to add generic font-families to all font-family definitions (add sans-serif), and it's also adviced to set both foreground and background colors, instead of just one.  So you'd want to add a background-color setting to the color properties.

Couldn't spot anything obvious apart from those, and yowkee's comment is spot on.
0
 

Author Comment

by:java_kevin
ID: 2806503
so, how do i use the css? i mean ,to amke use of them.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 7

Expert Comment

by:nettrom
ID: 2806613
I don't understand what exactly you are asking... yowkee described how to include the style information you posted in an HTML document, either by using the STYLE element in the HEAD, or by linking it in through the LINK element.

Please try to explain what you're trying to do.  I'm suspecting that you might want a general introduction to CSS, but I'm not sure about that either.
0
 

Author Comment

by:java_kevin
ID: 2807834
I mean, how do i use the css in my page? I mean, how do i apply the css to the links? so that i can configure each links to the colours stated. I cna also make it that all text are in that font right?
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2808033
The four statements that control the presentation of links are:

A:link {  font-family: Arial, Helvetica, sans-serif;
          text-decoration: none;
          color: #330099}

A:visited {  font-family: Arial, Helvetica, sans-serif;
             text-decoration: none;
             color: #0000CC}

A:active {  font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #000000}

A:hover {  font-family: Arial, Helvetica, sans-serif;
           text-decoration: none;
           color: #FF0000}

'a:link' is unvisited links, 'a:visited' visited links', 'a:active' active links, and 'a:hover' is the presentation when the cursor is over the link.  In all cases they are set to be shown with Arial, Helvetica or a sans-serif font.  No underlining, and the color should stand out for itself.

Maybe try reading an introduction to CSS?  http://www.w3.org/Style/CSS/#learn
0
 

Author Comment

by:java_kevin
ID: 2813903
I think I know how to phrase my question: How do i actually apply it to the links?
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2814911
You will have to use either an inline stylesheet defined in the HEAD of the document, or a linked stylesheet through the use of the LINK element.  This was mentioned by yowkee in the first comment.

Example of #1:

<html>
<head>
<title>CSS test page</title>
<style type="text/css">
body { color: black; background: white; }
a:link { color: blue; background: white; }
a:visited { color: purple; background: white; }
a:active { color: red; background: white; }
</style>
</head>

This resembles the default color setup of most browsers, the equivalent to:

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

You can also use a linked stylesheet.  Let's call it "my-stylesheet.css".  You then dump the content of the STYLE element (what's between <style> and </style> in the previous example) into it's own file.  To link it into the current document use:

<link rel="stylesheet" type="text/css" href="my-stylesheet.css">

Again, it goes in the HEAD.

If that's not what you're looking for, then I'm afraid I can't comprehend the question.
0
 

Author Comment

by:java_kevin
ID: 2820183
I think I asked a few stupid questions, though :) I forgot they (the statements) already define how the various types links, eg visited, active, look when the focus is on them.

Anyway, nettrom, thansk for the patience. I believe you are kinda getting p*ssed 'cos i keep asking some questions that have already been answered.

However, I'm sorry that you answered the follow-ups, for which I can't really award you the points. If you wish, I can open another question to give you your worth.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2820197
No need to open another question.  And no, I never got p*ssed, I had no reason to be.  Sometimes it's not easy to make someone else understand what yourself regards as basic knowledge.  Maybe because it's so fundamental.

I'm just happy that we got this thing solved, which is what E-E is all about. :)
0
 

Author Comment

by:java_kevin
ID: 2820229
Another thing:
What do the .roll, .nafi do? If used, do they overwrite any existing css? and the whitelink/redlink? Do they mean anythign spcial?

..roll { font-family:Arial; text-decoration:none; color: #330099}
                    A.roll:hover { color:red; }
                    .roll2 { font-family:Arial; text-decoration:none; color: #000000; font-size:14pt}
                    A.roll2:hover { color:red; }
                    .whitelink {  color: #FFFFFF; text-decoration: none}
                    .redlink {  color: #FF0000; text-decoration: none}
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2820241
Those are as far as I can see meant to be different classes, so you can have another layout for other links in the same document.  Say you have navigation on the left-hand side with one color combination, and you want links inside paragraphs to have another color combination, you can use classes to separate them.  If you have:

<a href="somepage.html" class="roll">

it will use the '.roll'-definitions for how it'll look.  Likewise with the '.nafi'.  I'm not sure about the '.redlink' and '.whitelink' since most browsers tend to ignore such definitions unless they are defined as '.redlink:active' and so forth.
0
 
LVL 4

Expert Comment

by:yowkee
ID: 2824119
I don't really follow this question and feel nettrom deserve the points. Well done, nettrom.  :-)
0
 

Author Comment

by:java_kevin
ID: 2825151
yowkee, u answered the questions first regarding how to use the statements... :)

Then does the fonts stated in css apply to all  words in the doc? I mena, the fonts used in css always appear different and special, not forgetting nice. By stating the way links look, will this affect the font of the words in doc?
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2825195
With the CSS you posted: no.  It's only the links that are affected.  If you want to give the document a certain font and font-size you have to define the properties for BODY.  E.g:

body {
  font-family: Verdana, Arial,Helvetica,sans-serif;
  font-size: 83%;
}

to get close to 10pt Verdana as default (resorts to Arial, Helvetica or a sans-serif font if Verdana isn't available).

Next lesson will be how to live with Netscape's habit of losing CSS properties after tables. ;)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

792 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