Im having problem because of bootstrap applying css in some element like h2, h3, h4, etc...
Here is the code i see in bootstrap, note that it is applying styles to these elements
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
}
Here's my sample code :
<div class="page-wrapper">
<!-- OK to be added styles by boostrap -->
<div class="container">
<h2><span>WELCOME BOOTSTRAP</span></h2>
</div>
<!-- Bootstrap should not add styles to this div and its children.
This HTML is generated from external source and i just grab it and append it in DOM.
All styles here are inline.
If no inline styles applied, then stay it as is and dont let boostrap add other styles.
-->
<div class="mycontent">
<h2 style="font-style:italic;">
<span style="color:#FFFFFF;"><span style="font-size: 72px;">NO BOOSTRAP HERE PLS!</span</span>
</h2>
</div>
</div>
How can i achieve that the h2 inside class "mycontent" will ignore the bootstrap styles? I mean h2 should not have these styles : color: inherit; font-family: inherit;font-weight: 500;line-height: 1.1; which i meantioned above
IMPORTANT NOTE : I cannot edit/add styles to the div with class "myconent" since this is generated from other source. All i want to do is not let the bootstrap add styles of specific element and its children.
Any suggestion would really be a big help.
In your example, simply add the following to your CSS:
div.myContent h2{
/* YOUR STYLES */
}
There should be enough specificity there to override Bootstrap's baked in styles. Note- you will need to put this CSS below Bootstraps CSS file.
For any style you want to override- simply add more specificity to the rule in question, or replicate it and replace the properties you're interested in. As long as your CSS is placed after Bootstraps any rules will replace those already specified.
Related
I'm doing some tests on a new theme and it has a dark mode, but some texts have a white background (my shit when making posts). Is there any code that makes the background of all texts transparent? Because it's a lot post.
code
background color
I would suggest using CSS to do this. Probably all your text is in some type of element with some class, like for example:
<div class="text-container">
If this is the case, then use CSS to target those elements, something like:
.text-container p{
background: none;
}
Maybe a good idea is to add a class to your main "container" element when dark mode is active (use JS toggle() for example) and then using CSS you can change all the styles of your text only when this class is in the HTML (so basically when dark mode is on).
Take a look at this page to know more about CSS selectors. Play around with your CSS code and I'm sure you will manage to solve this!
As the commenter said, a code example would be a great help. However, as a general solution, this should work fine:
<style>
p, h1, h2, h3, h4, h5, h6 {
background-color: transparent;
}
</style>
If it doesn't work fine, either:
There is an inline style overriding it
It is something other than the tags listed above
We'll need more context (ie, a code example) to assist further
Please, can you add some lines of your code in your question? Just to see if there's something inside your css code that's messing around your text.
Be careful making <span> tags inside p, h1, h2... and then adding an css style onto it. For instance:
h1 {
width:250px;
color:purple;
}
h1>span {
background-color:white;
}
body {
background-color:black;
}
<body>
<h1><span>White background text here</span></h1>
<h1>Normal "transparent" text here</h1>
</body>
I have a div which contains the page's title. Is it possible to set all text to the h1 style without using tags?
For example:
<div id="title-div" style="h1">My Title</div>
Or maybe something like:
#title-div {
style: h1; //Imports all styles from h1
}
Is this kind of thing possible?
No.
Extensions to CSS such as SASS tend to have features like #mixin which can define a set of rules once and then apply them in different places but:
CSS itself has nothing like that
The styles have to be explicitly defined as a mixin
Find the css for your h1 tag and just add your div id (assuming you have control over that css and its not coming in from a 3rd party, in which case you will likely just have to copy it)
h1, #title-div {
// styles
}
You can use class or id to style your page's title.
CSS example for styling with "id":
#title-div {
//add your styling here
}
The other option is a "class", so in the "div" open tag, you should have "class" HML example:
<div class="title">
<h1>My Title</h1>
</div>
CSS example for class styling:
.title {
//add your styling here
}
Also, I think you should add in the div container h1 to understand and clear it.
You can use the default style of h1
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #000!important;
box-sizing: inherit;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
font-size: 42px;
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
So I work for a school district and we are trying to unify our website look and feel. We have a small problem though, all of our teachers have access to change the font family and size of their content. We really don't mind when they do this with their headers or when they make their font slightly bigger for emphasis. The problem we are finding is that they are choosing outrageous hard to read fonts.
Now I know using !important with the * in css will force will force this across all fonts (Yes I am aware we really shouldn't use !important). However, this doesn't allow users to use custom fonts for headers (h1, h2, h3, h4, h5 and h6 tags). Is there a way that we can force the font family to be something specific without forcing it on the header tags.
Teachers are trained not to do this, but there is no way to punish or scold them if they do this. So training it out of the question. I am also one person who maintains stuff like this and it is only a fraction of my job and we have over 1000 teachers, so it is really hard for me to enforce.
So now you know my problem and why it is a problem. Any advice would be appreciated.
TLDR: Using CSS is there a way to force all no header tags to use a specific font?
You can use :not. Heres a small example. You can see the Header tags are a different font family than the paragraph tag (added some coloring and such).
h1, h2, h3, h4, h5, h6{
font-family: sans-serif;
color: red;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
font-family: Serif;
color: blue;
}
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
Use the :not pseudoclass
Set a default style, and then override it for the editable font...
* {
font-family: sans-serif;
font-style: normal;
color: #000;
}
*:not(h1):not(h2):not(h3) {
font-family: 'courier';
font-style: italic;
color: red;
}
<h1>Default font</h1>
<h2>Default font</h2>
<p>Changed font</p>
<h3>Default font</h3>
I am trying to customise my wordpress theme and have given a column a class of
betting-tips-column.
I'm trying to change the p & h4 tags from white to black within this column using:
.betting-tips-column h4, p, body p{
color:black!important;
border-radius:8px;
}
However, it's affecting the whole page, not just the text within the column.
Any help?
Try this:
.betting-tips-column h4,
.betting-tips-column p {
color: black !important;
border-radius: 8px;
}
You have to basically nest all child elements inside their parents and further separate them by commas.
If you don't do the same then the css will be applied to all the p tags throughout your document.
Change it to the following:
.betting-tips-column h4, .betting-tips-column p {
color: black!important;
border-radius: 8px;
}
To style <p> and <h4> tags in a container with class .betting-tips-column you can use the following CSS code:
.betting-tips-column h4,
.betting-tips-column p {
color:black!important;
border-radius:8px;
}
Why your CSS doesn't work?
You only prefix the <h4> tag with your column class .betting-tips-column.
You defined the following rules:
p matches all <p> tags on the whole site.
body p matches all <p> tags in all <body> tags (should be only one <body> tag).
.betting-tips-column h4 matches all <h4> tags in container with class .betting-tips-column
Hint: The rule p and body p makes no sense because they affect both nearly the same <p> tags.
I noticed that Visual Studio 2010 creates a file Site.css in its default project with the following code:
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
I don't understand why there is a part where the same properties have been set for all headings i.e. h1,h2,h3,etc. and then each of the headings are given properties separately i.e. h1 {/props for h1/} h2{/props for h2/}.
Thanks in advance.
This starts by creating a standardised set of rules for all of the heading selectors, meaning they will all look consistent throughout the whole design.
I imagine visual studio then only overrides the necessary parts of this for the individual selectors. So for example, it wants <h1>s to be bigger so it overrides that with font-size: 1.6em. For <h3> the font size will be 1.2em but the font-variant, font-weight, text-transform etc don't need to be changed, so by setting up a 'standard' at the very beginning of the page, VisualStudio doesn't repeat all of those other styles, only the ones it wants to override.
There are certain things that don't make much sense, such as setting the font-size property on <h2> to 1.5em as this is already done in the standardising rules at the top, but I think this is more of a problem with how VisualStudio was set up to deal with these rules (it's just set up to generate the CSS in that way) as opposed to being something that 'makes sense'. You wouldn't repeat the same rule like that if you were hand-coding your CSS.
I hope that makes some sense :)
This prevents rules meant to apply to all types of headings to be duplicated. This is a standard way to go. You could as well put the rules from the top set into all specific rule sets. but that be a much longer code and much harder to modify.
The rules inside the top set are applied to all comma separated types of headings. This way you only need to specify such rules further down, inside the specific rule sets, that are specific to this very type of heading.
Because in this selector h1, h2, h3, h4, h5, h6 you have properties that equal to all of them, in all other you have property specific to only one selected, maybe that's the case?
The first section h1, h2, h3, h4, h5, h6 applies the code to all headings, in the sections below some properties get overwritten for specific tags. So this means, all headings get e.g. color: #666666; and font-weight: 200;. The color stays the same for all headings, but the font-weight of 200 gets overwritten for h2 (600) but not for the other ones. There it stays at 200.
This way, the properties in the first section only have to be written once, not for every heading. The font-size gets specified for all headings, so it could be left out in the first section.