• 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

    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By +TRS-80 · Posted

      I gave up on browser ad-blocking extensions a few years ago, replaced them with Adguard. Not perfect but overhaul is a nice app that does the job on both Windows and Android with the respective versions.
    • Glary Utilities 6.43.0.47

      By Copernic · Posted

      Glary Utilities 6.43.0.47 by Razvan Serea Glary Utilities offers numerous powerful and easy-to-use system tools and utilities to fix, speed up, maintain and protect your PC. Glary Utilities allow you to clean common system junk files, as well as invalid registry entries and Internet traces. You can manage and delete browser add-ons, analyze disk space usage and find duplicate files. You can also view and manage installed shell extensions, encrypt your files from unauthorized access and use, split large files into smaller manageable files and then rejoin them. Furthermore, Glary Utilities includes the options to find, fix, or remove broken Windows shortcuts, manage the programs that start at Windows startup and uninstall software. All Glary Utilities tools can be accessed through an eye-pleasing and totally simplistic interface. Glary Utilities 6.43.0.47 changelog: Optimized Memory Defrager: Optimized the clipboard cleaning algorithm, increasing speed by 5%. Optimized Wipe Free Space: Optimized the free space wiping algorithm, increasing speed by 8%. Minor GUI improvements. Minor bug fixes. Download: Glary Utilities 6.43.0.47 | 27.0 MB (Freeware) Download: Portable Glary Utilities | 32.3 MB View: Glary Utilities Homepage | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By +Edouard · Posted

      "Of course the easiest solution is to switch to uBlock Origin Lite if you want to remain on Chrome, as it is MV3-based, but from our experience, uBO Lite does not seem to be as good as the original non-Lite version" In my experience uBlock Origin Lite does the job for normal everday home users. When they kill that we get to watch Firefox and Brave get a boost in user market share.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By TheGhostPhantom · Posted

      Block by DNS ad blocker! I dare you! I will even layer unlock Origin, on top of my internal DNS, if I need to and I don’t even block ads today (I really should but this type of behavior makes me angry). I suppose I could also just be lazy, and add the flags myself, back to each release (it wouldn’t be that difficult).
    • UK nudity blockers are a looming privacy disaster, we must be able to see the source code

      By ExecutiveFunction404 · Posted

      Wonder what MPs have ties to these privacy/verification/data harvesting companies that are going to step in this time. Last time under the Tories half the cabinet had fingers in the pies, heck even the PM and his wife at the time was working for silicon valley, probably made a fortune.

  • Recent Achievements

    • Week One Done
      skylerssviv earned a badge
      Week One Done
    • One Month Later
      mobmobiles earned a badge
      One Month Later
    • Very Popular
      Captain_Eric earned a badge
      Very Popular
    • One Month Later
      amusc earned a badge
      One Month Later
    • One Month Later
      DJC50PLUS earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      500
    2. 2
      PsYcHoKiLLa
      219
    3. 3
      ATLien_0
      92
    4. 4
      +Edouard
      91
    5. 5
      Steven P.
      82
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!