• 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's new hand-wave reCAPTCHA can be bypassed with a stock photo

      By excalpius · Posted

      I'm not unblocking my camera for this crapola. Sorry, Google.
    • Microsoft Edge gets tons of security features, including AI model that can see your screen

      By ShahinD · Posted

      It seems these features are for Business Profiles
    • Microsoft Edge gets tons of security features, including AI model that can see your screen

      By Snake Doc · Posted

      Ummmm that is what is it supposed to do. Just turn if off in settings if you do not want it analyzing your open tabs. Chrome does the same thing with Gemini. Sarfari will do the samething after Apple's AI and even more so with the release of their 27 versions that is now powered by Googles LLM/ML models. Understanding why it is doing it and how it can help you vs jumping to some conspiracy theroy is a much better approach. As long as it can be turned off, all is good. Yes the default should be off but the a lot of people would never discover these features.
    • Microsoft Edge gets tons of security features, including AI model that can see your screen

      By WaltC · Posted

      Just another reason (aside from many others) not to use Edge. Firefox 153.0b5 DEx64 has a similar feature added recently in prior builds that I will turn off at some point when I get around to it. It's the new "Something looks suspicious" page that pops up here and there. It cleverly hides itself between web pages that I've actually visited; as a result, you know, of selecting a web page and telling the browser where to go. The interesting thing is that it does not produce these warnings from pages that I, as the only intelligent user of the browser in my system, have ever directed the browser to open! What seems to be happening is that the browser looks at all the goofy ad links on a web page I do actually open and selects one that "looks suspicious" and then creates the "something looks suspicious" web page, which is neatly inserted, as mentioned, between web pages my RB ("real brain") has directed the browser to load in a session. The thing is, I usually look at links I am considering to follow before I ask the browser to load them, and in cases I have noticed where the link does indeed look suspicious, most of the time I will choose to not follow the link at all. Doesn't everyone do this or something similar? I am picky about what I voluntarily load... (I don't like links that start off fine, with a site designaiton that seems normal enough but then is followed by indecipherable alphanumeric strings many, many lines long, etc. I tend to reject those because they look suspicious. They may not be, but I don't care... I'll stay with Firefox, of course, if for no other reason than they usually let you turn off the junk you don't like. And because it isn't Edge... But at some point Microsoft will come to realize that putting your bookmarks on the left side is a Good Thing for a lot of people, just as Microsoft discovered when it had the bright idea of nailing the Windows taskbar to the bottom of the screen, when for decades Microsoft browsers had left that placement up to the user. They have finally reversed the obscenity of that decision. Finally.
    • Google's new hand-wave reCAPTCHA can be bypassed with a stock photo

      By Ccl Ncc · Posted

      Google was using the old CATPCHAs data to train their LLMs. What is the say they won't use this camera data of users to train their LLM? these companies need some strict regulations!

  • Recent Achievements

    • One Year In
      BA the Curmudgeon earned a badge
      One Year In
    • Conversation Starter
      rosiecharles earned a badge
      Conversation Starter
    • First Post
      KMilenkoski1202 earned a badge
      First Post
    • First Post
      carols23 earned a badge
      First Post
    • One Month Later
      Tom Willson earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      513
    2. 2
      +Edouard
      258
    3. 3
      PsYcHoKiLLa
      151
    4. 4
      Steven P.
      94
    5. 5
      macoman
      66
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!