Solved

Basic CSS

Posted on 2000-05-11
15
254 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
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 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

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

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.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

943 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

15 Experts available now in Live!

Get 1:1 Help Now