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;
}
Related
My style-sheet looks like this:
.caption {
max-width: 100%;
padding: 5px;
}
.caption-text {
font-size: 0.8em;
font-style: italic;
text-align: center;
}
.caption .caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
I want to select two classes:
".caption-text" and ".caption .caption-text"
How do I write the HTML to select the (third) class ".caption .caption-text" without it selecting the (first two) classes ".caption" AND ".caption-text"?
The original HTML I had was:
<p id="caption-attachment-1711" class="caption-text">...</p>
So it doesn't refer to ".caption .caption-text" but that's selected using a unique id created by CMS. I need to write the HTML without using id!
If you want an additional style when both classes are put together, don't use a space between it:
.caption.caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
But it's important to highlight that an HTML element with the both classes applied (i.e. <p class="caption caption-text">...</p>) will match the individual classes too. So, all styles of .caption, .caption-text and .caption.caption-text will be applied.
So, lets be clear: It's the way multiple classes are applied to HTML elements. There's nothing you can do at the HTML side to avoid it.
So, if you really don't want the styles of .caption and .caption-text applied, the most obvious and clean approach is to create a third class not related with the first ones, applying just it:
.third-class {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
<p class="third-class">...</p>
But if you're fanatic about your actual class names, it's possible to do some tricks with :not pseudo-class to avoid styles of the first class if the second is present, and vice versa:
.caption:not(.caption-text) {
max-width: 100%;
padding: 5px;
}
.caption-text:not(.caption) {
font-size: 0.8em;
font-style: italic;
text-align: center;
}
.caption.caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
This way, you can have three different behaviors:
Apply only .caption, the element will have max-width: 100% and the padding: 5px styles.
Apply only .caption-text, the element will have font-size: 0.8em, font-style: italic and text-align: center styles.
Apply .caption and .caption-text together, the element will have margin: 0.8075em 0.5em and line-height: 1.4 but not the other styles.
But I personally think that a third class not related with the first two ones is by far the best option. Much more readable, clean and maintenable.
If you want to keep the name of third class as .Caption and .Caption-text and these does not affect the other two classes above it, then you can apply this:
Change the name of the third class which is .caption .caption-text to
<p class="new caption caption-text><p>
Css for third class:
.new {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
Also, if you want to select two classes at the same time, please use .caption, .caption-text in css as:
.caption, .caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
If you want something else, please let me know.
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'm trying to convert this css to use an attribute "starts-with" selector because I have several anchor elements with id attributes that start off with the same value...
a#cta_button_127944_79d30f48-4e68-43c8-949d-a9734a713b32,
a#cta_button_127944_40183a15-c491-4389-b5a8-4cdf099f6003,
a#cta_button_127944_4acbc01a-9116-4540-9bc4-196052464441,
a#cta_button_127944_dc0b71c9-f602-43ac-a318-d18811217e4b
{
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Here is my wildcard..
a[id^="cta_button_127944"] {
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Individual selectors work perfectly. The attribute "starts-with" selector is not getting picked up.
Thanks!
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.
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.