How to apply the external css style specific to an html file? - html

I have 5 html files and 1 css file.When I link this external css to all the html files, all the styles are getting applied to all the file. But I wanted only few styles to be used.How can I make it?
Eg:
<head>
<title>Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///C:/Users/myuser/Pictures/HTML/Styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
body
{
background-image: url("file://C:/Users/myuser/Pictures/HTML/bicycles.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Here, the body style is getting applied to all the html files and an unwanted background is being displayed.Please let me know how can I resolve this.

Related

some CSS stylesheet not linking to HTML

I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">

I am new to CSS. My background image is not loading. I am using external CSS, and my OS is windows

Following is my CSS and HTML file.`
.backgroundimage{
backgroud:url('C:\Users\shvikram\Desktop\Social_Media\Images\login_page.jpg');
background-attachment:fixed;
}
<html>
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>
The Directory Structure is as follows.
Social_Media directory contains Images, CSS and index.html file.
I tried using following notation also, but it is not working.
.backgroundimage {
background-image: url('\Images\login_page.jpg');
background-repeat: no-repeat;
}
It's only a problem with the image path. It should be relative to your HTML file:
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
CSS:
.backgroundimage {
background-image: url('http://via.placeholder.com/350x150');
background-repeat: no-repeat;
height: 300px;
}
Read about it here:
How to give the background-image path in CSS?
As first, your stylesheet link and title are not withing the head tag.
As second, the links inside your stylesheet are relative to CSS file (not to the file where the stylesheet was included), so it should be:
.backgroundimage{
backgroud: url('../Images/login_page.jpg'); /* In parent folder, Images */
background-attachment: fixed;
}
As third, do not use backslashes for file paths, no matter you are on Windows OS.
As fourth, go on and use your browser inspector, to be sure all resources are loaded, than to track errors etc.
Final HTML should look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="Images/Logo.ico" />
<link rel="stylesheet" type="text/css" href="CSS/main.css" />
<title>Social Media</title>
</head>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>

how to have different background images in two different pages in angular2?

I have a angular 2 application on which i have to use seperate background images on home page and other pages, i have applied image on index.html to have a background image but i need to add different image on different pages.
This is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="resources/js/semantic.min.js"></script>
<script src="resources/js/slideshow.js"></script>
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />
<link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css">
<link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="resources/css/styles.css" rel="stylesheet" type="text/css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/chart.min.js"></script>
<script src="resources/js/chart-data.js"></script>
<script src="resources/js/easypiechart.js"></script>
<script src="resources/js/easypiechart-data.js"></script>
<script src="resources/js/bootstrap-datepicker.js"></script>
<script>
<!--Icons-->
<script src="resources/js/lumino.glyphs.js"></script>
</head>
<body style="background-image: url("resources/static/pic/slide_1.jpg");" >
<app-root></app-root>
</body>
</html>
Please suggest me how to achieve this.
What about applying a background image at the component level instead of inside the index.html? Then each component could have a different background image. You could even have a separate css file that includes a snippet of code like this:
body { background-image: url("resources/static/pic/slide_1.jpg"); }
and include it in each component "styleUrls" that you want that background image to appear on. Use a different css for the components you want a different image on.
Hope this helps
Yes you can do this like you can have different background images on different components of your app. To do this please follow the instructions given below.
In your main css file that is style.css give the height 100% to the body & html please refer the below code.
Style.css
body,html{
height: 100%;
}
Now in your components css file that is namespace.component.css file add the below code
.component-body{
background-image: url(/assets/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
Now make sure that you are having all the contents inside the div contains this class. You can have the dive classes & the css into their css files accordingly. For more information you can refer this link

My CSS is not working with boostrap 3 [closed]

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
I'm starting to build a webpage using Bootstrap 3 (latest version) and for some reason I can't seem to add a background image.
The coding is correct, all files are in their proper folders, etc.
Finally I decided to create another webpage with the exact coding the only difference is that my css stylesheet is not in the css folder. I refresh and the background image appears. When i move the css file back into the css folder, the image is gone.
What is happening? the name of the file is correct, I have added the correct path and I added some other styling besides the background image and they seem to be working perfectly whether or not the css file is in or out of the folder.
HTML WHERE CSS FILE IS IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
</html>
HTML WHERE CSS FILE IS NOT IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
CSS:
body {
background: url(background.jpg) no-repeat center center;
}
.container {
color: black;
font-weight: bold;
font-size: 2em;
}
Root FOlder
If you move the css file to the css folder the image url in the css file should be changed too. If your css file is in the css folder and image is in the root directory then the image url should be
background: url(../background.jpg)
Means go up one folder and search for image.

CSS is not loading in Firefox?

I made a simple responsive website and everything is working great when browser reads file from my computer but when I put it on my server Mozilla is not loading CSS. It loads fine in Chrome and IE.
Here is the HTML code:
<head>
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css\normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css\main.css">
<link rel="stylesheet" href="css\responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And CSS (in main.css) starts with this:
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Is it a problem with encoding? Is there anything I should put in main.css and responsive.css file?
I didn't change any settings in Mozilla and my version is 31.0.
Website: http://test.mateajdukovic.com
Thanks!
The errors are:
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cnormalize.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cmain.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cresponsive.css"
Try changing the \ to / in your HTML.
I am not sure But according to me you should use forward slash.
instead of "\" use "/" in your path of hreg tag
i.e.
use this:
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Rest all seems good.