CSS not working [Archive] - Lissa Explains it All: Web Design Forums

SapphirePhoenix

05-22-2004, 10:14 PM

Hello, I read the css sectionof this site, and how to use it, but whenever I try to applyit to my journal only html works and that is only partially. I have no idea what I am doing wrong with css I type it all in like I am upposed to, making certain not to remove any colons or somicolons and it still happens. Not even HTML is working properly. Arrrggg. Someone help. Please. lol

Thanks,
SP

Rosey

05-22-2004, 10:36 PM

what's your url?

SapphirePhoenix

05-22-2004, 10:46 PM

My url is bolt.com I am trying to get my journal on that site to take the css code, but it won't work.

<style type="text/css">

body
{ background-color: #000000; }

font-family: Courier;
color: FF00FF;
letter-spacing: 3pt;
font-weight: lighter;
font-size: 2;

input,textarea
{ background: #000000;
font-family: Courier;
color: #FF00FF
border-style: ridge
border-color: # 000000
border-width: 6; }

</style>

That's the css I am trying to place in my journal. Perhaps I should just use html but then I would have to add the html code in each and every journal entry and that would get tiring and confusing after awhile.

Rosey

05-22-2004, 11:01 PM

well i need the url to your journal but looking at your css you need to put the font stuff in the body {} so it should look like this:

<style type="text/css">

body
{ background-color: #000000;
font-family: Courier;
color: #FF00FF;
letter-spacing: 3pt;
font-weight: lighter;
font-size: 2;}

input,textarea
{ background-color: #000000;
font-family: Courier;
color: #FF00FF;
border-style: ridge;
border-color: # 000000;
border-width: 6; }

</style>

You had a few ; missing too. If you are using an external style sheet, make sure to take the <Style> tags out.

SapphirePhoenix

05-22-2004, 11:45 PM

Thanks! I'll try that and seeif it works. =) hehe

SapphirePhoenix

05-22-2004, 11:55 PM

Okay, I tried that, it didn't work. What is an external style sheet? I used html in my ohter journal entries and I was wondering can html and ccss be used together? Also, where does the text go in regards to css?

thank you for your help! =)

Rosey

05-23-2004, 12:51 AM

yes they can be used together. CSS is just to tell the webpage how to display the page, what color to use, what font to use, what border......

It should work without problem but without seeing your full code or the actual page it's on (which is what I prefer to look at) then I can't tell you why it's not working.

If you use css on your html pages, it would look like this:

<html>
<head>
<title></title>

<style type="text/css">

css stuff

</style>
</head>
<body>

content here

</body>
</html>

If you use an external style sheet, it's easier for you to change the looks of your entire site because you just have one file to change. Having the css on the htlm pages itself, you'd have to open all the pages and edit the css.

To link the style sheet you do this:

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

and then you open a blank page and only put css on it, no <style> tags, no html no nothing.

tucker

05-23-2004, 03:50 AM

tucker

05-23-2004, 04:02 AM

are you sure that youre calling the class right?
class="class"

and that you have your Css code in the head of your html document?

Monkey Bizzle

05-23-2004, 04:12 AM

...that should work, classes should have a period before them...

but then don't you have to put <div class="___"> around everything when you use periods?

If you use an external style sheet...you just have one file to change...

To link the style sheet you do this:

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

and then you open a blank page and only put css on it, no <style> tags, no html no nothing.

Make sure you name your style sheet style.css If you name it something else, be sure to change the red part up there to the name of your style sheet... and put the code up there in between your head tags...

Rosey

05-23-2004, 04:33 AM

yes you would have to put something with class="whatever"

What I did was telling them to make ALL input and textareas a certain way, same for the body, no need for a period there. You are confusing 2 things.

Here is lissa's page on css:
http://lissaexplains.com/css.shtml

There isn't anything about class and ids but here is a post about the difference:

http://www.lissaexplains.com/forum/showpost.php?p=405045&postcount=3

SapphirePhoenix

05-23-2004, 12:13 PM

Again, thank you everyone for all of your help. I tried what you posted Rosey but it didn't work, however, someone sent me a ccs code that works in her journal and it did in mine too. hehe <style type="text/css">
body{
scrollbar-face-color: #FFccFF;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #ffccff;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ffccff;
scrollbar-shadow-color: #ffccff;
}

table,td,p{color:ff00ff;font:8pt tahoma;}b{color:ffccff;font:8pt arial;font-weight:bold}

table,td,p,body,div{background-color:#000000;}
</style>

Also, you wanted to see the page for yourself, and the reason why I didn't post the url is because you have to be logged onto bolt to view it. But it you log in the url is: http://www.bolt.com/apps/id/viewDiary.asp?amigo_id=10100562&amigo_name=NocturnaCyanide

thanks everyone!!
=)

Rosey

05-23-2004, 12:33 PM

[SIZE=2][FONT=Tahoma]the reason it probably didn't work is that sometimes, when you put your stuff in body {} is won't work for td tags so you can put body, tr, td {} and all I did was fix the code you already had. For the input and textarea, there isn't any with text on your site (you do have an input but it's an image).

And you really should put that css stuff in between your <head> </head> tags.

And this would be better :

<style type="text/css">

body{
scrollbar-face-color: #FFccFF;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #ffccff;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ffccff;
scrollbar-shadow-color: #ffccff;
background-color:#000000;
}
table,td,p {color:#ff00ff;font-size:8pt; font-family: tahoma; background-color:#000000;}

b{color:#ffccff;font-size:8pt; font-family: arial;font-weight:bold}

</style>

SapphirePhoenix

05-24-2004, 01:38 AM

Oh Dear.. I didn't understand any of that. What is a td tag? "so you can put body, tr, td {}" What do you mean? I know, I know, this must be furstrating for you, explaining this to someone who dosen't know anything about it. I did read Lissa's section on css though, but it still makes little to no sense. Oh well, I'll get the hang of it though. =) Thanks for your help and the new css code you gave me. =)

take care,
SP

Rosey

05-24-2004, 01:43 AM

in you table, you have td tags. Sometimes when you tell your html stuff, to make all the font in your webpage a certain way (in the body { } part), sometimes it won't do it in tables though so you also have to tell it, "oh by the way, in the td tag, do the same" and you do that by doing

body, td { }

or you could do body, table, tr, td { } to make sure it gets it right.

Make sure you put your css in the right spot, putting in randomly in the <body> part of your html may make it not work in certain browsers.

SapphirePhoenix

05-25-2004, 01:19 AM

The one you gave that would be better, why is it the spacing is different there? Like: <style type="text/css">

body{

as opposed to: <style type="text/css">
body{

This is so confusing. lol The body, td { } part goes after the </style> td tag, right? Okay, and when I was reading the layout for scc on Lissas css part of the site, it was nothing like the css code I am using now. For example, what happened to the cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
customcursorcursor: url('yourdomain.com/cursor.ani');}

h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

stylebodybody
{ background: #000000;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: value; [repeat, no-repeat, repeat-x, repeat-y]
background-position: valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: value; [scroll, fixed]

font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

direction:rtl; [this reverses the entire site so the scrollbar is on the left]

(Warning: the following scrollbar attribute is for those who use IE only!)

scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;

bodymarginmargin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }

input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }

</style>

part? Okay, sorry this is so long. Thanks again for your help. =)

Sara

Rosey

05-25-2004, 01:42 AM

It's all optional..it doesn't matter. You only put what you WANT to put in your css. If you don't want your cursor to change then don't.

There is no set order to put, you could the links first if you wanted or the body {} as the very last thing, it doesn't really matter. Lissa just tried to make her list complete. I mean if you don't want a border, you're not going to put the code in there, right?

And the space doesn't matter between

<script type="text/css">

and body...it just happened to be that way on mine.

What you could do is go around to people's site and see the different style sheets they have.

SapphirePhoenix

05-28-2004, 05:29 PM

Okay thanks, I will do that. I was just curious because the css code my friend gave me, was different from the layout Lissa gave, like: table,td,p{color:ff00ff;f ont:8pt tahoma;}b{color:ffccff;fo nt:8pt arial;font-weight:bold} for example. But I don't know a lot about css so I guess I am just making myself confused lol. Thanks for the advice though! =)

Rosey

05-28-2004, 07:30 PM

If you have more than one thing that you want to have the same attributes, you can string them along like:

body, p, table, tr, td, div {font-family:verdana; ....}

They just put their css all in a line, I like everything on it's own line :)