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.
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 hope this isn't a duplicate; I had a hard time phrasing this while searching for an answer.
I've left my h1 tags at their default size, and I plan to use h2 as a sort of subtitle proportionate to whatever h1 is set to.
I am trying to figure out a way to set h2 to be a percentage (say, 75%) of whatever h1 is set to, so that it would auto update if h1s size was ever redefined.
// an example
h1 {
font-size:18px;
}
h2 {
font-size:75% of h1 //obviously not correct
}
Current pure CSS solutions will involve setting the common ancestor element's font-size to be the same as your H1 font size. Then H1 would be 1em, H2 would be 0.5em (or whatever). But that would be an inconvenient way to handle it if that ancestor element contains any text other than headlines.
The trivial way to handle it would be with a CSS pre-processor, such as Sass, Less, PostCSS. Example in Sass:
$size: 18px;
h1 {
font-size: $size;
}
h2 {
font-size: $size/2;
}
A future pure CSS solution will be to use CSS variables, which are currently supported only in Firefox:
:root {
--h1: 20px;
}
h1 {
font-size: var(--h1);
}
h2 {
font-size: calc(var(--h1) / 2);
}
Well, you can set the font-size using em units to make them relative to their surroundings, then make each smaller <hX> tag 75% smaller than the previous.
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.125em; }
h4 { font-size: 0.85em; }
.sm { font-size: .5em; }
.lg { font-size: 2em; }
<div class="sm"><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4></div>
<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4>
<div class="lg"><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4></div>
Why don't you set both as percentages
h1 {
font-size:100%;
}
h2 {
font-size:75%;
}
That way because h1 is 100% then h2 will be 75% of 100%
https://jsfiddle.net/ta5xep3t/
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;
}
Is it possible to set font-weight to normal without !important?
http://jsfiddle.net/DvBes/
<table id="tasks">
<tr><td>Name</td><td>SomeTask</td></tr>
<tr><td>Time</td><td class="gray">08/11/2011</td></tr>
</table>
table#tasks td:first-child+td {
font-weight:bold;
}
.gray {
color: gray;
font-weight: normal !important;
}
Your first css rule is much more specific than the second, because of this it will overwrite the second one if you don't use !important.
You could achieve the same without !important by changing .gray to table#tasks td:first-child+td.gray
The following code would do the trick:
#tasks .gray {
color: gray;
font-weight: normal;
}
You need to learn a bit about selector specificity, here's a good article http://css-tricks.com/855-specifics-on-css-specificity/ on it.
If you change your CSS:
.gray {
color: gray;
font-weight:normal;
}
to
table#tasks td:first-child+td.gray, .gray {
color: gray;
font-weight: normal;
}
Yes, give it greater specificity
table#tasks tr td.gray