• 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

    • Politically funny images of the World

      By +primortal · Posted

    • Politically funny images of the World

      By +primortal · Posted

    • Dragon's Dogma 2: Dark Arisen expansion to bring snowy region, new updates also coming

      By LoneWolfSL · Posted

      Dragon's Dogma 2: Dark Arisen expansion to bring snowy region, new updates also coming by Pulasthi Ariyasinghe Capcom had a surprise waiting for Dragon's Dogma fans today in the Nintendo Direct presentation. The company revealed an expansion for the second installment with a name that should be familiar to series veterans. Coming later this year, Dragon's Dogma 2: Dark Arisen is promising a massive new region to explore, new monsters, fresh skills to learn, and more. The studio says players will be heading to the Northern region of the world, named Norgan, to find new secrets about an undying "Fallen Dragon." There will be forgotten relics that the protagonist can find to unlock fresh weapons and skills the expansion is introducing. Players will also be able to find mysterious equipment from a previous Arisen as a part of the expansion, all part of 12 Lost Rites Dungeon Challenges they must complete to gain access. In Neowin's own review, I found Dragon's Dogma 2 to be an impressive RPG when it launched back in 2024, giving the title an 8.5/10 for its class variants, companion system, and immersive exploration. "Once a prosperous region of the kingdom of Vermund, it was abandoned many years ago for reasons unknown," says Capcom about the new region. "Long has it been since any soul traveled its paths. Blanketed in heavy snow, these frigid lands are home to savage hordes and creatures of unbelievable power. Those who are capable of vanquishing such fearsome foes, or those who possess a keen eye for exploration, will find themselves rewarded with powerful relics." Dragon’s Dogma 2: Dark Arisen expansion launches on October 9, 2026, with a $29.99 price tag. Ahead of the expansion release, Capcom is also planning to release two free updates to the base game. The first will land tomorrow, June 10, bringing more accessible fast travel with an Eternal Ferrystone and other quality-of-life adjustments. The second update will land sometime in August, aiming to improve frame rates, add more save slots, and bring even more community-requested adjustments. This expanded Dark Arisen edition is also launching on the Nintendo Switch 2 on the same day the content comes to PC, Xbox Series X|S, and PlayStation 5.
    • Classic Outlook vs New Outlook — Which one do you prefer and why?

      By _neutrino · Posted

      Classic themes are just the colors on the bar like the olden days, if you use the image themes, it does fancy transparent backgrounds and it makes the elements of the app look like they are transparent bubbles. This sample image shows what it looks like.  
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By richstad · Posted

      Good point, unfortunately. NextDNS has far more filters and workarounds than uBlock, and it's easy to implement.

  • Recent Achievements

    • Week One Done
      rubentuben8 earned a badge
      Week One Done
    • Week One Done
      ARaclen earned a badge
      Week One Done
    • One Year In
      jojodbn earned a badge
      One Year In
    • One Month Later
      jojodbn earned a badge
      One Month Later
    • Week One Done
      jojodbn earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      525
    2. 2
      PsYcHoKiLLa
      231
    3. 3
      +Edouard
      124
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!