I have written plugin/widget to website example.com which is pasted as .css and .js code. Plugin is mounted on example.com #app element. Site example.com has it's own stylesheet with
html {
font-size: 12px;
}
which affect for entire website including my plugin. I've tried
#app {
font-size: 16px;
}
but some of widget's elements have still font-size: 12px property. Both, example.com and my widget using bootstrap 4.
EDIT:
Please take a look on fiddle:
https://jsfiddle.net/aq9Laaew/264383/
The problem is that some of the widget's elements are inheriting the font size from the first css rule.
One way to do it is to set the font size for all descendant elements of #app like that:
#app * {
font-size: 16px;
}
try using !important tag.
#app{
font-size:16px!important;
}
Related
Home
Read Here
I made four labels in my HTML code with different texts. But I don't know how to specifically pick one to style in my css file.
Unable to help fully without seeing your code but I would say apply an id="name_of_element" to each text element.
Then in you .css file use #id-name-here to apply styling to each text element individually.
#element_id_here {
color: blue;
font-weight: 600;
padding: 5px;
margin-top: 10px;
}
You can change the parameters to suite your needs but these are just an example.
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
In the Master page of my webform app I reference a .css file which contains a .tooltip class. All the pages in my web app use this master page. Now, in one particular page I am using a JQuery function that I got from a sample app, and this JQuery function uses a .tooltip class from a .css that came with the sample (which is different from the .tooltip class in the Master page of my web app). How can I use the .tooltip css class that came with the JQuery sample on this one page and ignore the .tooltip class from the Master page? I cannot modify the .tooltip class name from the JQuery sample, and it would be prohibitively time consuming to rename the .tooltip class from the Master page. What is the workaround for this?
Here is the css
style type="text/css">
body
{
font-size: 10pt;
font-family: Arial;
}
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.tooltip
{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;
background-color: #2840B8;
color: White;
padding: 5px;
font-size: 10pt;
font-family: Arial;
}
table td
{
cursor: pointer;
}
.hiddencol
{
display: none;
}
</style>
Since you are using ASP.net, I assume that you can add a few lines of code to the Master page/template.
On your Master page/template, in the section where you link to the CSS files, add a conditional (if statement) to check for the name of the particular page that needs the special CSS file.
For the particular page, add a link to the additional CSS file such that it appears AFTER the standard CSS files.
The .tooltip rules in the bottom most CSS file will override the rules in the earlier CSS files, and that will probably take care of the issue.
Then only word of caution would be if tooptip appears in rules with other classes and selectors, then you may have to make sure that all the rules in the earlier CSS files are over-ridden in the bottom most CSS file.
Depending on what you're using to generate these HTML pages, you can exclude .tooltip for that one page. To do this:
Take .tooltip out of the Master CSS and put it into its own file.
Include the new .tooltip CSS file only in the pages that you want it.
One solution could be adding a class to the body in all your pages except this specific page and then changing your definition of the ".tooltip" to ".body-class .tooltip"
This way if the body class is not present your tooltip rule will not effect anything.
Thank you all for these replies. As usual, the app is in "Re-design" mode, convoluted (huge, ...). The original css is integrated all over the place, and each page has to look alike (gov). Is there a way I could define the css for this JQuery function and use it like in a div id="someID" class="something" ...
and then I place the JQuery in here ?
The page is actually a user control -- contained in a .aspx page which uses the Master page. So would the div ...> idea be a way I could bypass the .tooltip from the Master page? (that .tooltip css is contained in a .css file referenced in the Master page).
I have recently learnt how to create a html internal link; allowing my members to jump down the page to specific information.
However the coding I have used is set at a standard size and font. I would like to edit the font size and font style of the topic title.
a name="category-one">Under 6's</a>
Above is my current coding; how can I increase the text of the title "Under 6's"?
you can use inline style in a element this way
<a name="category-one" style="font-size:18px; color: green;" >Under 6's </a>
You should always use css for styling.
You can give each element a separate class and style those accordingly.
Under 6's
In css:
.title a{color: blue;}
There's much more efficient ways to refer to an object.
class is versatile in that you can apply it multiple times, this is the prefered way.
id is not as versatile because each id must be unique so your'e limited to just styling a single element.
a[name='category-one'] {
font-size: 16px;
font-family: "Palatino Linotype";
}
a.category-two {
font-size: 1em;
font-family: "Source Code Pro";
}
a#category-three {
font: 1rem;
font-family: "Verdana";
}
a:hover {
font-size: 20px;
font-family: "Arial";
}
<a name="category-one">Under 6's (refer by name attribute)</a>
<a class="category-two">Under 7's (refer by class attribute)</a>
<a id="category-three">Under 8's (refer by id attribute)</a>
There's three ways to apply styles:
The prefered way is using a separate file (e.g. style.css) and then pointing to it from your main page:
<link href="http://www.example.com/css/style.css" rel="stylesheet"/>
It may be more work to maintain a separate file, but it can be used by multiple pages on your site.
Another way to provide CSS rules is to use the <style> element and place that before the closing </head> tag. Although faster when loading, the code will become difficult to manage and it can only be used by one page (the page the <style> is on.)
....
<style>
.foo { height: 60px; }
....
</style>
</head>
Inline styles are discouraged and should be used sparingly if at all. They are limited to only the element they are on and harder to locate and debug. One advantage is that the rules will take priority over all other non-inline style rules (or should I say, most of the time, because there's always a bug or edge cases).
<a name="category-four" style="color: red; background: #000;">Under 9's</a>
So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.
Because I want the titles and dates… i.e.
Hello World
May 6, 2011
…to be very close together, instead of your usual gap, I’ve created a separate CSS stylesheet (dialog.css).
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-weight: bold;
margin: 0;
}
h1 + p {
margin: 0;
}
h2 {
margin: 0;
}
h2 + p {
margin: 0;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.
Is there a way to prevent this from happening, like a special HTML or CSS code?
Thanks.
It sounds like dialog.css is being loaded in the main page's scope.
if your dialog is built like this:
<div id="dialog">
<!-- content -->
</div>
then you can make your css like this:
#dialog h1 {
font-weight: bold;
margin: 0;
}
and those properties will only apply to elements within an element of id #dialog
Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.
use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.
also you may try adding !important after each rule.