When working with CSS, i'm able to set all properties of font in one declaration like font: italic bold 24px "verdana"; instead of writing font-style:italic; font-weight:bold; font-size:24px; font-family:"verdana";
Similarly i tried to set text properties (text-align, text-indent, text-transform, text-decoration, etc) in one declaration but i did not get the effects.
What I want to know is...
Is it possible to set these kind of properties in one declaration like text:underline justify capitalize 20px;?
if possible...,
-what properties can I set?
-What is the order of the properties that i should specify?
-what are the required properties?
Although font is a known abbreviation for an aggregate collection of properties, there does not appear to be any equivalent to let you specify all text properties together.
This is not possible and neither efficient to look back on. But what you can do is make an extra stylesheet.css and add "standard" classes in there like a class: text1
Which you will fill in with:
text-align: justify;
text-decoration: underline;
etc.
so you just have basic classes which add alot of css you dont need to make an extra stylesheet but it would keep everything orderd from custom css to standard classes you made on your own and you can use em for sites in the future.
Related
I have a CSS stylesheet that specifies the font for each paragraph class:
p.body {
font-family: Tahoma;
/* (more properties omitted for brevity) */
}
p.bodytextcenter {
font-family: Tahoma;
}
p.bodytextright {
font-family: Tahoma;
}
(etc. for dozens of styles).
Now I have to use a different font for some languages. I can do this by making a new selector p.body[lang="de"] etc, but I'd have to do that for every style in my list.
Is there a way to specify p[lang="de"] and have it apply to all paragraphs with that language attribute? Or would this require me to remove the font-family attribute from every paragraph class?
p[lang="de"] this may work but if not you can add !important on the font family style
Give this a try:
html body p[lang=de]
...or similar, depending on your actual HTML. You just need to add more levels of specificity.
This can't properly be answered without seeing your HTML; but I'm going to guess that the CSS is poorly structured, and that's what's making this hard for you. Doing the above is slightly hackish, but syntactically legit.
The rest of this might not help so much now, but good to keep in mind for the next project....
It's best to design your page structure based on the semantic meaning rather than the specific effect. Navigation, article, aside, sidebar; not left, right, bold, etc. Imagine you have a sidebar on the right. You could name it "sidebar" or "textright". But down the road you decide to put it on the left.... or do something completely different on mobile. Now "textright" is just mislabelled.
Even keeping with your current way of doing it, you should note that an element can have multiple classes. So rather than having:
<p class="body">...</p>
<p class="bodytextcenter">...</p>
<p class="bodytextright">...</p>
you could have something like:
<p class="body">...</p>
<p class="body textcenter">...</p>
<p class="body textright">...</p>
With that you can set fonts on p.body, and layout on p.textcenter and p.textright
That's an imperfect answer for the current project, as it would require changing a lot of existing text, but that goes back to the initial issue -- poorly structured CSS. (And again, without seeing HTML I'm mostly guessing here....)
HTML
<div data-foo> ... </div>
CSS
div[data-foo]{ ... }
Is this a good idea? Are there any drawbacks?
I think the data- approach makes sense when I have hundreds of "foo" elements, because the HTML markup size decreases (-3 characters for each element).
div[data-foo] is not supported in old IE (IE6, see here: http://www.quirksmode.org/css/selectors/)
div[data-foo] makes less semantic sense
class="foo" and data-foo will take up about the same space when DEFLATE-d. If you haven't set up your server to deflate, you should.
class=foo is only one character longer than data-foo even uncompressed, and is perfectly valid HTML.
It totally depends on you, for example elements must be having different attributes, so you need to define styles and even repeat some, instead I'll use a class which I can use for both, instead of using attribute selector which will limit my declared properties upto an element with that attribute, where you can freely use classes regardless of element attribute combination
.class { /* You can use this anywhere you need these properties */
font-family: Arial;
font-size: 13px;
}
Where as this will limit to ELEMENT-ATTRIBUTE combination
div[data-menu] { /* This will LIMIT you to a combination of div
element having an attribute called data-menu */
font-family: Arial;
font-size: 13px;
}
Important : Specificity will make you a huge mess
I just wanted to know why font: inherit; is used in Cascading Style Sheets.
Like the other answers have said, it’s to inherit a CSS property from the parent element.
What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?
Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:
p { color: blue; }
div.important { color: red; }
<div class="important">
<p>This is a text</p>
</div>
Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:
div.important p { color: inherit; }
The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.
So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN
By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:
In the 1st group: you can see there are some special style set by default from the browser, h1 is bolder and larger it also inherits the relevant values from body automatically. However, for the input element, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.
In the 2nd group: It forces those elements to inherit those values from body by using font: inherit;.
Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1> tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-style: italic;
}
.inherit {
font: inherit;
}
<h1>Heading</h1>
<input type="button" value="Button">
<hr>
<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">
Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:
body { background: black; color: white }
In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.
Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:
table, form { font: inherit }
The inherit is used to get the properties from the parent element. In other words, inherit the properties of parent element.
The default property is inherit, it means, say you have div and a p.
<div>
<p>Hello World!</p>
</div>
Now you give a style:
div {font-famlily: Tahoma;}
p {font-family: inherit;}
That font-family is inherited to the p from its parent element div.
Using {font:inherit;} in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like
body
{
font: -magic-font-from-user-preferences;
}
textarea, input
{
font: monospace;
}
The {font:inherit;} is used to workaround the special case where font or font-family is not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.
The actual user agent behavior with the value inherit differs due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.
inherit in CSS simply means it inherits the values from parent element, so for example:
<div style="font-family: Arial;">
<p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
This text will be Arial..And inherit is default behavior of the browser
</p>
</div>
Here <p> inherits the font-family: Arial; from it's parent div
You need to use inherit for example in the case of anchor elements,
the color property is commonly set to blue in the user agent style
sheet. If you wanted to reinforce the importance of the inherited
value, you could use the value inherit in an author or user style
sheet, overwriting the user agent style sheet declaration.
More Reference
Im importing an XML feed which has inline styles applied to its divs like:
face="Verdana"
I want to override this with CSS. Ive tried this:
#containing-div div {
font-family: arial !important;
}
But its not working. As 'face' is deprecated I'd hoped it would be overridden with the 'font-family' but it appears not to be. Given that I can't change the XML feed (I know I should be able to but just trust me!), how can I override this?
Thanks
Assuming that this:
face="Verdana"
is actually this:
<font face="Verdana">..</font>
(and it must be, right? There's no way it's <div face="">)
then you should use this CSS:
#containing-div, #containing-div font {
font-family: arial;
}
There should be no need for !important. The point is to select the font elements.
The problem might be the "XML" part. Can you set other properties with the #containing-div div selector, like background or border? If not, the selector might not match, because the ID is not correctly defined by the XML fragment or the namespaces don't match.
As I see in the primefaces documentation,
1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class.
An example with 12px font size.
.ui-widget,
.ui-widget .ui-widget {
font-size: 12px !important;
}
I have 2 questions on this:
Why is the .ui-widget written thrice in the above code?
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
In the style declaration they are comma delimiting the list of different class overrides. Specifically this piece of css states:
Classes ui-widget and ui-widget child elements of an element that has the class ui-widget.
As far as the header background is considered you might not have luck using simple CSS to modify the background color as I believe that it is likely using various different 1px wide GIF or JPG images repeated as opposed to a solid contiguously declared color.
If you want to customize the default themes of the Primefaces components with your own stylesheets then you are best to look into a tool like Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ for inspecting classes, styles and modifying them real time on ANY web page that Firefox is currently viewing. It even has built in Javascript debugging.
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
tabView, like all other PrimeFaces components has the attribute styleClass. Therewith you can assign your own CSS style class to a tabView instance (or any instance of a different component).
So you can create two style classes with different background colors.
xhtml:
<p:tabView styleClass="myClass">
...
</p:tabView>
css:
.myClass {
background-color: yellow;
}
You might need a more specific selector, read about css specificity
Perhaps a little subjective, but unless you're looking to customise existing Jquery UI IDs within a pre-existing/pre-rolled Primefaces theme then you're on a bit of a hiding to nothing. PanelGroups, PanelGrids and TabViews, for example, burst their containers and not even an overflow:auto can repair it.
One of the most infurating things about the Primefaces library is how the components do not pass W3C validation, leading to hours of "Fighting the Framework".