• 0

CSS Not Loading

Asked by .Dan,

 Share

Question

Experienced

.Dan

Posted
Posted

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!

Link to comment
https://www.neowin.net/forum/topic/1056240-css-not-loading/
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Veteran

ZakO

Posted
Posted

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).

  • 0
Grand Master

Sophism

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Windows 11's big performance boost is finally available for all

      By ikjadoon · Posted

      Why should simply opening the Action Center ... require any significant amount of CPU cycles? Too many are ignoring the elephant in the room: today's CPUs may have similar clock frequencies to CPUs from a decade ago (~4 to 5 GHz), but they run with far higher performance per clock, even on the smallest E-cores. The Action Center is a static, minor desktop element. It ought to open instantly on any CPU made in the past 2.5 decades at even low clocks. Opening a program? Boost away. Unzipping a file? Boost to your heart's content. Right-clicking the notification area? This should be an ultra-efficient, low-impact event that opens instantly. Compare today's UI elements to Windows 7 UI elements. Today's UI elements hardly do anything more substantial or important or critical, yet now require modern-day processors to jump half a GHz to reduce their latency.
    • Windows 11's big performance boost is finally available for all

      By ikjadoon · Posted

      This is not an option lmao: it is part of the KB5094126 update, pushed to all users. There is no GUI to configure it. Reading the article should be required for commenting.
    • Phone Dilemma

      By Mindovermaster · Posted

      Can you recommend me a good Pixel 7 on eBay? Because some are saying Gen 1, and I don't think that's what I want, right?
    • Windows 11's big performance boost is finally available for all

      By sphbecker · Posted

      Close, but it is for any application starting, not just during boot time. In fact, it probably will not improve boot time at all because during a boot, the CPU is already boosting, so a pre-boost wouldn't change anything. I agree that it isn't exciting (especially considering every other OS already does it), but it is a good thing, even if they are just playing catch up.
    • Windows 11's big performance boost is finally available for all

      By cyberhash · Posted

      Any so called performance increase will be in milliseconds, which nobody will actually notice in real world usage.

  • Recent Achievements

    • One Year In
      slackerzz earned a badge
      One Year In
    • One Year In
      highriskpaym earned a badge
      One Year In
    • One Month Later
      highriskpaym earned a badge
      One Month Later
    • Week One Done
      highriskpaym earned a badge
      Week One Done
    • Week One Done
      FBSPL earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      501
    2. 2
      PsYcHoKiLLa
      198
    3. 3
      +Edouard
      156
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      71
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!