Linking my CSS

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

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,
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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:
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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?
  • kurdt_gothic
  • Born
  • Born
  • kurdt_gothic
  • Posts: 4
  • Loc: Brazil

Post 3+ Months Ago

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

the css code and file name, and html code?
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

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


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>
  • kurdt_gothic
  • Born
  • Born
  • kurdt_gothic
  • Posts: 4
  • Loc: Brazil

Post 3+ Months Ago

it´s working as well.

The problem is that your background color is the same of text color
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

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.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

Told you it was something stupid :roll:
  • kurdt_gothic
  • Born
  • Born
  • kurdt_gothic
  • Posts: 4
  • Loc: Brazil

Post 3+ Months Ago

It´s normal. Happens every time
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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 :)
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

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!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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:

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 117 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.