• 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

    • Microsoft hides these secret Windows 11 performance boost settings available on every PC

      By ExPat · Posted

      Looking forward to the test results.
    • Audacious 4.6.1

      By Copernic · Posted

      Audacious 4.6.1 by Razvan Serea Audacious is a lightweight, open-source audio player that emphasizes simplicity, performance, and sound quality. Designed for Linux, Windows, and macOS, it supports a wide range of audio formats, internet radio streaming, and playlist management. Users can customize the interface with Winamp-style skins or modern themes, making it flexible for different preferences. Audacious also includes an equalizer, advanced audio effects, and a plugin system for extending functionality. Its low resource usage makes it especially suitable for older computers or users who value efficiency without sacrificing playback quality. Audacious key features: High audio quality – delivers clean, gapless playback with minimal distortion. Wide format support – plays MP3, FLAC, Ogg Vorbis, AAC, WAV, WMA, and more. Internet radio streaming – supports Shoutcast, Icecast, and other online streams. Winamp skin support – classic, nostalgic look for users who prefer the old-school style. Modern GTK-based interface – clean, simple UI with a more modern feel. Customizable themes – change appearance through skins and themes. Advanced playlist management – organize, save, and edit playlists with ease. Equalizer – fine-tune audio output with a built-in graphical equalizer. Audio effects – built-in DSP options like crossfade, replay gain, and more. Plugin system – extend functionality with additional components. File metadata support – displays and organizes music based on tags. Drag-and-drop support – quickly add songs or playlists. Global hotkey support – control playback without switching windows. Bit-perfect output modes – bypass system mixers for pure audio output. ReplayGain support – normalizes track loudness automatically. Cue sheet support – play entire albums from a single audio file with .cue. MPRIS2 integration – integrates with Linux desktop environments for media controls. Advanced resampling options – adjust playback quality with different resampler settings. Gapless playback – seamless transition between tracks encoded properly. Crossfade plugin – blend one song into the next smoothly. Last.fm scrobbling plugin – track listening history online. Remote control support – control Audacious via command-line or scripts. Lyrics plugin – display song lyrics if available. Alarm / timer plugin – start or stop playback at set times. SOX resampler plugin – high-quality resampling for audiophiles. Spectrum analyzer / visualization plugins – visual feedback while playing music. Headphone crossfeed effect – simulates speaker listening for headphones. Customizable buffer size – tweak latency and playback smoothness. Audacious 4.6.1 changelog: Use XDG cache dir to store temporary files (#1817) Accept embedded lyrics in more cases (#1818) Bump .so and plugin ABI versions retrospectively (#1819) Include Georgian translation (#1820) Fix build on systems using musl instead of glibc (#1823) Download: Audacious 4.6.1 | 48.2 MB (Open Source) Download: Portable Audacious 4.6.1 | 69.8 MB View: Audacious Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Politically funny images of the World

      By +DoctorD · Posted

    • Can't access the forum on mobile

      By Steven P. · Posted

      I really wonder if this has to do with the built in VPN or "private DNS" of browsers that trip up legal requirements like cookie consent and Cloudflare (to avoid all the botnet attacks we get). And BTW some botnets still manage to get past Cloudflare, we are constantly having to tweak it to block malicious traffic that ultimately cause a DDoS.
    • Microsoft hides these secret Windows 11 performance boost settings available on every PC

      By Eyevou · Posted

      CPPC states can also be messed around with in most UEFI settings but aren't as robust as the ones that the Windows Scheduler can provide! Make sure you look into what your motherboard also has before customizing for the Windows Scheduler.

  • Recent Achievements

    • Week One Done
      rolfus earned a badge
      Week One Done
    • One Month Later
      Leroy Jethro Gibbs earned a badge
      One Month Later
    • Conversation Starter
      flexorcist earned a badge
      Conversation Starter
    • One Month Later
      AndreaB earned a badge
      One Month Later
    • One Month Later
      agatameier earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      518
    2. 2
      +Edouard
      199
    3. 3
      PsYcHoKiLLa
      147
    4. 4
      ATLien_0
      93
    5. 5
      Steven P.
      78
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!