Back To Programming / Scripting / Coding Forum

Linking my CSS

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:19 am

I've recently been experimenting with teaching myself the art of the CSS. I've had some success...and some failure. When I insert my code inbetween style tags the style's work beautifuly.

So I tried to go a step further. Save my styles in a CSS and then link my pages to the CSS. That however, hasn't gone quite as smoothly. I think I'm currenlty having 2 problems. One is with linking to the CSS. I'm using
Code: [ Select ]
<LINK rel="stylesheet" href="StyleSheet/CSS.css" type="text/css">
. The second problem/question I have is whether creating the code in notepad, and then saving it with a .css extension actually makes it a "true" CSS file.

If you see anything missing from my link code...please let me know. If the whole adding .css thing isn't correct maybe someone could tell me what I could do instead.

Thanks in advance,
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 24th, 2004, 6:19 am

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 24th, 2004, 6:27 am

that looks fine to me, as long as your not using xhtml.
I'm assuming that you have checked the file/path name for consistancy in your upper/lower case, I always just use lowercase so you know you have got it right.

The code is fine though.


Yes a CSS extension is all that is needed for a stylesheet, it's just plain text like html javascript etc - infact I think you can give it any extension you want, but just leave it as .css :wink:
CSS website design tutorials
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:31 am

RTM:
Yea, my path & case-sensitivity are both correct. I've checked them both.
I guess I should have mentioned in my first post that I know something is arye, b/c my page isn't displaying anything that appears in a CSS defined class. And I know the page is loading b/c if I type something not in a CSS defined class it appears as web-standard text.
This really is crap. I know it's something stupid. Just don't know what.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 24th, 2004, 6:38 am

s15199d wrote:
This really is crap. I know it's something stupid. Just don't know what.


This is exactly what I am thinking.....


Hang on are you saying that if you have a

Code: [ Select ]
<div class="fubar">hello</div>


it doesn't display at all, but

Code: [ Select ]
<div>hello</div>


will? That is crazy.

Anychace of a link or the code for both css and html?
CSS website design tutorials
  • kurdt_gothic
  • Born
  • Born
  • No Avatar
  • Joined: May 05, 2004
  • Posts: 4
  • Loc: Brazil
  • Status: Offline

Post May 24th, 2004, 6:39 am

Why don´t u try to paste your code here?

the css code and file name, and html code?
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:41 am

The only exist on my local machine. They're not uploaded to the web. But, I can post the entire code. As it's a test page and very small.
CSS:
Code: [ Select ]

H1
{
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     font-size: 24pt;
     text-decoration: none;
     color: #000080    
}
H2
{
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     font-size: 18pt;
     text-decoration: none;
     color: #FFFFFF    
}
A
{
     font-weight: bold;
     font-size: 14px;
     color: #FFFFFF;
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     text-decoration: none    
}
A:hover
{
        font-weight: bold;
     font-size: 14px;
     color: yellow;
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     text-decoration: none    
}
.text
{
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     font-size: 10pt;
     text-decoration: none    
}
.nav
{
     color: #FFFFFF;
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     font-weight: bold;
     font-size: 12pt;
     text-decoration: none    
}
.red
{
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     color: #ff0000;
     text-decoration: none    
}
.green
{
       font-family: arial, times new roman;
      font-face: arial, times new roman;
       color: #008000;
       text-decoration: none    
}
.blue
{
       font-family: arial, times new roman;
       font-face: arial, times new roman;
       color: #000080;
       text-decoration: none    
}
.white
{
     font-family: arial, times new roman;
     font-face: arial, times new roman;
     color: #FFFFFF;
     text-decoration: none    
}
  2. H1
  3. {
  4.      font-family: arial, times new roman;
  5.      font-face: arial, times new roman;
  6.      font-size: 24pt;
  7.      text-decoration: none;
  8.      color: #000080    
  9. }
  10. H2
  11. {
  12.      font-family: arial, times new roman;
  13.      font-face: arial, times new roman;
  14.      font-size: 18pt;
  15.      text-decoration: none;
  16.      color: #FFFFFF    
  17. }
  18. A
  19. {
  20.      font-weight: bold;
  21.      font-size: 14px;
  22.      color: #FFFFFF;
  23.      font-family: arial, times new roman;
  24.      font-face: arial, times new roman;
  25.      text-decoration: none    
  26. }
  27. A:hover
  28. {
  29.         font-weight: bold;
  30.      font-size: 14px;
  31.      color: yellow;
  32.      font-family: arial, times new roman;
  33.      font-face: arial, times new roman;
  34.      text-decoration: none    
  35. }
  36. .text
  37. {
  38.      font-family: arial, times new roman;
  39.      font-face: arial, times new roman;
  40.      font-size: 10pt;
  41.      text-decoration: none    
  42. }
  43. .nav
  44. {
  45.      color: #FFFFFF;
  46.      font-family: arial, times new roman;
  47.      font-face: arial, times new roman;
  48.      font-weight: bold;
  49.      font-size: 12pt;
  50.      text-decoration: none    
  51. }
  52. .red
  53. {
  54.      font-family: arial, times new roman;
  55.      font-face: arial, times new roman;
  56.      color: #ff0000;
  57.      text-decoration: none    
  58. }
  59. .green
  60. {
  61.        font-family: arial, times new roman;
  62.       font-face: arial, times new roman;
  63.        color: #008000;
  64.        text-decoration: none    
  65. }
  66. .blue
  67. {
  68.        font-family: arial, times new roman;
  69.        font-face: arial, times new roman;
  70.        color: #000080;
  71.        text-decoration: none    
  72. }
  73. .white
  74. {
  75.      font-family: arial, times new roman;
  76.      font-face: arial, times new roman;
  77.      color: #FFFFFF;
  78.      text-decoration: none    
  79. }


HTML page
Code: [ Select ]
<html>
<head>
<title>Ben's New Site</title>
<LINK rel="stylesheet" href="StyleSheet/CSS.CSS" type="text/css">
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<table border="0" cellPadding="5" cellSpacing="0" width="100%">
    <tr>
        <td class=text>
            <a href="">lets see what this look like</a>
        </td>
    </tr>
    <tr>
        <td align=right class=text>
            <br>
                <a href="#top">Return to Top</a>&nbsp;&nbsp;
            <br><br>
        </td>
    </tr>
</table>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Ben's New Site</title>
  4. <LINK rel="stylesheet" href="StyleSheet/CSS.CSS" type="text/css">
  5. </head>
  6. <body bgcolor="#ffffff" topmargin="0" leftmargin="0">
  7. <table border="0" cellPadding="5" cellSpacing="0" width="100%">
  8.     <tr>
  9.         <td class=text>
  10.             <a href="">lets see what this look like</a>
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.         <td align=right class=text>
  15.             <br>
  16.                 <a href="#top">Return to Top</a>&nbsp;&nbsp;
  17.             <br><br>
  18.         </td>
  19.     </tr>
  20. </table>
  21. </body>
  22. </html>
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • kurdt_gothic
  • Born
  • Born
  • No Avatar
  • Joined: May 05, 2004
  • Posts: 4
  • Loc: Brazil
  • Status: Offline

Post May 24th, 2004, 6:45 am

it´s working as well.

The problem is that your background color is the same of text color
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:46 am

Feeling really dumb here.
I figured it out. There was nothing wrong w/ the "entire CSS". There was just something wrong w/ the [a href] portion of it. I had both things I was testing in [a href], and well that's why nothing from my css was appearing b/c the [a] part is somehow broken. I put the "let's see what this looks like" in a text class and it showed up fine.

Now I just gotta figure out what's wrong w/ my [a] in the CSS.

Thanks RTM for you help.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:48 am

Told you it was something stupid :roll:
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • kurdt_gothic
  • Born
  • Born
  • No Avatar
  • Joined: May 05, 2004
  • Posts: 4
  • Loc: Brazil
  • Status: Offline

Post May 24th, 2004, 6:49 am

It´s normal. Happens every time
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 24th, 2004, 6:50 am

as kurdt_gothic just said, you have white text on a white background, which can be difficult to see sometimes.

There is nothing wrong with the css, apart frmo the font-face, which I think doesn't exist :)
CSS website design tutorials
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post May 24th, 2004, 6:59 am

BTW:

Thanks RTM! Dude you rock! About half of the posts I check out your throwing in some help in some form or other! Anyways...thanks!
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 24th, 2004, 7:01 am

they have me do some <i>really</i> menial tasks at work at the moment - just cpoying out about 50 A4 sheets of hand-written tabulated crap. I can't concentrate on my work and they give me broadband :roll:
CSS website design tutorials

Page 1 of 1

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 138 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.