What is the usefulness of these 2 things in CSS reset?
What is the problem in resizing of input elements in IE and in which version?
and if legend color doesn't inherit in IE then how it can be solved adding color:#000;
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
The first rule actually doesn't apply on IE only, but on all webbrowsers. Normally you would like to define a global font in the body:
body {
font: 1.1em verdana, arial, sans-serif;
}
But this doesn't get applied (inherited) on the form controls in all webbrowsers. That rule would then apply (only) the font size on them as well. One way is to set the font to inherit on those elements:
input, select, textarea {
font: inherit;
}
But that doesn't work in IE6/7. Another way is to just explicitly include the elements in the rule:
body, input, select, textarea {
font: 1.1em verdana, arial, sans-serif;
}
That only the font-size is been set is probably because the YUI guys would like to keep the form controls their own browser-default font family (which is sans-serif for input and select and is monospace for textarea). The 100% is been used because IE6/7 doesn't support inherit.
As to the second rule: I am not sure what they meant here. I did a little test in IE6/7. The legend just inherits the color from its parent element. Maybe the actual problem lies somewhere else?
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;
}
I am trying to change the font family of an aside tag. I created the following section in my css file -
.instruction {
color: brown;
font: verdana;
}
and assigned aside, class = instruction. But it does not work. I have also tried using aside as an element in CSS to assign the properties like
asign {property: value;}, but no effect.
But if I only use color property, then it works. So is there any issue with assigning font family and related properties to aside tag? I am using Chrome 28.
Use font-family: verdana; instead of font: verdana and when you are using font shorthand properties care of the following order:
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family
And also you cannot apply just one value in shorthand method. For font, it should at least two values for eg. font-siz and font-family
image source
When using the font shorthand you must specify at least a font-family and a font-size - not just one or the other - the exception is when using system fonts - e.g. font: menu;
Also note that the font-family property must appear after font-size.
.instruction {
color: brown;
font: 1em verdana;
}
http://jsfiddle.net/GRBRU/
Either
{
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
Or:
{
font: 13px bold Verdana;
}
How do you increase the font size of a datagrid in ext-js?
I have tried changing the font-size property in both ext-all.css and in xtheme-blue.css but neither one seemed to work.
For example:
.x-grid3-row td, .x-grid3-summary-row td{
font:normal 21px/23px arial, tahoma, helvetica, sans-serif;
}
Why isn't this working?
Instead of altering the base CSS for ExtJS have you thought about altering the config of the editor/datagrid compontent itself?
bodyCssClass:'yourclass'
nb.see also
You may need to add !important to force your css to override extjs's css.
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;
}
I have a page where I combine labels, input boxes and text areas to display some content.
I would like all of them to have the same font-family and font-size.
I have played with the font-family: inherit style but this doesn't seem to work for the input and text areas.
What would be the easiest way to ensure the same font / size over the whole page.
Ok ... this does the trick:
*
{
font-family: arial;
}
input
{
font-family: inherit;
font-size: 100%
}
textarea
{
font-family: inherit;
font-size: 100%
}
My CSS is iffy as I haven't used it in some time, but I believe doing
*
{
font-family: arial;
}
will apply to all.
I think most CSS devs will do something like
body {font: normal 10pt Arial}
At the top of the CSS file.
If you want to change labels from this, just add a
label, input, textarea {font-family:Georgia}
somewhere down the road.