CSS stylesheeting (1 Viewer)

B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
OK question - if you wanna save your CSS as a separate file, do you save it as FILENAME.css or what? and can somebody show me a basic template of what it should look like?
 
sukiyaki

sukiyaki

emptiness
Joined
Nov 9, 2002
Messages
1,505
Location
westie
Gender
Female
HSC
2003
save it as
filename.css

the file would be just the css coding like

<style type="text/css">
A:link
{ text-decoration: none; color:grey; cursor:e-resize;}
A:visited
{ text-decoration: none; color:grey; }
</style>
 
Agent Z

Agent Z

Member
Joined
Sep 30, 2003
Messages
181
Location
Sydney
Gender
Female
HSC
2005
This is what my css style sheet looks like:



.BottomLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 6px;
COLOR: #FFFFFF;
PADDING-TOP: 8px;
text-decoration: none;
}

.BottomLinks:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 6px;
COLOR: #CCCCCC;
PADDING-TOP: 8px;
text-decoration: none;
}






I called this style sheet "styles.css". as you can see, i dont have a header. The "BottomLinks" is what hte links are to look like normally i.e. when theres no mouse pointer over them. The BottomLinks:hover is what it looks like when a mouse is positioned over it.

In this case, when a mouse goes over a link it will change from white to grey, and when mouse moves out of link area, it will change back.


To correctly link the style sheet to a html document in the <head> part put this following tag:

<link HREF="styles.css" REL="stylesheet" TYPE="text/css">

obviously you would change the <link HREF="styles.css"... to whatever your style sheet was called.

E.g.

<head>
<title>Page Nametitle>
<link HREF="styles.css" REL="stylesheet" TYPE="text/css">
</head>





Now to use part of the stylesheet for the link this is an example of would do:

<a href="searchadv.htm" class="BottomLinks">Search</a>

obviously if the class wasnt called bottom links, you would change it to whatever you called it.



You can keep adding different classes to the sheet without having to make numerous sheets, they would simply just be added to the bottom.

E.g.

.BottomLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 6px;
COLOR: #FFFFFF;
PADDING-TOP: 8px;
text-decoration: none;
}

.BottomLinks:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 6px;
COLOR: #CCCCCC;
PADDING-TOP: 8px;
text-decoration: none;
}

.LocationLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 6px;
COLOR: #003366;
PADDING-TOP: 8px;
text-decoration: none;
}

.LocationLinks:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
font-variant: normal;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
COLOR: #FFFF00;
PADDING-TOP: 0px;
text-decoration: none;
}

As you can see, i just added "location links" to the bottom.


Its really not all that hard. If you have any more questions just pm me or post a reply. I know this reply wasnt all that clear, but i aint meant to be online :p Better get back to studying.
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
LOL

nah its good

just one q

go to my website: http://nancy.funkii.com

on the popup window, i cant get rid of the border
i set it to border=0 but it still wont go

any suggestions?
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
=/ maybe its just me

its a javascript

dw i fixed it now
 
Fosweb

Fosweb

I could be your Doctor...
Joined
Jun 20, 2003
Messages
594
Location
UNSW. Still.
Gender
Male
HSC
2003
I can still see a border....

If you want true borderless stuff, then try Microbians Chromeless windows... ( http://www.microbians.com )

The only example i have online of that is a maths project i did before, at http://fosweb.com/SortPres/

All the backgrounds/tables/borders/rollover-images etc were done with css, if you want the stylesheet I can send it to you.
CSS is much more than just changing the appearance of your links...

Check out this site for css stuff:
http://www.csszengarden.com/
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
nah
im using IFRAMES for teh popup
i got rid of the border for that by setting a clear filter thing

but you could help me with this
1/ my links are still blue
2/ my text still justifies even though i set it to align right
does anyone wanna help me
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
im doing it all with HTML on frontpage

ARGH WHY THE HELL ARE MY LINKS BLUE
 
Last edited:
Fosweb

Fosweb

I could be your Doctor...
Joined
Jun 20, 2003
Messages
594
Location
UNSW. Still.
Gender
Male
HSC
2003
How are you linking your css file to your html file?
Theres two standard ways: (in the head section)

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

or

<style type="text/css">
<!--
@import url("stylesheet.css");
-->
</style>


Your links could be blue if you have visited the links on your comp, and not set the .visited css property (but then they would probably be purple).....
Is other css stuff working?
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
yeah i did
everything works except the colour of the links
 
Agent Z

Agent Z

Member
Joined
Sep 30, 2003
Messages
181
Location
Sydney
Gender
Female
HSC
2005
if style sheeting doesnt work you could always resort to good ol' HTML tags.

<body link="#999999" vlink="#000000" alink="#FFFFFF">

  • Where link="#xxxxxx" is the color of the link when nothing is being done to it. I.e. no mouse over or click. In the example above case a mid gray
  • Where vlink="#xxxxxx" is the color of the link once it has been clicked and you have returned to that page. I.e. A visited link. In the example above black
  • Where alink="xxxxxx" is the color of the link temporarily once the link is clicked. I.e. when you click on the link it will change to white (in the example above) for a fraction of a second before turning into the vlink color (which is gray)

you get me?
 
Agent Z

Agent Z

Member
Joined
Sep 30, 2003
Messages
181
Location
Sydney
Gender
Female
HSC
2005
Originally posted by babydoll_
nah
im using IFRAMES for teh popup
i got rid of the border for that by setting a clear filter thing

but you could help me with this
1/ my links are still blue
2/ my text still justifies even though i set it to align right
does anyone wanna help me
Click to expand...

Tell me two things.
- The URL of your page
- The name of the stylesheet located on your site
 
B

babydoll_

wat
Joined
Oct 22, 2002
Messages
4,531
Gender
Undisclosed
HSC
N/A
the new one? havent explored it yet
Originally posted by Agent Z
Tell me two things.
- The URL of your page
- The name of the stylesheet located on your site
Click to expand...
http://nancy.funkii.com
CSS: http://nancy.funkii.com/style.css
Originally posted by Agent Z
if style sheeting doesnt work you could always resort to good ol' HTML tags.

<body link="#999999" vlink="#000000" alink="#FFFFFF">

you get me?
Click to expand...
yeah i know; but it'll be so inconvenient to change if i do a new layout
 
Agent Z

Agent Z

Member
Joined
Sep 30, 2003
Messages
181
Location
Sydney
Gender
Female
HSC
2005
Originally posted by babydoll_
the new one? havent explored it yet

http://nancy.funkii.com
CSS: http://nancy.funkii.com/style.css

yeah i know; but it'll be so inconvenient to change if i do a new layout
Click to expand...
Originally posted by babydoll_
the new one? havent explored it yet

http://nancy.funkii.com
CSS: http://nancy.funkii.com/style.css

yeah i know; but it'll be so inconvenient to change if i do a new layout
Click to expand...
what did you use to make your stylesheet? Its a mess
 
Fosweb

Fosweb

I could be your Doctor...
Joined
Jun 20, 2003
Messages
594
Location
UNSW. Still.
Gender
Male
HSC
2003
Just going back to Agent Z's other post: If you have those HTML tags (in the body section) they will 'overpower' the css styles... so get rid of them.

Also: dont include the html tags in the css file.
My css file is here:
http://fosweb.com/fox_styles.css
 
Agent Z

Agent Z

Member
Joined
Sep 30, 2003
Messages
181
Location
Sydney
Gender
Female
HSC
2005
Originally posted by Fosweb
Just going back to Agent Z's other post: If you have those HTML tags (in the body section) they will 'overpower' the css styles... so get rid of them.

Also: dont include the html tags in the css file.
My css file is here:
http://fosweb.com/fox_styles.css
Click to expand...
Yeah, i was just giving her an alternate way of doing it without using css
 
You must log in or register to reply here.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top