I have this
<h1 id="coins"></h1>
But cant style it with css, when i use Jquery Mobile ?
.coins{
font-family: Verdana;
font-style: bold;
font-size: 50px;
color: #ecb502;
margin: 30px 30px 0px 0px;
}
have also tryed with h1{} and didnt help ?
anyone knows why ?
if you're styling an id using a period '.' then that's your problem. Style ids with a hash '#' and classes with a period '.'
Also, you would use font-weight: bold instead of font-style. font-style would be for italicizing, primarily.
And, although it is more of a preference thing, as an FYI you don't need to specify units for the values of 0 on your margin. Zero times anything is still zero, doesn't matter what it is.
You just need to be more specific on your selector so that it over-writes the jQuery Mobile CSS (which targets the <h1> elements in <div data-role="header"> elements with: .ui-header .ui-title):
Change:
.coins{
To:
/*this selects all elements that have both the `ui-title` and the `coins` classes and is a descendant of an element with the `ui-header` class*/
.ui-header .ui-title.coins{
Remember that the rule with most specific selector will be used in CSS.
Here is a jsfiddle: http://jsfiddle.net/YdP7S/2/
Related
In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
I have the following code
<div class="subNav">
Work Experience
</div>
I have an external style sheet applying the effects to both .subNav and .current. I am using the style .current to overwrite the style applied on .subNav (using it to show what page the user is on, the 4em size is used to test the code).
CSS:
.subNav a, .subNav a:after{
font: normal normal 600 0.75em 'Lato', sans-serif;
margin: 0px 5px;
display: inline-block;
color: #FFFFFF;
}
.current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
Basically, its ignoring .current completely. I have tried putting direct code to change various style properties (such as colour, etc) in the link code directly and it works, but doesn't change with the style.
The HTML style attribute is for writing inline CSS that will be applied directly to an HTML element, and only that element.
Proper Usage of The Style Attribute
<div class="subNav">
Work Experience
</div>
There's no way to attach an existing CSS rule set specifically to a single HTML element, as CSS is meant to come second and be applied on top of pre-existing HTML.
One way many developers work around this, in your scenario where you may not be sure exactly where you want your styles applied because the target can change, is to use a class name. This will apply your styles to any element with the class, as well as any elements in the future you put the class on, at any time the class is present.
Your CSS is already correct if you want to take this approach. Next all you have to do is add the class attribute to any HTML element you'd like to see those styles applied to. So in your case where you're trying to style the current link, instead of making sure the current link ends up with style="current", instead make sure the current link ends up with class="current" on it.
If you're worried about the styles in .current being applied to other elements that have that class name on them, you could change your CSS to only target elements with the class name of "current" that are inside of your subNav like in the code shown below.
.subNav .current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
I feel obligated to point out though however that if you're having this issue it's merely a symptom of a different problem, as you should be responsibly naming things not to conflict with one another.
On a side note, a couple other items I noticed with your code-
If your <div> with a class of .subNav is the only "subNav" on the page, you should be an id not class
May be worth while exploring how the <nav> tag works, and when/where it should be used instead of that <div> all together
You shouldn't leave that empty title attribute on your <a> tag. Having an empty title attribute is worse than not having one at all. I certainly recommend you remedy the issue by filling it in with some useful information rather than just remove it though.
you write style instead of class
<div class="subNav">
Work Experience
</div>
You can't apply CSS class inside style property. Inline styles only you can write using style property. If you want to apply from external either you can use class or ID(if you want unique).
Work Experience
or
Work Experience
If you use ID, you need to write your CSS like below.
#current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
I am trying to add padding-right to a code. Inspite of trying I could not get it done (even tried margin-right).
.widget-title {
color: #454545;
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
padding-right: 20px !important; /*First tried it without !important but it did not worked in both the cases.*/
text-transform: uppercase;
}
Here is the markup,
<li id="categories-2" class="widget-container widget_categories"><h3 class="widget-title">Categories</h3> <ul>
Please help me out how can I do it.
Put your <h3> tags on display:block;. Once you have a block element (layer or div/span) you can add padding to it.
On a side note: there's no added value for SEO with h3 tags inside a ul element. You should use <span class="widget-title">my title</span>. Then you don't need display: block;.
EDIT: Since I find this interesting, I went to look for prove to my previous statement about SEO added value:
http://www.seobythesea.com/2010/05/google-defines-semantic-closeness-as-a-ranking-signal/ (see: HTML Formatting used to Determine Semantic Structures) where they seem to claim the opposite. But just imagine someone looking for "Categories backpack" targeting the h3 and a keyword inside the ul. People don't search like that imho.
It makes sense when people find your content with "high sierra Backpack". So the h3 doesn't add value in search terms so to speak and is more of a visual indicator in your case.
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody