I'm creating a kind of CMS. In this system, each editor can define their own CSS like below.
This style should be applied to their own articles.
<style>
p{
color:blue;text-align:center;
}
a{
color:red;
}
</style>
These styles must be applied to a particular div, in this case id="editors_area".
<body>
<div id="editors_area">
===Styles should be applied only here.===
Each editors article are displayed in this area.
</div>
===Styles should NOT be applied here.===
</body>
To achieve this, I have a plan to insert #editors_area into editor's CSS, as a descendant selector on serve side like below.
<style>
#editors_area p{
color:blue;text-align:center;
}
#editors_area a{
color:red;
}
</style>
But I guess there are more simple ways to achieve above requirement.
EDIT
I deleted the javascript code. Which was not suited here.
Any idea will be appreciated.
Thanks in advance.
CSS was designed for this, so your first method is the correct one -- not to mention that the jQuery method you have wouldn't work.
You should only use jQuery to change css properties when it is required after page load, and even then you should use addClass() or removeClass() and have those classes defined in your CSS file. This is a better separation of concerns.
SASS and SCSS give you the ability to do stuff like this (unless I'm totally missing the point of you're question, which is possible as I'm about as far as you get from a front end person).
Something like:
#editors_area
a
color:blue
text-align:center
p
color:red
Depending on what language you're working in, it might be worth checking out. I've seen implementations for Ruby, Python, PHP and Java, although I've only used Ruby's myself.
you try this
$("#editors_area > *").css("color","blue"); // * may be p or a whatever
If you are finding a way to insert CSS blocks dynamically from jQuery, then you can do as follows:
$('<style type="text/css">
#editors_area p {
color:blue;text-align:center;
}
#editors_area a {
color:red;
}
</style>').appendTo('head');
Related
so I'm using Material UI Components on my react-app, for example for a button text, I would like to give it a margin-top and font-weight, however, I'm using CSS Modules, so I cannot just override the default CSS Styles, so I had to use the !important flag, is there a cleaner/better approach to do this and avoid using the better flag? Here's an example of what I'm looking like for a certain component.
I was adviced to use atomic CSS but googling that it seems like they're advising me to use in-line styles and that's something I've been meaning to avoid for future reusability.
TIA
Got through by setting specific CSS classes, for example for this font weight and margin top, my new CSS looks like
.loginSignUpLink.priority {
margin-top: 4%;
font-weight: 1000;
}
and my classname is as follows
className={classNames(styles.loginSignUpLink, styles.priority)}
Using important in CSS is not a good way. I prefer you please use the parent class or tag to avoid important.
One main thing is very important your CSS run last after all CSS files. It is the most important.
For example please check the below code.
<div class="test">
<span class="span"></span>
</div>
Than write down css for span like this
div.test span.span{ ... }
Also, you use more hierarchy to avoid important in css
body div.test span.span{ ... }
I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}
I was wondering if it is possible to define the styles of an element depending on the value of the body ID.
It is difficult to explain but something like this would be ideal:
HTML:
<body id="home">
CSS:
body#home {
a { /* code here */ }
p { /* code here */ }
}
body#profile {
a { /* different code here */ }
p { /* different code here */ }
}
I know I can do this:
body#home a { /* code here */ }
but that becomes very repetitive.
I will be looking forward to your responses,
Peter
You can do this if you use a CSS framework like SASS or LESS
Here's the documentation on how to do this with LESS. Hope this helps.
IDs are supposed to be unique, so #home { ... } is acceptable.
Then and child elements would be:
#home .myClass { ... }
This technique if often used to re-skin pages be simply changing the ID or class on a body.
Be aware that while nesting styles like this can be supported using CSS frameworks, it should be well thought-out to maintain modularity and clean inheritance in your CSS. You can end up doing more harm than good. In particular, watch out for something know as the inception rule, described here:
http://thesassway.com/beginner/the-inception-rule
The Inception Rule: don’t go more than four levels deep.
Any change you make to your markup will need to be reflected into your
Sass and vice versa. It also means that the styles are bounded for
life to the those elements and that HTML structure which completely
defeats the purpose of the "Cascade" part of "Cascading Style Sheets."
If you follow this path, you might as well go back to writing your CSS
inline in your HTML (please don't).
The best way to do what you are talking about is to have a base stylesheet the site.
They have either:
A <style> element in the header overriding anything you choose
or
Have a different stylesheet for each page
This is such a simple issue but I can't seem to find an exact answer anywhere...
Simply, can I declare attributes on a selector in two different places without overwriting the first attribute declaration?
For example, say I declare an attribute to an element within a CSS file loaded into a page:
.x {margin:2px;}
I then want to declare another attribute within the page dynamically:
.x {padding:2px;}
while keeping the CSS file attributes.
While I appreciate that there are plenty of other ways of doing this, is it correct to do it this way ?
This is fine. You can put declarations is as many different places as you like.
You can, yes. First off, the styles declared in the CSS file included on the page will be applied, then any other styles specified ad-hoc on the page will be applied on top of that.
That will work. Since CSS cascades it will inherit the styles as they go and add them to that class. That's why some sites change as the page loads.
First, to declare a paragraph tag, you wouldn't put a period before it. It should be:
p {padding:2px;}
Secondly, CSS is a cascading style sheet, therefore you can open an element declaration however many times you want. The style properties within it will take the last stated object. IE:
p {padding:2px; border:1px solid #000;}
and then later
p {padding:5px;}
Padding is now 5 px but it retains it's 1px border.
THAT IS BAD PRACTICE!!! I would sugest you to create "switch" class which will change some css attributes, rather than dinamicaly inject it later on the page. So later use it by adding it to element or remove
<style>
.p { margin:2px; }
.addition { padding: 2px; }
</style>
<p class="p">.....</p>
to switch to new style either with jquery on some ajax call or what ever you need.
<p class="p addition">....</p>
to switch off padding just remove "addition" class or "p" class if you want to switch off maring.
Cascading Style Sheets will inherit the styles and what you are doing is totally fine from a specification point of view but might not be considered best practice.
Also be aware of, that if you start overriding other styles the css hierarchy may apply: External > Internal > Inline.
for more information see http://nzwhost.com/article/understanding-css-hierarchy
I think the best way to do it is separate CSS declarations by logic.. layout together, colors together and specific medias (like screen, print) together.
If you want to make it to do it dynamically you can do something like that:
NOTE:
This is a PHP example.
<?php $back = 'image.jpg';
**something else can be executed ie conditionals and
more variables can be added**)
?>
<html>
<head>
<style type="text/css">
btn{
margin:0;
padding:0;
background-image: <?php $back; ?>
height:100px;
width:200px;
display:block;
}
</style>
</head>
<body>
<div>
<div class="btn">Test text</div>
</div>
</body>
</html>
You can add the predeclared variables or sets of the variables into CSS code using PHP. Note that CSS needs to be included in the HTML/PHP file you are working on. Lets say you want to randomly generate the background colour. PHP array (of ie '#CCC') > select values from the array randomly > add the variable into the CSS code. #
In your case you can specify two classes and then select one according to the condition in your dynamic code
I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?
for example,
.center {align: center};
.content { include .center here};
I came across css framework - Blueprint. We need to put the position information into HTML, e.g.
<div class="span-4"><div class="span-24 last">
As such, we will place the positioning attribute inside html, instead of css. If we change the layout, we need to change html, instead of css.
That's the reason I ask this question. If I can include .span-4 into my own css, i won't have to specify it in my html tag.
Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:
.center, .content { align: center; }
.content { /* ... */ }
Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:
div.center, div.content { align: center; }
div.content { /* ... */ }
I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.
In standard CSS, it's not possible to do this, though it would be nice.
For something like that you'd need to use SASS or similar, which "compiles" to CSS.
This is where the Cascading in Cascading Style Sheets comes in to play.
Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.
.baseModule {align: center;}
Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).
.message {border: 1px solid #555;}
Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.
.error {background-color: red;}
So now you have a few css definitions that can be reused with ease.
<!-- Regular message module -->
<p class="baseModule message">
I am a regular message.
</p>
<!-- Error message module -->
<p class="baseModule message error">
I am an error message. My background color is red.
</p>
To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!