CSS Not Loading

February 6, 2012

Hi guys, I'm starting a Ruby on Rails web app for my class but I can't get my CSS to work.

Here is my HTML:


<!DOCTYPE html>
<html>
  <head>
	<title>Welcome</title>
	<meta charset='utf-8'>
	<link href='~/css/styles.css' rel='stylesheet'>
	<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
  </head>
  <body>
	<div id='wrapper'>
	  <div id='header'>
		<h1>Welcome</h1>
	  </div>
	  <div id='content'>
		<h2>The new magic number is 80</h2>
	  </div>
	  <div id='footer'>
		<h4>Daniel </h4>
	  </div>
	</div>
  </body>
</html>
[/CODE]

And here is my CSS:

[CODE]
wrapper, header, content, footer {
display: block;
}
#wrapper{
width:66%;
margin:auto;
}

#header{
background-color:#FFCA00;
font-family: 'Arvo', serif;
font-weight: 700;
font-size: 22px;
color: #A68300;
border-bottom:solid 1px #FFE273;
}
#content{
background-color: #FFD740;
font-size: 16px;
font-family: 'Arvo', serif;
font-weight: 400;
color: #A68300;
margin:12px 0;
float:left;
}

#footer{
background-color:#FFCA00;
font-size: 12px;
font-family: 'Arvo', serif;
font-weight: 400;
color: white;
border-top:solid 1px #FFE273;
}

[/CODE]

What is wrong with it? I have validated both files and they seem to be OK.

Thank you!

February 6, 2012

Get rid of the ~/ in the <link href='~/css/styles.css' rel='stylesheet'> and see if it works.

February 6, 2012

what does ~/ do?

February 6, 2012

I did and it is not working, should I add something to my Gemfile to get CSS to work? It's very strange because I rendered my code in a website and it did render fine, but when I run it on my local server it only shows the HTML and no CSS.

February 6, 2012

Get rid of the ~/ as people have said. Which version of Rails are you using, what environment are you running in, and where are your CSS files located?

Rails 3.1 introduced a new asset pipeline, your assets generally go in /app/assets rather than /public/assets. Also, use stylesheet_link_tag so you can utilize the asset pipeline (it will locate the asset for you and minify/compress it if in production mode).

February 6, 2012

try that format

February 6, 2012

Try this format. It always works and make sure it's in the head tag.


<link rel="stylesheet" href="url" type="text/css" media="screen"/>
[/CODE]

February 7, 2012

Try this format. It always works and make sure it's in the head tag.
<link rel="stylesheet" href="url" type="text/css" media="screen"/>
[/CODE]
There's no need to include 'media' unless it's for a specific device.

February 8, 2012

Load up the page in firefox -> Right click on the page, select view source -> click on the css link. You should see the css styles, if not there is a problem with the link.

February 8, 2012

There's no need to include 'media' unless it's for a specific device.

No need to include the "type" attribute either, it's always CSS.

February 8, 2012

No need to include the "type" attribute either, it's always CSS.

Fair enough! My links have never worked when I have not included the "type" attribute - strange.

May 20, 2012

Just a note since I stumbled across this while searching for something else.

All of the answers in this thread are correct for HTML. However with RoR you are better off using the stylesheet link tag.

<%= stylesheet_link_tag :all %> will link all stylesheets in public/stylesheets.

or,

<%= stylesheet_link_tag "style" %>

This will generate <link href="/stylesheets/style.css?1337517391" media="screen" rel="stylesheet" type="text/css" />

notice the ?1337517391? The main benefit of using the link tags are the provided cache busting techniques. This is simply the timestamp of the file. If you modify your CSS file it will update the timestamp thus forcing any browsers caching CSS to update.

There are link tags for images and javascript files as well which provide the same benefits.

Sign In

CSS Not Loading

Question

.Dan

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

myNando

Link to comment

Share on other sites

primexx

Link to comment

Share on other sites

.Dan

Link to comment

Share on other sites

ZakO

Link to comment

Share on other sites

MattehCarter

Link to comment

Share on other sites

ACTIONpack

Link to comment

Share on other sites

MattehCarter

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

MattehCarter

Link to comment

Share on other sites

Sophism

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend