I'm relatively new to this but as far as I can tell from my research, this should be working. I'm trying to link a css stylesheet to an .erb file. Here is the code I'm using:
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
I've also tried
href="./css/stylesheet.css"
and
href="css/stylesheet.css"
for reference my erb file and css file both sit in different subdirectorys of the same main directory. Here is the code contained within my stylesheet, just in case this is the problem:
body {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
background-color:powderblue;
}
h1 {
font-family: verdana;
}
h2 {
font-family: sans-serif;
}
With a server.rb like
require 'sinatra'
set :public_folder, __dir__ + '/static'
get '/' do
erb :index
end
A views/index.erb like
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
Hi!
And your stylesheet in static/css/stylesheet.css it should work, the important bit you may be missing is setting the public folder.
Related
I am trying to use an external CSS file to style my web page, here's a snippet:
body {
background-color: rebeccapurple;
color:yellow;
font-size:125%;
border: 3px yellow;
}
.menu {
height: 800px;
float:right;
}
...
Here is how I call the CSS file in my head tag:
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='style.css') }}">
The weird thing is that everything else in my style.css works fine and displays as I want. It's just the body tag that doesn't show correctly. I am really lost.
There is no other HTML files, nor other CSS files. I encountered this problem really early on in my process which is all the more confusing.
I'd like to be be able to link to the rule for the class "button" in multiple sheets and have it defined in one sheet such that I only need to edit it once to edit all my buttons.
Example:
mystyle.css reads:
.button{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
height: 45px;
width: 140px;
background-color: #9999ff;
text-align: center;
padding-top: 6px;
border-radius: 25px;
}
I want when I create a new page to be able to say something like
.button {
url:("../mystyle.css/.button")
}
This one was down to me not understanding how HTML loads styles.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../mystyle.css">
<link rel="stylesheet" type="text/css" href="./newpage.css">
</head>
Will load all the CSS for the buttons and then if both files define the same element, style according to newpage.css
You can achieve this with the #import at-rule:
#import "buttons.css";
or by using a CSS processor such as SASS to combine the files at build time.
You could also import multiple CSS files into a single HTML document by using multiple <link> elements.
Try to include your base css in your child css sheet like;
#import url("base.css");
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Head section
<head>
<meta charset="utf-8">
<title>Kaffehaus Mannfredo | Home</title>
<link rel="shortcut icon" href="../1_pics/favicon.ico" />
<link rel="stylehseet" type="text/css" href="../2_css/general.css">
<link rel="stylesheet" type="text/css" href="../2_css/nav.css">
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
First CSS
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
font-family: 'Open Sans', sans-serif;
margin:0px;
float: none;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 15px 17px;
text-decoration: none;}
li a.active {
background-color: #4CAF50;}
li a:hover:not(.active) {
background-color: #555;
color: white;}
.navbar-nav {
width: 100%;
text-align: center; }
Second CSS
body {background-color: black;}
I am trying to add 2 CSS files in 1 html. The second one is not working.
In the first one I format my navbar, in the second I want to make a basic layout for the whole page, any tips?
This line is invalid
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
Remove the semi colon
<link href='fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Semi colons are used for property value pairs not for use randomly inside of a <link> tag.
Please provide your code.
If I understand correctly one CSS is working and the other is not so probably there is an error in your syntax.
Check that you have the correct path for the CSS files and the correct names. If you copied and pasted it be sure that you changed the name of the second.
Bellow is an example of two different CSS files named 1 and 2 that are inside a folder named css.
<link rel="stylesheet" type="text/css" href = "css/1.css" />
<link rel="stylesheet" type="text/css" href = "css/2.css" />
If your files are not in a folder just remove the "css/" part.
Are you sure all of your files are loading?
Press F12 and check the console,
It will give
uncaught error failed to load
or something similar
You can add as many css as you want.
Either from external files with :
<link rel="stylesheet" type="text/css" href="PATH_TO_YOUR_FILE">
Or inside your html file with :
<style>
/* ...Some css...*/
</style>
If there are conflicts between the two css (styling the same element), you need to add specificity because the second one is overriding the first one.
For example :
/* first css file */
h1{
color:blue;
}
/* second css file */
h1{
color:red;
}
In this case, h1 will be red everywhere.
So In the first css file you have to be more specific by adding a class, or id to the selector :
/* first css file */
.navbar h1{
color:blue;
}
Take a look at CSS Specificity
So I'm kind of a programming noob, but I thought I had CSS referencing down...apparently not. I've referenced stylesheets, I've done it externally, internally, you know, the works. For some reason, however, when I went back to tweak an older app I had worked on that had the CSS initially included within the HTML and moved the CSS out, then referenced it, the CSS oddly stopped working altogether. I've got the directory set up as follows:
App name (folder)
static (folder)
main.css
templates (folder)
template_referencing_css.html
main.py
app.yaml
So here are the various references I've tried with main.css being inside the static folder:
<link type="text/css" rel="stylesheet" href="../static/main.css" />
<link type="text/css" rel="stylesheet" href="/static/main.css" />
Here is what I tried when I moved main.css to templates folder with the template referencing it:
<link type="text/css" rel="stylesheet" href="main.css" />
The css file is just a longer version of things like:
body {
font-family:sans-serif;
width: 850px;
background-color: #F0F8FF;
color: #008B8B;
margin: 0 auto;
padding: 10px;
}
.error {
color: red;
}
label {
display: block;
font-size: 20px;
}
remove the leading slash -
<link type="text/css" rel="stylesheet" href="static/main.css" />
In general this isn't necessarily a good idea, but try to use the full absolute path (like "C:/Whatever/another_dir/main.css"). At least this will tell you if the problem is finding the css file or not.