• 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

    • Why it's almost impossible to produce a smartphone in the United States

      By Asgardi · Posted

      Ridiculous claim that the labor cost difference of $6000 annually would increase cost per phone by $200. The employees produce 3 phones per month or what?
    • Sparkle 2.20.1

      By Copernic · Posted

      Sparkle 2.20.1 by Razvan Serea Sparkle is a free, open-source Windows optimization tool designed to make your PC faster, cleaner, and more private. With Sparkle, you can easily debloat Windows by removing unnecessary apps and services, disable Microsoft tracking to enhance privacy, and apply performance tweaks to boost speed. Its cleaner removes junk and temporary files, while every change is safe and fully reversible. Sparkle also features a modern, user-friendly interface with automatic updates, making system maintenance simple. Explore over 39 tweaks, from disabling telemetry and hibernation to optimizing network and game settings, all aimed at customizing and enhancing your Windows experience. Sparkle supports Windows 10 and 11. Sparkle 2.20.1 changelog: You can now change the Animation Direction from Up, Left, or Off. Added configurable animation direction (Up, Left, Off) for improved accessibility Added TTL caching to the system info backend Refactored tweak application flow to await NvidiaProfileInspector Improved IPC listener cleanup to correctly remove specific listeners Fixed online status not updating after successful network requests Updated system info tests to support backend caching Removed electron-toolkit utils dependency in favor of internal is.dev helper Fixed unwanted files and folders being included in application bundles Download: Sparkle 2.20.1 | Portable | ~100.0 MB (Open Source) Links: Sparkle Website | Github | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • The best controller for XBOX and PC is down to the lowest price

      By Figure 8 Dash · Posted

      Never used the G7 Pro, but I've never had a good experience with that style of d-pad and fighting games.
    • Sihoo Doro C300 Pro V2 Ergonomic Office Chair review: The Ikea of chairs

      By Figure 8 Dash · Posted

      And I just bought a seat cushion for my mesh chair. The chair feels nice but the first time I sat in it with boxers, I realized I don't like the feel of mesh on my legs. 😂
    • This Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time

      By jordanspringer · Posted

      "This Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time" ... Lol.

  • Recent Achievements

    • Dedicated
      Asgardi earned a badge
      Dedicated
    • Conversation Starter
      jessse3334 earned a badge
      Conversation Starter
    • Reacting Well
      JuvenileDelinquent earned a badge
      Reacting Well
    • One Month Later
      Excellence2025 earned a badge
      One Month Later
    • Week One Done
      Excellence2025 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      499
    2. 2
      +Edouard
      247
    3. 3
      PsYcHoKiLLa
      153
    4. 4
      Steven P.
      84
    5. 5
      macoman
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!