• 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

    • Playground Games confirms Forza Horizon 6 save wipe bug

      By tsupersonic · Posted

      Can we bring back manual save?
    • The official Funny Pictures thread

      By Steffan · Posted

    • Politically funny images of the World

      By +primortal · Posted

    • Playground Games confirms Forza Horizon 6 save wipe bug

      By RejZoR · Posted

      Wow, imagine you dump hundreds of hours into completing things and unlocking stuff and you lose it all. Back in the day when cheats were built into games, you could at least unlock things again that way without spending hundreds of hours again. But those days are long gone for some reason as no one builds cheats into games anymore. So it's even more painful that studio that's on its 6th installment **** it up so badly.
    • Spotify finally removes the disco ball app icon in the latest update

      By Ivan Jenic · Posted

      Spotify finally removes the disco ball app icon in the latest update by Ivan Jenic Image: Spotify Spotify has just released an update that removes its now infamous disco ball icon. The update reverts the app icon to the familiar flat green logo after weeks of mixed reactions online. The icon arrived on May 13 as part of the company's 20th anniversary celebration and was always intended to be temporary, though Spotify only confirmed that after the backlash started. The disco ball took the internet by storm, as the reception was split. A vocal group of users called it ugly and disorienting, with some iOS users noting that the 3D glowing effect made the app look like it was stuck mid-update. On the other end, the icon picked up a following of its own. Its retro, three-dimensional look immediately stood out against the flat, minimalist aesthetic that has dominated app design for years. It even started a small movement, spawning what people started calling "discomorphism," a mashup of disco and skeuomorphism. Other brands started posting disco ball versions of their own logos, probably in an effort to ride the wave of memes that flooded the internet during late May. Spotify has had a turbulent relationship with its user base lately. Besides the disco ball icon, which certainly wasn't appreciated by everyone, the company has also received backlash for its willingness to include AI-generated music on its platform. On May 17, Spotify promised the old icon would return “in a few weeks.” And now it looks like that time has finally arrived. So, whether you liked the disco ball or it made you uncomfortable, it’s now gone for good. The next time you update the Spotify app on your phone, the old, flat-design icon will return.

  • 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
      519
    2. 2
      PsYcHoKiLLa
      197
    3. 3
      +Edouard
      157
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      75
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!