When I add such CSS into <style> tags:
* {
display:block;
}
It is never interpreted correctly. Instead, what do I see? Somehow everything inside <style> becomes the part of html body. E.g.:
* {
display:block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
This happens anywhere. For the first time, I thought this is the problem with StackSnippets. (i.e. the live demo for Stack Overflow, the one I've provided above), but then I checked with code pen. Then with jsfiddle. Then I've gone ahead and made a file on my server, giving it all contents I inserted in the snippet above.
The outcome is always the same. The CSS gets included in the html, though it is applied. (the only fix is to create a stylesheet and include it using <link>)
The most interesting thing, is, that it seem to happen only with display:*. E.g., the following works:
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
But once I put in the styles of the last snippet display:*, the styles are, again, magically included in HTML.
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
display:inline-block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
Why does it happen?
It's styling the <head> element and everything in it, including the very <style> element your CSS resides in, because the CSS appears as character data within the <style> element. A <link> element on the other hand doesn't have any content — it points to a separate resource altogether, so there is nothing inside the element itself to be displayed.
Most browsers implement <head> as display: none (and some propagate that value to every descendant), which you are able to override by targeting them with a display style. The rest of the properties are still applied to <head> and its descendants regardless of whether you do this, but without it, they simply won't show up in your page so you don't really see it happening. That's really all there is to it — there isn't anything else that's special about <head> or its related elements.
In other words, as far as CSS is concerned, the following (yes, a <style> element with a style attribute...):
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
Is no different from this:
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
Related
i am a beginner in html and css could anyone please tell me the difference between these 2 codes , i am getting the same result in both of them. i mean is there any difference between putting classes in div tag & putting them directly in h1 tag.
CODE 1
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<div class='box'>
<h1>
main text
</h1>
</div>
</body>
<html>
CODE 2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<h1 class='box'>
main text
</h1>
</body>
<html>
in both codes i get the same main text inside the box so does it mean that class in div tag is doing the same thing what class in h1 tag is doing?
does it mean that class in div tag is doing the same thing what class
in h1 tag is doing?
In this case yes, but not necessarily. The second example is better. If you want to make sure you are only applying styles to the heading, apply it to the heading, not the parent element (the div in this case). For instance, what if the div contained a P element as well? In the first example, the H1 and P elements would have a red background since the parent block-level element has a red background. In the second example, only the H1 element would have a red background.
On more complicated projects, like an existing website, there will often be existing stylesheets that you wish to override. Always apply styles to the closest element, or the exact element you wish to style. Also browsers have built in styles for common elements like headings, tables etc. Try using no CSS whatsoever and view the difference between H1 and P elements. Different browsers will apply their own styles, so a common practice is to apply a set of styles to "reset" or override the browser styles. (Another example is making a page with red background for HTML and black for BODY. Look at the browser-defined margins.)
Finally, another approach to only control the H1 element if it is inside a DIV with a class of "box" would be this CSS:
.box h1 {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
the output is both codes are the same.
but there is no technical difference just the second code is using extra div
When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.
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 have a div, and I want to change the selection style.
It works fine like this:
<div>Text text</div>
<style>
div::selection {
background: #FFF;
color: #000;
}
</style>
The problem is that I want to send it in the email, so it has to be inline code.
(<div style=""></div>)
Is there any way to do that?
The easiest way to do this is as follows. Inside the "head" tag of your email, simply include your style
<head>
<style>
div::selection {
background: #FFF;
color: #000;
}
</style>
</head>
<body>
//your email body
I should also note here that Pseudo elements, such as div::selection, are selectors, and cannot be styled inline.
Inline styles pertain to elements, not pseudo-elements, so you cannot do this with an inline style.
I'm not entirely sure which non-webmail clients support ::selection (other than Thunderbird with ::-moz-selection) anyway. But you should be able to get away with using an internal stylesheet, as you already are doing (except move the <style> element to <head> instead), depending on which clients you're supporting.
Personally I wouldn't bother with ::selection in an email at all. There's virtually no need for it, especially when you consider the poor CSS support that email clients are often known for.
I have a <style> element that applies some global styles, like A { color: red } as opposed to my stylesheet that styles A { color: green } (purely as an example).
How can I modify all of the styling in my <style> element so that are "contained" and only apply the styling to children of a parent element I specify.
A { color: red } becomes #myelem A { color: red }
.myclass { display: none; } becomes #myelem .myclass { display: none }
Would I have to find the <style> element, parse the contents, replace each selector then update the element contents with it fixed?
Is there an alternative to modifying the contents of my <style> element?
Why am I doing this? I have HTML that is stored in a database that I want to edit (this is a CMS). The HTML can contain <style> elements, and I cannot trust who writes the CSS to write it in scope. I could prevent users from using the <style> element, but I'd rather not. I have no control over the original CSS. Only what I get back in my server/clientside code.
If all else fails, I might have to load it into an iFrame... :(
Ooooooo Firefox supportes <style scoped> which only applies to the parent where the <style> element is located in the DOM. Too bad it's not supported in any other browser. :(
As you mentioned, you can use:
<style scoped>
...
</style>
Although it is only supported natively in Firefox, you can use this jQuery polyfill to get it to work in other browsers.
Use the child selector:
#yourElement > a { color: green; }
JQuery:
$( "parent_type > children_type" ).css("param","value");
example
$( "#myid > div" ).css("display","none");
here's a link
JSFiddle