I'm frequently seeing ID and class specifications to <body> and <html> elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS?
Hi your tags were erased in your question i guess that you are talking about the <html> and <body> tags. I use this in many cases where i need to refer an specific class to change. For example i have an Interface that changes depend of the user rol some properties like background color and buttons, then i assign to the body a class or ID that changes all those things making specific variations on the CSS.
body.Administrator .container {
background-color:#000;
}
You can Check this link it's all about more control in some specific cases
http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/
The most commonly used reason to use CSS classes in a <body> or <html> tag is due to browser sniffing / modernizr.
Browser sniffing means you want to know which browser you're dealing with, so you can adapt styles by using the specific browser class it gets.
Usually this is rendered by JavaScript or PHP
so basically if you're in firefox, you could see <html class="ff ff18 gecko gecko18">
In css if you had a container, you could style that container differently by using the class in HTML.
This works because CSS cascades, so the nested elements will be children of the parent element.
therefore you can overwrite existing styles by adding new styles below them, prefixed with the class found in the <html> or <body> tag.
e.g. .ff .container {color: blue; /*will only apply to firefox*/}
Related
changed "div" tags into more semantic html tags to make a webpage more user friendly but unsure how to change CSS to make these new semantic tags inline on the webpage as well as change other styling aspects of the code. How do i make sure the right elements in my html is linked to the right css code. Sorry if im not using the terms correctly new to coding.
I tried changing the class names to the corresponding more semantic tags so that i could change the webpage style
In HTML we can link css to the html file in the header like so:
<link rel="stylesheet" href="styles.css">
Where styles.css is the stylesheet file.
On your html tags for example
<div></div>
You are able to add classes which links these tags/containers to a specific style in your style sheet.
For example In HTML:
<div class="myclass"></div>
the class "myclass" is the linker towards this in your stylesheet:
.myclass:
color: red;
the full stop signifies that you are linking this to a class in the html, you can also do this with id="myid" and using a # instead of full stop, however i prefer to keep my ID purely for scripting use and classes for styling
Read more and learn a bit more about this at w3: https://www.w3schools.com/html/html_css.asp
Html elements and class attributes are two different things. Both can be targeted using CSS.
For example:
<html>
<body>
<div class=“name-of-class”></div
</body
</html>
There are three html elements (html, body and a div). And the div has a class attribute of “name-of-class”.
You can target the elements as well as the classes with css:
body {
background-color: black;
}
.name-of-class {
width: 200px;
height: 200px;
background-color: yellow;
}
To target the elements simply write the name of the tag without brackets. And to target the element with the class add a period before name of the class.
If you change an element or class name on your HTML, make sure to update your CSS styles or file to match.
Hope this helps, if you still have doubts paste some of your code to give it a check out.
I want to preface this with the understanding that I'm aware this is sub-optimal for web design but my hands are tied.
I am working within my organization of my company to add documentation in an html format through a form field.
The html I am coding will be, essentially, inserted into the rest of the page's body and I don't have access to the style sheets or to the style tags in the header.
Right now I am embedding my css in the html but I would like to have a little bit cleaner code so, to the question at hand.
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Please let me know if more clarification is needed and thank you, before the fact, for any help!
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Multiple style tags are ok. When you have multiple style tags, the cascade rule applies, so you just need to make sure your selectors have higher specificity than the page's default style.
The second issue is of where you put the style tag. Strictly speaking, the <style> tag is supposed to go in the <head>, but in practice all browsers will apply <style> anywhere in the page. Having style in body, the page will not validate, however it will work fine.
I'm doing this, defining a <style>...</style> block within the HTML and it's working fine across the browsers I've tested (Firefox, IE10, Chrome).
What do you mean by "it's conflicting with the header of the overall page"? Is there a PHP error saying that their is an output and header can't be set (so the system seems like using ob_start/ob_flush)
Normaly following should work:
<body>
<style>
.class {
border: 1px solid #000;
}
</style>
</body>
Maybe some of the CSS given in the header using !important and make it impossible to overwrite or you just missing some attributes so it looks like you not changing anything at all.
You probaly could use this technik to load stylesheet dynamically into the header: How to create a <style> tag with Javascript
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
or you creating a style element and fill it with styles, but this will be more complex, because you have to do it completly with Javascript and at some point it sucks.. also to have it clean a extra file would be perfect solution.
I like a directoy css or stylesheets (based on the directory pattern I am following, either short terms like img, css, js or long terms like scripts, images, stylesheets) and a default.css inside. It's your decision what you call it.
I need to put an image background for the whole page. I use to do this applying the style to the body tag.
Just wondering if ss good practice to put a style to the html tag
Yea nothing wrong with it.You can put style to html tag.
Reference: http://www.w3schools.com/TAGS/tag_style.asp
http://www.w3.org/TR/REC-html40/present/styles.html#edef-STYLE
Sure. Actually, the html tag can be omitted in html5, so if you have it, you can sure use it for styling if you will. It has hardly any other purpose, so if it saves you from having to add an extra div, I think you should.
I normally add the height-property to the HTML-element, in order to make the background-image as large as possible. Don't forget to set the body's height aswell:
html {
height:100%;
}
body {
height:100%;
background:#000 url(your-image.png);
}
Yes, you can apply style to the HTML element. What's more, it doesn't even have to exist in your original HTML document (as is allowed in HTML5), e.g. this code below is fine:
<!DOCTYPE html>
<title></title>
<style>
html {
/* ... CSS properties go here ... */
}
</style>
The technical reason for this is because the <HTML> element is defined in the W3C specs as an implied element - basically user-agents must assume it is there, and all good UAs will append it to the DOM when rendering the web page.
Abu's answer, with respect, although in the context he is talking about is correct, is a misunderstanding of the question. Abu is referring to applying an inline STYLE attribute to the HTML element within the HTML document itself. I believe this question, on the other hand, is referring to using the html {} selector in an external CSS style sheet.
No its not recommended to use style tags inside HTML as styling should be taken care by CSS.
You shouls avoid it unless there requires a specific scenario where you want to dynamically set the style for some part.
But in that dynamic case also, I would recommend to create a class level style inside a CSS and then just add that class to the element while creation so that the required styles are applied.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
I have a div located on a page. The issue is that it inherits global styles form a style sheet (Stylesheet A) such as global ul and table styles however, I would like this single div not to do so. I require the div in question to only obtain its styles from another stylesheet (stylesheet B). Currently they are clashing.
Is there any way to do this without having to touch stylesheet A in any way? This is because stylesheet A controls all the major styles of my site and the site is big enough that a change is likely to break something. The div in question holds unrelated data to the site and therefore does not require stylesheet A.
I am using javascript Prototype if that helps? No Jquery please :)
What about using an iframe? is this a valid solution and how would it work?
All help is greatly appreciated.
Perhaps the easiest way to do this would be to simply figure out every style attribute that div inherits from stylesheet A, then manually override those styles with stylesheet B.
If you wanted to put the div into an iframe, that should work as well. You'd need that div to have its own HTML file, hosted on the same domain as the main page (otherwise you'll run into security issues). Link to stylesheetB in the div page, and it would work. You'd run into a few problems, though, in styling the iframe. Since you can't read CSS properties in child documents from a parent document, you'd have to make the iframe a fixed width and height, which is limiting in many scenarios. I guess you could let the iframe scroll, but that might not be want you want either.
I think the best way to do this is to use Chrome Inspect Element, or Firebug in Firefox to look at the CSS inheritances the div is receiving, then
Any repeated styles will always apply the last one read.
Suppose you have this style: .class { background-color: red; } in your stylesheet A, and this one in B: .class { background-color: blue; } .
So, if you are calling your stylesheet A before B:
<link href="sheet_a.css" rel="stylesheet" type="text/css" />
<link href="sheet_b.css" rel="stylesheet" type="text/css" />
Then the style applied will be .class { background-color: blue; }, because it's the last one the browser read.
Now, if this is not working (if your stylesheets are being called in a different order, or the style in A is more specific than the one in B, so A is still being applied), you can use the !important tag.
.class { background-color: blue !important; } will overwrite the style in A, as long as it doesn't have !important also in the original one.
If it's only one element you want to change, you don't necessarily need a new stylesheet. You can have the new style between <style></style> tags in the html head, or inline in the element ( <div style="background-color: blue;"></div> ). Inline elements have more relevance than those on external sheets.
You can use inline styles on the html structure or you can add !important on the rules that you want on stylesheet b to override styles on stylesheet a.
For example on stylesheet b you would do the following:
.element {background:red !important}