So I've made a basic WordPress design and I've got this CSS problem which I can't understand. I am using 2 CSS classes for the title but in order for the title to change size I need to change both of them. Am I doing something wrong or am I missing something?
The code is something like this:
<header>
<h1 class="entry-title" align="center">Title goes here</h1>
</header>
CSS:
.entry-title {
font-size: 25px;
font-style: italic;
}
h1 {
font-size: 30px;
}
I was trying to change the title size when people are viewing it from a mobile device. I tried changing h1 all together, didn't make a difference, then changed entry-title, didn't make a difference and then I changed both of them and worked :/
Can you please let me know what am I doing wrong?
Thanks!
.entry-title and h1 both match the element.
A class selector is more specific than a type selector.
Any properties set in the ruleset with the class selector will override any set in the ruleset with the type selector.
Related
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
I am working in a product defines its own CSS. Part of their definition is defining all elements like this:
* {
font-face: Helvetica;
font-size: 12px !important;
}
I am creating some screens using their CSS but want to make some changes, like this:
.change {
font-size: 1.25em;
}
Now when I have a paragraph inside a div that is assigned the class of change it doesn't work.
<div class="change">
<p>Lorem ipsum dolor...</p>
</div>
This JSfiddle shows the problem: http://jsfiddle.net/uqogzayn/5/
This JSfiddle shows a wrong working solution: http://jsfiddle.net/uqogzayn/3/
Question: What is the best way to get everything that is inside the div with the class change to use the font size I want?
Question: How to apply my change class to everything inside the div while still adhering to CSS best practises?
I continued searching around. First I wanted to see if you could remove a previously made definition. The answer was no. Another option would be to define each sub-element like this:
.change p {
font-size: 1.25em !important;
}
While this worked I also know that it is bad CSS form. Also if I have to add an entry for each element that I want to override. And what if there are other classes that I want to create that encounter the same problem.
So I thought about using a reset and came up with:
* {
font-size: inherit !important;
}
body {
font-size: 12px !important;
}
This whole experience made me realize you should never use the wild card selector to declare anything. Everything inside your web page will inherit from body so just define your base in body.
When you add * it means all elements get this CSS properties and the <p> is an element of HTML so it gets the * properties not .change class you have to add the .change class in paragraph like this
<p class="change">
or you can add new css class like this
.change p
{
font-size:1.25em;
}
I hope I have got you right and this is what you want.
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
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/
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