I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>
Related
I'm following the tutorial on the w3school for HTML and I'm stuck at the external linking part where you can include in your HTML page the CSS file you with the stylesheet defined by you with the <link> tag.
I have tried:
adding in the correct way the arguments rel, href, type, or media
clearing the cache from the browser, maybe it saved some old code but it was not the case
creating another .css file to try and code different style solutions
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<style>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</style>
</head>
<body>
...
</body>
</html>
whiteonblack.css
body {
background-color: black;
color: white;
}
The body background should be completely black (I hate bright websites, even if this is for testing and with awful and old yet working (but not so much) HTML) and the general text to be white. Also some love from the community for DIY students :).
It defaults to the reverse, white bg and black text. God the hate.
The link tag belongs in the head tag directly. Do not nest it in a style tag; that's meant for actual CSS.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
Remove the style tag. Use below CSS code.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I am creating mvc4 application. I want to set background in layout.cshtml. Issue is that my background image is repeating even after setting a tag of background-repeat:no-repeat. I Google it a lot and tried different approaches told there. But none of them helped me out. Any help in this regard? My background image is paced in the Images folder created in my app. Here is the simple code of my layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
You error is in the line:
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
in which you're using too many ".
You need to use semi-colons instead to differentiate between one style and the next. So instead, make it:
<body style="background-image:url(Images/blue.jpg); background-repeat:no-repeat">
for it to work.
Side Note
Styling inline is generally avoided, as it leads to multiple problems from a css point of view. Try setting this inside your css file instead.
Your css would then include:
body{
background:url(Images/blue.jpg);
background-repeat: no-repeat;
background-size:100%; /*if you wanted to 'fill' the page to max size without cropping*/
}
DEMO
To completely 'fill' the page, you need to add a size to your html as well,
DEMO
Give inline style as follows:
<body style="background-image:url(Images/blue.jpg);background-repeat:no-repeat;">
The problem is to, you need to put the single quotations between inside the url also you missed one forward slash as well.
<body style="background-image:url('/Images/blue.jpg'); background-repeat:no-repeat;">