I have an html-document that is generated by an application. I want to indent everything in this document except the h2 headers. I've been playing around with the css :not selector but I can't quite get it to work the way I want.
Here is the css that I came up with and the jsfiddle that I've been using for testing: http://jsfiddle.net/xm71wr2a/
body :not(h2){
margin-left: 20px
}
As you can see in the jsfiddle the p and the div are properly indented but the text between them is not. Is it possible to apply the indentation to that as well, or do I have to modify the html to achieve this? I have access to the application's source code so I can edit the output that it generates but I'd rather solve this using css if possible.
Well you should give the not indented text a tag. It doesn't matter what tag, just not an H2-tag. CSS style will not apply without the text having a tag.
<h2>Not indented</h2>
<p>THIS SHOULD BE INDENTED</p>
<p>THIS SHOULD BE INDENTED</p>
<div>THIS SHOULD BE INDENTED</div>
<h2>Not indented</h2>
http://jsfiddle.net/xm71wr2a/1/
easy mistake to make, you just added an extra space between body: and not
it should be:
body:not(h2){
margin-left: 20px;
}
to elaborate on the previous answer, html text content like yours without at least a <p> tag will be very limited in its mutability from your css file especially when that is your only resource to manipulate that content.
wrapping the content you want indented in a <p> tag and leaving the <h2> tags around the content you don't want to indent will create the separation between the two, and allow you to manipulate them individually with css.
alternatively, a way to select ALL elements of a html page and apply the same css effect to them would be using the * selector:
*:not(h2){
margin-left: 20px
}
* = all html DOM elements
Related
I noticed the neat property of text which is nested inside a code tag - it adapts to its containing div, which means it automatically breaks into a new line if the screen size is reduced, so I wanted to recreate its properties in a class and apply this class to <span> that would basically behave the same as a <code> tag. However, I didn't manage to fully mimic its behaviour, so I temporarily solved the problem regarding the styling of my product by wrapping my text with a <code> tag anyway and changing the font its size.
I've been searching all over the internet and I cannot find the source code for the styling which affects text encapsulated inside a <code> tag and would very much appreciate if someone, who has found (or created) what I couldn't, could post the css properties of a class that needs to be added to a <span> for its text to behave exactly the same as if it was inside a a <code> tag.
You can mimic the whitespace bevaviour of code or pre with this CSS definition:
.codestyle {
white-space: pre;
}
I have a page where I am reading an HTML from email.
Sometimes, the text which comes from the email has HTML and CSS and it changes my page style completely.
I don’t want my page style to be impacted because of this. How do I read the HTML and CSS strictly inside a particular div (box) and not let the page get impacted by this?
you have to write your css using some parent > child format. You might have to use !important.
May be you are using some kind of common selectors like "a", "p", "div". In these cases we can prevent the overriding by using parent class/id or with "!important.". I will not recommend the second one.
Ex. using parent className:
.parent-classname p{
/*style here*/
}
put that div in iframe so it behave like a seperate window so your html content not effected by loadded css.
You can use <iframe></iframe> tag instead of the <div></div>. Using Parent>Child Css format will also help make your styles more unique and protect them from being overridden.
Basically, I'm looking for the cleanest way to modify the styling of some text that i have in the application views without having to reprogram them.
I have a lot of section that does not have any tag (text without tag in the view).
Is there a way to apply styling to that specific text? (Solution for the short term, before I redefine correctly the tags in the while views)
Except for a small number of narrowly defined places, you can't apply CSS to anything other than an element.
So: No, there isn't.
You cannot add style to a something that doesn't have an element. A simple div tag can change that, and its a really easy and quick fix. Just div a section, give it an id or class, then modify it using css.
if you want to modify the first line you could use:
p:first-line {
font-weight: 700;
color: green;
}
otherwise you'll have to wrap the text in a tag. Other psuedo elements you could use are here: http://www.w3schools.com/css/css_pseudo_elements.asp
I'm looking for a CSS tag that can provide an id for text. I want to be able to modify the text with javascript, so i need something like:
<texttag id="the_id">the text</texttag>
All the other tags i've tried affect the formatting one way or another. For example it would be used in a sentence, such as:
You live in <texttag id="town_id">Newmarket</texttag>. Thats a nice town.
And it would display as:
You live in Newmarket. Thats a nice town.
But I would have the ability to modify Newmarket with the id town_id ..
See what i mean? If I use <p> or <div> the text wraps..
The <span> HTML tag has a display of inline and has no presentational nor semantic meaning attached to it. You can use CSS to apply whatever styles you'd like or script to modify the element's contents.
This sentence has <span id="whatever">text</span>.
To change contents:
docuent.getElementById('whatever').innerHTML('changed text');
To style that specific element:
#whatever { font-weight:bold; }
Also, you may want to read about the difference between block and inline elements. (And an expanded explanation here.) (<p> and <div> are block; <span> is inline.)
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).