I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
Related
I built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.
I thought that simply changing the body color in the CSS would change the default color:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;
So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.
Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.
Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.
EDIT: here is what I see when I inspect the live page:
Why your code is not working
Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:
For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:
BODY STYLES:
NAV STYLES
#ID STYLES or .CLASS STYLES
* STYLES
In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.
Why dooj sahu's answer has been down voted
This is because !important is not the best to use when there are other ways to go without it.
The way to do it
The best way to solve your problem is by using;
* {
color: #b6b6b6
}
* {
color: #b6b6b6
}
If you are begineer, i add a precision:
"*" target entire website, you can change background-color for example and whatever property you want.
Simply use !important:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #b6b6b6 !important;
background-color: #750204;
}
So I made a small change on the page (gesher-jds.org/giving):
Donate Now, Pay Later
to
Donate Now, Pay Later
and now the design of the right calculator has changed (more like the button as I see). How do I fix it? Both of them looked the same (besides the text). I tried to add the code below to the CSS but it still didn't work. What I'm doing wrong?
CSS
a#payLater {
background: #60426c;
width: 100%;
display: inline-block;
margin-top: 20px;
padding: 10px;
text-align: center;
color: #fff !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-decoration: none !important;
}
If you apply the styling in the dev tools it works like expected. The reason it does not work in your working environment is probably because your styles are overwritten by different styles. Check the dev tools to see which styles are applied
Potential fixes:
1) Tidy up the "!important" rules.
2) Build stronger selectors -> keyword to look for knowledge [CSS Specificity]
If you set !important in one CSS rule, it'll become hard to overwrite that because !important = 1000 Specificity points so the rule is really strong
I have read extensively on this site and others about how to change my css for different browsers, but none of the methods I have found are working.
I have an unordered list whose list items appear with different amounts of padding on different browsers. The value is set to 8 px and works perfectly on chrome and safari. I have tried
ul.titles li {
padding: 8px;
-moz-padding: 7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
I also tried
ul.titles li {
padding: 8px;
padding: -moz-7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
Both of these had no effect. When I tried defining one for -webkit- and one for -moz- it messed up both mozilla and chrome.
You can try this :
#-moz-document url-prefix() {
ul.titles li {
padding: 7px;
}
}
for sure otherwrite your css maybe add a class to your li
Try adding your styles inside of a Mozilla extension:
#-moz-document url-prefix() {
/* Styles go here */
}
So in your case, you can add the following lines of code to your CSS stylesheet:
#-moz-document url-prefix() {
ul.titles li {
padding: 8px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
}
Another option you might want to try is Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I highly recommend it.
Instead of addressing every browser one by one, I suggest using Normalize.css to make common elements begin with common styles. A must have for every single website I develop.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D
When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.
Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?
How to do that?
* {
font-size: 100%;
font-family: Arial;
}
The asterisk implies all elements.
If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:
html, body, form, fieldset, table, tr, td, img {
margin: 0;
padding: 0;
font: 100%/150% calibri,helvetica,sans-serif;
}
input, button, select, textarea, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/* rest of your styles; like: */
body {
font-size: 0.875em;
}
Edit: you may want to read up on CSS resets; see threads like this one
I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.
Try Eric Meyer's reset.css.
you can set them in the body tag
body
{
font-size:xxx;
font-family:yyyy;
}
If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.
If you want to set styles of all elements in body you should use next code^
body{
color: green;
}