I've a web app with a bunch of pages. Each page have a few of modal windows.
Such page with modals have structure as below:
<div class='page1'>
<p>Page 1 content here</p>
<div class='modal'><p>Modal window</p>
</div>
The question is how to separate css styles of modals and pages, i.e. to make page style not affect modal style.
For example, a style p { font-weight: 900 } will affect both page and modal paragraphs.
To clarify: the question is not about how to write css selector which narrows selector by div.page + p,
its question how to organize HTML for widgets as modals, which are contextually bound to certain elements/pages/components.
A simplest solution would be to put all those modals outside of the page components, but that would reduce readability because it would become not clear to which context modal belongs.
Whilst you could define a bunch of styling to remove every possible style that could have been set within the page to clear it ready for your widget, this isn't a very good approach if you have control over this code structure.
A much better approach would be to use CSS semantically and define a set of class names that apply to your page styling and not use the generic tag selectors unless you actually want every tag in your markup to use that style.
p { somestyles: here; }
Should mean every p has to do obey this, regardless of where it comes from, widgets and all. If you want ps within my content to obey my style then write
.mycontent > p { somestyles: here; }
and have the markup be
<div class="page1 mycontent">
<p>Page 1 content here</p>
<div class="modal"><p>Modal window</p>
</div>
Say what you really mean and the CSS will flow more naturally.
Edit
An iframe will stop the cascade, but you're completely removing the widget from the markup then (to a different file), which it sounded like you didn't want.
To me, modals are separate to the markup that calls them and can be placed elsewhere, you could include a comment where it is opened if a developer needs to know that information. One modal could legitimately be re-used by many elements on the page.
As for stopping containers affecting their contents, that's what they're for in the land of CSS, but if you really want to work around it then you can create a "reset" class that sets all of the style properties back to the way they were before you applied your styles. There's not a way to just turn off cascading though.
Use .modal p { font-weight: 900 } or .modal > p { font-weight: 900 } for modal elements!
Use .modal before each element of modal that will not create confusion!
For more details learn css selectors its fun CSS Selectors
Related
I don't know if this will make sense and excuse me for the bad terminology (just started learning) but what I'm trying to do is keep a piece of code separate from another so its tags don't affect the code I don't want to be affected.
I changed up some code in codepen to make a carousel for a page. I typed up the page code in another project. I tried importing that carousel code into the main page's code, but as some tags from the carousel code are the same as the main page's, it isn't laid out as I want it to be as it's interfering. I would change the tags, but they're "universal" ones such as img or a.
Is there a way of separating that CSS code from the main code? Like assigning it a separate div and applying that div to the container for the carousel in the HTML?
Here's the carousel
and the main code (trying to add the carousel underneath the about sections).
Well it is very simple, the best approach in styling with CSS is to:
Never apply styles to HTML tags directly because this will affect all the pages where your style is included, so it would be better to:
Use classes and ids to style some specific elements in your pages, this way including your css in the page will only affect these specific elements:
#myElementId{
...
...
}
.myElementsClass{
...
...
}
Note:
Use id for a unique element in the page and a class for more than one elements in your page.
Nested CSS classes:
To answer your question about using nested classes, you can't do it with CSS only, you should use SASS or LESS
References:
For further reading you may take a look at :
The answer to Nesting CSS
classes question on Stackoverflow
Nested selectors: the inception rule
This is called CSS conflicts, you better never apply much styling attributes on tags directly, use namespace with your classes, like-
If you want to apply/change predefined attributes classes, then you can define classes like-
// same classes with a parent Css class,
// to show it's effects only for that partcular section
.home .carousel{
// your css goes code here
}
OR
.someOther .carousel{
// your css goes code here
}
// Then few more nested classes
OR, if you gotta define whole of bunch new classes for your project, you can do something like-
.home-carousel{
// your css goes code here
}
Hope solves your query!
In that case, you would need to create assign a class or id to the tag you want customised and in your css, identify that class or id. For example:
<div class="myheader">
<p>hello</p>
</div>
<div id="myfooter">
</div>
<style>
.myheader{
/*ur css for myheader*/
}
.myheader > p {
/*css for <p> tag in myheader class*/
color:blue !important;
}
#myfooter{
/*ur css for myfooter*/
}
p {
color:red;
}
</style>
if you noticed, class in css is identified with a . and ids are identified with a #. Classes and id can be applied to any tag you need.
Should you have overlapping css as shown above, just use an !important to specify which takes precedence.
For more info: w3s Does that answer your question?
I wonder about something, why should i name classes and style them, when i can just target then with css3 pseudo-classes? Will not be lesser "html code"?
<header>
<nav>
Link 1
Link 2
</nav>
</header>
In my CSS instead of i style the menu like this
.menu {
background-color: red;
width 50px;
}
I can just write like this?
header nav a:link {
background-color: red;
width 50px;
}
This is just an demostration/example i wrote fast, because if this is "smarter" or "better" coding then alot of webpages can get rid of alot unncesseriy classes and divs then they just target them as an Child-element?
Is this better or not?
Short answer: because it makes things easier.
It may be:
very difficult to write specific rules to target very specific elements
impossible to target elements directly if the HTML is very dynamic
cumbersome to add a lot of specific selectors if you want to style several elements the same in different parts of the document
difficult to move elements around in the document, because you need to touch the CSS rules as well every time
Classes identify groups of elements which you all want to treat equally, completely independently of their position within the document. This enables you to decouple your CSS and your document structure and reuse CSS efficiently for different documents.
The content of a web is often (very often) dinamic. that means it is developed in a team when (in my case) I do all the styles and they do all the programing stuff. You may have a container (div) and you may know what is going to be inside (links) but you will never know if you may have one or 200 links inside. You can control the html container and give it a class but even if my mates could make that any link inside has a class as it is generated, why bother them if I can target perfectly the links through header nav a:link
Okay, this is a gross oversimplification, but I have a javascript application to help people develop webpages. It has its interface superimposed over the page that is being developed, and it all works fine, apart from one thing.
If the div class used in the interface is used by the webpage that is being developed, the interface' embedded stylesheet overrides the properties of the webpage!
This happens on jsfiddle, the embedded css is takes precedence over the external css.
JSfIDDLE
external css:
.color {
color: green;
}
Index.html:
<style>
.color {
color: blue;
}
</style>
<div class="color"> Text to be coloured </div>
When run, the text is blue. If someone could make the text turn green, I think it would demonstrate how to overcome the problem.
Obviously, one way to fix this would be to change the interface classes and rules to something like this:
<style>
.color_interface {
color: blue;
}
</style>
<div class="color_interface"> Text to be coloured </div>
And make them unique, but the project has hundreds of css rules, and I'm just wondering if there's a better way, and a safer way (there's still a small chance someone has a rule "color_interface") to do nullify css rules, so they won't contaminate the page.
I'm thinking the only way to do it is probably a 'reset' stylesheet concerning my rules, setting them all back to their defaults. Is there a way to do this dynamically with jquery, maybe?
What you're witnessing is CSS by design. Specifically, specificity.
If your goal is to release some kind of library that can be used publicly and you want to avoid naming conflicts, I think a fair practice is to simply namespace your selectors, e.g., .starkers-color { color: blue; }. That won't necessarily avoid specificity issues, but it should prevent against having your selectors overridden by implementors.
If you inspect the JSFiddle page you'll see that the reason for it not working is that your inline style definition is placed in the body where it has no effect.
The CSS rules you specify is instead placed as an inline style in the head element.
To your problem:
Again, referring to JSFiddle, would it be possible to load the page in development inside an iframe? This would mean you get the separation you require.
This is because the order of the CSS when rendering. Your include is at the top of the page but your style tags are below that, meaning your style tags will alway take precedence over you include at the top. You could try adding an important to you css includes but this is majorly hacky and could create a whole load of new issues.
I tried to find an answer but nothing...
I have a small application that loads in to other websites inside a div tag. This div has a specific id like -> "myAppHere"
Now, all the html is inside this div, but as I can see my elements are affected by each site own css rules.
Is there a way to cancel all the other sites css rules?
something like:
#myAppHere *{
padding: 0;
margin: 0;
etc....
}
because the above sample code doesn't work well.
You cannot simply add:
#myAppHere * {
...
}
cause general rules are overwritten by more specyfic rules. You didn't say in what way app is loaded in that div(is it inner frame, plain HTML etc.) so it's hard to find a solution.
What you can do(assuming it's just extra HTML added to your #myAppHere element) is to check CSS styles set to each element(using e.g. Firebug) and write your on rules in your CSS file, which are more specyfic.
That's a scary requirement you have there.
You can try adding !important to the css rules, like so:
#myAppHere *{
padding: 0 !important;
margin: 0 !important;
etc....
}
but even this won't override some elements that have a style attribute with !important in the rules, such as when this happens:
<div id="myAppHere">
<div style="margin: 20px !important;">Hello</div>
</div>
You may be able to go into the other website's source with javascript, and strip out all style and class attributes... that's probably the only way to be sure. Something like this, if you're using jquery with your javascript:
$("#myAppHere *").removeAttr("style");
$("#myAppHere *").removeAttr("class");
Careful about removing those class attributes though, because it means that if you want to style it yourself, you won't have any classes to work with. You could add new classes in afterwards with more javascript though.
If you insert a complete HTML document inside a div element, the result has invalid markup in a manner that seriously messes things up. In particular, if the inner document has any style element, it will in practice be taken as applying to the page as a whole.
The solution is to stop doing that (and first consider whether you can legally do such things at all – it would normally constitute copyright violation). Technically, you would need to remove or rewrite much of the content of the document being embedded (there is no simple way to deal with CSS code in them or linked from them, for example), or to use an iframe element (or frame or object element) to embed a page as “autonomous” (so it will be displayed in an independent sub-window).
I have a css file that defines style for all <p> tags.
like this
p { ......... }
How can I write a <p> in a page where the stylesheet is included that has default styling?
There's no easy way to do this.
There a some common tricks to simulate that behavior though. The best one to use would vary based on how complex the overridden region is, and how often you want to do this.
Method 1 (for simple overrides):
Add an extra class definition in the statement similar to the one where you clear the default styling (such as is discussed at http://www.wordpress.darfuria.com/blog/clear-css-defaults). You might have to arrange the declarations carefully to prevent the 'normal' style from taking precedence.
.override {/*Your default style overrides, color: white;
margin: 0; background:none; etc */}
<p class="override">foo</p>
Method 2 (clunky, but good for complex regions):
Use an iframe to pull the whole region from a separate .html file hosted elsewhere on your site. The content inside iframes respects the CSS of the page inside the frame, and generally ignores the CSS from the surrounding page.
Method 3 (good for one-shot overrides):
Use inline styles, as others have described here.
Edit:
Not Really a Method, But Probably The Most Correct Way
Also probably not what you want to hear
Re-think your how you've arranged your classes.
For example:
If the overridden <p> is special in some way, it probably deserves it's own class that describes what it's purpose is. <p class='override'> doesn't help people who will be looking at your design after you're done, since it doesn't tell them what the overridden text is for or why it's styled that way.
Are the overrides coming in a specific region? If so, them a style definition like div.left_nav p {/*styles*/} might be a better fit.
Lastly, Is your default <p> styling not really default? Maybe a more loosely specified p style might be in order, with additional p.foo and p.bar definitions later on.
This doesn't fix your immediate problem, but it might be worth chewing on before you start your next project.
You can use inline styling to override the default styling.
<p style="background-color: #ffffff">white bg</p>
Inline styles have the highest precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves.
Just to check. For all the talk of "default styles", if you set the style for a type of element in a CSS file, e.g.:-
li {...}
Then you also include a css file that contains a class definition and apply that class to an individual instance of that element type, e.g.:-
<li class="myLiClass">Some Text</li>
From what I understand it is impossible to get the class myLiClass to override any attribute of the style specification "li {...}" for the element by providing that overriding style in a css class.
Therefore I assert that this means:-
"If you specify a style attribute for any html element type (element type, not a class) in a css file, then all pages that use that css file cannot show that element type attribute using any different styling, where that different styling is stated as a css class."
Can anyone confirm this with an absolute yes, or a working example of why this assertion is not true.
You can apply the style for your tag from your stylesheet like this:
CSS
p.first{ color: blue; }
p.second{ color: red; }
HTML
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
</body>
</html>
I would agree that there isn't really a "Default" style for a tag since each browser has significant freedom on how to display it.
I think the easiest answer is to rethink the problem - define a class that you use for all P tags and then if you fail to use the class it will give you the default styling.
<style>
p.all {margin.top:9px;}
</style>
<p>This would be default style</p>
<p class="all">This would have your style</p>
Alternately, if you wrapped all of your stylized content in a div or some other tag, you could nest the styles like this:
<style>
div.foo p{border:1px solid black;}
</style>
<p>normal</p>
<div class="foo">
<p>abnormal</p>
</div>
Hope this helps.
What makes this impossible is that there is no "default style".
Default styles come from the browser's internal style sheet and the user's preferences. So different browsers and different users have different defaults.
You could assume that white/transparent background, black foreground and Arial font were going to be most people's default styles, but you couldn't be sure.
So, like other people are saying, you have a fundamental problem because you've got a style for all P elements, and there's no way to code a P which doesn't inherit from that style, you can only over-ride it using CSS of greater specificity.