I have the following class which I use in multiple places like labels etc
.cont-label.ope-label {
font-weight: normal;
text-align: left;
font-family: ariel;
font-size: 18px;
}
now for header I want to add just
color for specific class ,there is a way not to do it like that ?
.cont-label.ope-label-new {
font-weight: normal;
text-align: left;
font-family: ariel;
font-size: 18px;
color:red;
}
you could just give the header a class of the colour you want and overwrite that:
<h1 class="cont-label ope-label red">test</h1>
then css:
.red {color:red;}
if your original header has a colour set then specificity will come into it:
.cont-label.ope-label.red {color:red;}
If you mean <header> element, use just
header .cont-label.ope-label {color: red;}
If header should be only class/id, use the similar
.header .cont-label.ope-label {color: red;}
/* or for ID */
#header .cont-label.ope-label {color: red;}
Try like this:
HTML:
<header>
<div class="cont-label ope-label">
...
</div>
</header>
CSS:
.cont-label.ope-label,header.cont-label.ope-label {
font-weight: normal;
text-align: left;
font-family: arial;
font-size: 18px;
}
.cont-label.ope-label {
color:blue;
}
header.cont-label.ope-label {
color:red;
}
You just need to create an css hierarchy like
.header .cont-label.ope-label{
color: red;
}
Related
I created a class:
how to I format a p tag within this class with a different font size?
I tried an inline method but I am guessing I can do this globally
.cities {
font-family: Verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
If you have a p tag inside a tag contains the class cities
you can do:
.cities p{
font-family: verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
Add another class to the relevant HTML tag and combine the two classes in a CSS rule just for the font-size:
.cities.smaller {
font-size: 12px;
}
The relevant p tag would like like this in HTML:
<p class="cities smaller">...</p>
The combination of two classes will "overrule" the single class due to a higher CSS specifity. Here an example in a snippet:
.cities {
font-family: Verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
.cities.smaller {
font-size: 12px;
}
<p class="cities">This is an element that has only the "cities" class applied to it</p>
<p class="cities smaller"> This will have a smaller font-size, but otherwise look the same as elements which have the "cities" class</p>
Also note that in this example the .smaller class will only be effective in combination with the .cities class, since in CSS it only appears in a combined selector. If you want to use it also in combination with other classes (or alone), you can create a single-selector class like .smaller { font-size: 12px; } instead.
I know you can use the display: property to display an inline-element as a block-element, and also other like table-cell etc. However, is there a way to make an element display like any other element? Something like
div.header{ display: h2; }
would be useful. Any way to accomplish this in css, except for overriding all the h2 properties?
If h2 has the following styles:
h2 {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
and you want div.header to look the same...
You can state this in your css:
h2, div.header {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
I have an issue with the line-height. Is there a way to reduce the line-height and move the i-elements closer so at least the petrol-background touch since it's not possible to use a negative value for line-height?
JS Fiddle
HTML:
<i>Nummer eins</i><br>
<i>Nummer zwei</i>
CSS:
#import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
i {
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
line-height: 0em;
padding: 0px 3px;
color: white;
background-color: #406A76;
}
Thanks in advance!
check if this resolve your issue jsfiddle
html
<i>Nummer eins</i> // iremoved the br tag
<i>Nummer zwei</i>
css
i { // line height removed
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
padding: 0px 3px;
color: white;
background-color: #406A76;
float: left; //added float left here
clear: both; //added clear both
}
If your goal is to eliminate the white bar between the two lines, it might be a good solution to put them both in a <div> or <span> (I used a span)
JSFiddle
html
<span>
<i>Nummer eins</i><br>
<i>Nummer zwei</i>
</span>
css
#import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
i {
font-family: "Lora", serif;
font-size: 0.8em;
font-weight: normal;
line-height: 0em;
padding: 0px 3px;
color: white;
background-color: #406A76;
}
span {
background-color: #406A76;
}
Let's say we have this:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
In .second-class, Is it possible to only inherit one property from first-class, say, background, while leaving the other properties as default?
No. You have to reset them. .first-class being the parent of .second-class will take its inheritance.
Here is the WORKING EXAMPLE to illustrate your scenario before reset.
Now when you reset it.
Find the below code before and after reset.
Before reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
After Reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
background: inherit;
font-weight:normal;
color:black;
}
I have the following CSS that is being inherited (the original CSS):
h1 {
font-size:30px;
line-height:36px;
}
h1 small {
font-size:18px;
}
I have a class whereby i want to override the h1 property like so:
.logo h1 {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
How can I do this without modifying the original CSS? The !important value did not help.
link: https://dl.dropbox.com/u/3417415/Storify/mockups/screen1.html
You are applying your CSS selector incorrectly.
Your .logo class is ON the header tag itself, from what I can see in your code.
Your CSS should instead be:
h1.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Just double check where this class is exactly being applied.
Also, just checked your HTML again and it looks like this:
<h3 class="logo">Storify</h3>
So your CSS should really be:
h3.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Or am I misunderstanding you at all?
You can use a script element in your html.
Within the script Add an event handler via
addEventListener('load', function () {
// Change your css properties here.
});
This way you are sure no inheritance of css styles can occur.