Hey guys I already know that this is easy but I have tried everything I can think of and cant figure it out. I cannot get my style sheet to work on my html both are saved in the folder website1. inside that there are 2 folders css and index with the files saved in the respective folder. not mind either of my coding these are not my website just a very small example I am sending to find help.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
`<div class="row">
<div class="col-xs-6">
<button class="btn btn-default btn-xl">About</button>
<button class="btn btn-default btn-xl">Portfolio</button>
<button class="btn btn-default btn-xl">Contact</button></button>
</a>
</div>
</div>
</div>
</body>
</html>
My css page looks like this
body{
color: blue;
}
button{
color: aliceblue;
}
If your html file is in the index subfolder, and css is in the css subfolder, then you should reference it like:
<link rel="stylesheet" type="text/css" href="../css/style.css">
Hope this helps :)
Related
404 error that the css file not found
Searched YouTube and can't find a solution.
<!DOCTYPE html>
<html>
<head>
<title>itays website </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="buttons">
<button type="button" , class="home">Home</button>
<button type="button" , class="contact">Contact</button>
<button type="button" , class="services">Services</button>
<button type="button" , class="about">About</button>
</div>
</body>
</html>
Check that where did you creat your css file is it any folder
Check the file name properly
Make sure that the css file and html file are in same folder
No idea why I can't seem to be able to import a styles.css file into a standard HTML page.
The code compiles, but my page doesn't receive any changes whatsoever from the css file.
src/main/resources/templates/page.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="card text-center">
<div class="card-header">
<h4 class="new-header">New header</h4>
<a class="btn btn-primary new-button">New button</a>
</div>
</div>
</body>
src/main/resources/static/css/styles.css
.new-button{
float:right;
}
.new-header{
float: left;
}
I've tried switching the href directory link to several others, such as :
/css/styles.css (the one used by a similar project);
/static/css/styles.css (the IDE considers this to be the best one)
You are looking in the wrong directory. Change the href to
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>
the double dot at the start are necessary:
../static/css/styles.css
This question already has an answer here:
html links not working (using base href)
(1 answer)
Closed 2 years ago.
I'm trying to link to a CSS file in my HTML index file. It's just one line of code and apparently whatever I try it doesn't work. I'm using VSCode.
If I type the link from beginning it also auto-completes (or it shows it anyway). So it knows it's there.
I've also tried moving the CSS file out of the folder and next to the HTML file. But that doesn't work either.
I tried the style brackets in the HTML file itsself and the coloring there works.
So my way of testing is that nothing is showing up blue.
I also removed my Javascript from the HTML file into a seperate file linking to it for readability for this question, and that does work
Does anybody else have any idea's?
I also saw the other topics for this same question but it shows nothing new to try out.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<link rel=”stylesheet” type="text/css" href="styles/style.css">
</head>
<body>
<a id="stringCalculation"></a><br>
<a id="stringResult"></a>
<br>
<div id="container-numbers">
<button id="one" class="number">1</button>
<button id="two" class="number">2</button>
<button id="three" class="number">3</button>
<button id="four" class="number">4</button>
<button id="five" class="number">5</button>
<button id="six" class="number">6</button>
<button id="seven" class="number">7</button>
<button id="eight" class="number">8</button>
<button id="nine" class="number">9</button>
<button id="zero" class="number">0</button>
</div>
<div id="operators">
<button id="symbolPlus" class="operator">+</button>
<button id="symbolMinus" class="operator">-</button>
<button id="symbolTimes" class="operator">*</button>
<button id="symbolDivid" class="operator">/</button>
<button id="equals">=</button>
</div>
<div id="other">
<button id="clearButton">Clear</button><br>
<button id="backspace">Backsp</button>
<button id="decimal">.</button>
</div>
<script src="javascript/myscript.js"></script>
</body>
</html>
And the CSS file:
#one {
background-color: blue;
}
.number {
background-color: blue;
}
Here my folder:
And inside:
Change this
<link rel=”stylesheet” type="text/css" href="styles/style.css">
With
<link rel="stylesheet" type="text/css" href="styles/style.css">
Please user opening and closing double inverted commas.
Please try this line of code:
<link rel="stylesheet" href="styles/style.css">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<style type="text/css">
button{
background-color:red;
}
</style>
</body>
</html>
In the above segment, Bootstrap is being used and when tried to apply the background-color property for the button tag,it is not being reflected.What is the reason for that?
Try to add !important:
<style type="text/css">
button{
background-color: red !important;
}
</style>
Or put your <style> upper, than your divs and buttons... sometimes that is the issue.
You can use !important, because bootstrap already written a style. So if you want to overwrite that style, maybe you will need to write it down under the bootstrap's style, otherwise you will need to add !important.
I think this website will help you to understand the reason of !important.
https://css-tricks.com/when-using-important-is-the-right-choice/
I have recently started learning and practicing web development topics. I wanted to use bootstrap for things like responsive design, navigation bar and tables. I have downloaded twitter bootstrap. The files are stored on my desktop. When I try to include them in my project, I see that bootstrap has not been implemented.
Following is how I tried to implement it.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href ="css/bootstrap.min.css" rel="stylesheet" >
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>responsive layout</h1>
<p>Hello World!</p>
<p><a class="btn btn-primary btn-large">Super important »</a> </p>
</div>
</div>
</body>
</html>
Here I'm trying to create a responsive design but it doesn't work when I re-size the window or when I change to other devices.
What am I doing wrong?
Just use Bootstrap CDN links.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Your code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" >
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>responsive layout</h1>
<p>Hello World!</p>
<p><a class="btn btn-primary btn-large">Super important »</a> </p>
</div>
</div>
</body>
</html>
Try adding col-xs-12-class to your <div class="hero-unit">
Using the CDN like Srinivas Pai recommended is the easiest and in some ways the best way to get started with bootstrap, but the reason it wasn't working may be down to filepaths you've specified. Is the CSS folder on your desktop or is it within your bootstrap folder? if so then you'll need a '/' before css/bootstrap.min.css
All of solutions which posted here should work. But if you are using the latest version of bootstrap you probably should replace 'hero-unit' to 'jumbotron'. (Looks like these no 'hero-unit' class anymore.)
http://getbootstrap.com/components/#jumbotron
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>