Solved

Basic CSS

Posted on 2000-05-11
15
251 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

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

12 Experts available now in Live!

Get 1:1 Help Now