How to apply css on one html file only - html

I'm building a website with AngularJS. And I'm using Plangular in order to create a customized Soundcloud Player. So I include my template like this :
<body>
<div id="container">
<div id="header" ng-controller="HeaderCtrl"><div ng-include="'templates/Header.tpl.html'"></div></div>
<div id="body" ng-view></div>
<div id=""><div ng-include="'templates/Player.tpl.html'"></div></div>
<div id="footer" class="center" ng-controller="FooterCtrl"><div ng-include="'templates/Footer.tpl.html'"></div>
</div>
</body>
So as you can see I got a header, a body and a footer. In the middle of it I got a player. I included the specific CSS file in that template and only in that template, but the CSS are in a way applied to my whole page. I need those css. ANd I thought that included the css only on that page would help, but it's not.
Thanks for your help guys !

Just prefix the CSS rules
Player.tpl.html :
<div class="player"> whatever </div>
CSS
.player .someclass {
}
.player .some-other-class {
}

Related

different page different color

Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.

Image not showing using it in css

I am newbie so don't mind my question.
I am trying to insert an image using css bt it doesn't show in the page.
Here is my code :
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
and my css is :
#outerWrapper #header #wave{background:url("generic/wave.png") bottom left no-repeat;position:absolute;top:0;left:0;width:960px;height:193px;z-index:100;}
The image path is correct. So help me please :)
Bilal Zafar, created files with your code, it worked for me here, here the link with the test neows.com.br/imagem-bg.rar might help you.
If you have recently modified your css file, try clearing your cache as sometimes the old css file is saved.
Your code works for me.
Sometimes a file extension will be uppercase, you may want to double check that.
Here is my source:
<html>
<head>
<style>
#outerWrapper #header #wave{
background:url("PathToImage.png") bottom left no-repeat;
position:absolute;
top:0;
left:0;
width:960px;
height:193px;
z-index:100;
border:1px solid black;//This is to make sure the size of div and position of background image are correct.
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
</body>
</html>

CSS applying styles selectively

I am trying to create a editor page that allows you to preview HTML files.
The problem is however that the editors styles are being inherited by the previewed HTML file e.g.:
<div class="header">
<div class="top">
Editing HTML page - page1.html
</div>
</div>
<div class="preview">
<div class="header">
<div class="top">
Page 1.html
</div>
</div>
</div>
I know that a work around would be to use an IFRAME, however I would prefer not to do this as I will be allowing drag and drop capabilities.
A CSS solution would be great, I did have the idea of using jquery to add a class to every item in the 'preview' area and using the following CSS for the editor page:
.header:not(.preview) {
background-color:#000;
}
.top:not(.preview) {
color: #fff;
}
This however seems a bit of a hacky solution and it would be great if there was a neater solution!
If you ultimately need to use not, you should invert your selectors:
:not(.preview) > .header { background-color:#000; }
:not(.preview) > .header .top { color: #fff; }
But it's better to design selectors in some other way

apply an external css file to a scoped div tag?

I have a main css file for the whole site called StyleSheetMain.css. I download a slider that has his own style.css file and there is a conflict on some items.I want to scope the slider's css file only to a div that it will contains only the slider items.I dont want to apply this css outside the slider div.
Any idea?thanksss
There is no such thing as scope in CSS. You can't nest a specific chunk of CSS in other CSS. The below code is WRONG and is just an example of what you CAN'T DO.
.some-class {
/* THIS */
.some-minor-class {
/* IS */
}
/* WRONG */
}
You also can't point certain .css file to work in only a part of html.
Your solution is simple - rename your classes.
There are so many words to describe this world we live in
You can make use of CSS Grouping / Nesting.
for example you have:
<div id="main">
<div id="slider">
</div>
</div>
<div id="newslider">
<div id="slider">
</div>
</div>
for you to change the style for the second slider:
#newslider #slider {
background: #fff;
}

Multiple HTML links to CSS

I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>