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.
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 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;
}
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.
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
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