Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

Basic CSS

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
java_kevin
Asked:
java_kevin
  • 7
  • 6
  • 2
1 Solution
 
yowkeeCommented:
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
 
nettromCommented:
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
 
java_kevinAuthor Commented:
so, how do i use the css? i mean ,to amke use of them.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
nettromCommented:
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
 
java_kevinAuthor Commented:
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
 
nettromCommented:
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
 
java_kevinAuthor Commented:
I think I know how to phrase my question: How do i actually apply it to the links?
0
 
nettromCommented:
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
 
java_kevinAuthor Commented:
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
 
nettromCommented:
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
 
java_kevinAuthor Commented:
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
 
nettromCommented:
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
 
yowkeeCommented:
I don't really follow this question and feel nettrom deserve the points. Well done, nettrom.  :-)
0
 
java_kevinAuthor Commented:
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
 
nettromCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 7
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now