I need to write specific CSS to be applied for individual html file
Currently using : Angular 1.5 with LESS
Currently I am using angular application, where header and footer are common but middle content will vary as below...
<div class="header">Header</div>
<div class="container">
<div class="home-page">Home</div>
</div>
<div class="footer">Footer</div>
Here is the second page code
<div class="header">Header</div>
<div class="container">
<div class="contact-us">Contact</div>
</div>
<div class="footer">Footer</div>
Now, I need footer to be fixed in second page and relative in the first page.
Here, each page has specific less file.
My problem is if I write .footer{position:fixed} in less file all the pages are effected.
I found solution like Internal css is working in ContactUs.html (or) Adding new CSS in JS file using element, but I wanted to know is there any way to resolve the issue using less or css file?
Please find for reference. CSS needs to be applied whenever we see roadmap-page is loaded.
You can use CSS sibling selector + to achieve this. If the .footer is sibling to .contact-us then the position will be fixed. You can write the below CSS code in your common styles.css or styles.less file
.contact-us + .footer {
position: fixed;
}
.home-page + .footer {
position: relative;
}
If you dynamically want to set class to your footer component, It's better to use #Input() decorator. What I would do is
footer.component.ts
#Input() styleClass = 'footer';
footer.component.html
<div [class]="styleClass">Footer text</div>
contacts.component.html
<app-footer [styleClass]="'footer-fixed'">Footer text</div>
home.component.html
<app-footer>Footer text</div>
CSS
.footer-fixed { position: fixed }
.footer { position: relative }
Related
I have several containers on one page and I want them look different in each container.
I'm developing in Angular5 and I've tried by defining
::-webkit-scrollbar {
/*contents are different in each css file.*/
...
}
into every css file.(Each container is included in its own component and uses its own css file.)
But they still look the same.
How can I fix it.
It is really easy but I'm not good at css so please help me.
html:
<div class="container sidebar">
...
</div>
<div class="container contents">
...
</div>
css:
.sidebar ::-webkit-scrollbar {
...
}
.contents ::-webkit-scrollbar {
...
}
Given this HTML as an example, is there a way to target all the elements inside a given <div> individually without having to change each CSS selector.
<div id="div1">
<h3>h3 div 1</h3>
<!-- whole bunch of html here -->
</div>
<div id="div2">
<h3>div 2</h3>
<!-- whole bunch of html here -->
</div>
This is how I normally do it...
#div1 > h3 {
background-color: lightblue;
}
However i am looking for a solution like this (treat this as pseudo code)
#div2 {
h3 {
background-color: lightgreen;
}
}
Here is a fiddle too: https://jsfiddle.net/8bstkq7u/1/
You can use exactly this syntax if you use scss. Change css to scss in your fiddle and your code will work.
This guide is a good point to start: SASS
So, I have a collection of div as following for My Page.
<div class="My_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
Then I have another page with same class= one and two.
<div class="Your_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
However, I am trying to apply different css to class= one and two based on what page they are in.
For example:
My_page:
.My_Page .one{width:100%;}
Your_Page:
.Your_Page .one{width:50%}
I have one css file which contains both codes.
For either pages, these two css markups are loaded and I feel like there must be more efficient ways to apply different css based on what parental div it is in.
Or am I doing it right?
Thanks
.page{ .... //common css for both page one and two}
.page .one{ width:100% .... //common for both }
.page .two{ .... //common for both }
.My_page .two{ width:50%;}
<div class="page My_page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
You are doing it correctly, CSS is very lightweight and loading unused code is not overly bad. However if you feel the need to do so you could load page specific CSS files and then have a whole site file that is loaded for all pages.
You are doing it correctly -
.outerclass .innerclass { }
will apply the style changes to all instances of this specific scenario.
Since your outer div has a different class, you could use a child selector to do something like this:
.My_Page .one {
color: red;
}
.Your_Page .one {
color: blue;
}
In that example, elements with the class one would only be red if they were inside a parent element with a class of My_Page.
Edit after re-reading the question:
Now I see that you seem to already be doing this. Yes, that is fine. You're doing it right. You could also include a different style sheet on each page if you're very concerned about the size of the style sheet. But that's not really necessary in most cases.
I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.
So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way?
Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks
HTML:
<div id="content" class="container">
<div class="four columns banner">
<div id="banner_a3da" class="banner_img">
<img src="page_home/banner_A3DA.jpg">
</div>
</div>
<div class="four columns banner">
<div id="banner_fi" class="banner_img">
<img src="page_home/banner_FI.jpg">
</div>
</div>
</div>
CSS:
/* Base Grid */
.container .four.columns { width: 220px; }
.banner or .container.banner or .container.four.columns.banner { width:100% }
Well either ways are correct, but you can use more classes to select specific object in your case. But maybe you have some .banner in .container.three.columns.banner and he is for example 50% and you wanted it to be 50%, but with .banner you will select him and you will resize it to 100%.
To resume, with single selection you may affect some elements that you didn't wanted, becouse there are more elements with that class.
I don't know if that's just pseudo-CSS or what, but you do 'or' with a comma,:
.banner,
.container .banner,
.container .four.columns.banner {
width:100%
}
You also had a missing space after .container.
Does that help?
Can I have a css tag on my page, that is applied selectively to some div element on that page only.
Say it has some entry like
* {
margin: 0;
}
I do not want this property to be applied on all the elements on that page.
You must assign id to the divs you want to apply css individually and seperately.
and you must assign class to a set of elements if you want to apply some css to that set collectively.
It will not apply on all elements in that page.
ID method:
#div{
margin: 0;
}
Class method:
.div{
margin: 50;
}
HTML:
<div id="div"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
If you are applying it to one specific div, but not to any others, you might as well put it in-line
<div style="margin:0"> ..... </div>
for this case you can do it
<div id="someId" style="margin:0"> </div>
If you're positive you're only going to be using it on one element, just use an inline style like other said:
<div style="margin:0;"> Your Content </div>
If you're going to be using it on more than once, make a class in CSS,
.nomargin {
margin: 0;
}
and then use it by calling that class:
<div class="nomargin"> Your Content </div>
This will ensure that you can make changes to all of these classes at once if you need to change something in the future. ALWAYS use an external style if there will be more than one element using it, it will save you so many headaches in the long run.