Let's say I have this in my CSS:
div {
margin: 0;
overflow: auto;
padding: 1%;
text-align: center;
word-wrap: break-word;
}
That should be the default code for all div. But what if I have another div with a code that contradicts this default:
div.a {
background-color: #ffffff;
border: 2px solid;
text-align: left;
}
As you can see, there's no contradiction with the background-color or border, but there is a contradiction in that this div is text-align: left whereas the default is text-align: center. I've actually used this code with html pages and have found no problems with browsers interpreting it. But I'm wondering if it's still bad practice or could lead to problems down the road.
Contradiction isn't possible in style sheets - selectors are either more specific (and so override less specific selectors) or just come later and so override the previous selector's rules.
In your example the div.a selector is more specific as it selects by class and not just the tag name. This means it doesn't matter if your div.a rule comes before or after the div rules, the div.a rules will always apply because they are more specific.
The specificity rules may seem complex at first but you get used to them pretty quick.
https://css-tricks.com/specifics-on-css-specificity/
Related
In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
I have some table cells that I want to set a height for. It works exactly like it should when I set the height directly on the element:
<td class="row-separator" style="height: 5px;"></td>
But when I try to do it from the CSS at the top of my page it doesn't work:
td.row-separator {
height: 5px;
border-left: 0;
border-right: 0;
background-color: grey;
}
All the other CSS properties are applied, but not the height. This happens in both Firefox and IE. What could be causing this?
There must be other CSS that affects the height of the td, too. Since inline styles (those declared in the style attribute directly on the HTML element) are meant to override any external definitions, it might apply due to that. You can easily check that in the inspector of your webbrowser.
See these two examples:
#box p {
font-size: 32px;
}
p.some-text {
font-size: 16px;
}
<div id="box">
<p class="some-text">This is 32px because #box makes the selector way more specific than p.some-text</p>
<p class="some-text" style="font-size: 16px;">Inline styles have the highest specificity and can only be overwritten using !important (which you should not)</p>
</div>
(Hint, even though your code does not have it: This example also demonstrates why you should not make use of #id selectors in your CSS.)
To learn more about CSS "prioritization" (which is called specificity), you can start here:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.
Example
<div id="example" article class="example1 example2 example3">
Here's the div.
</div>
Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.
The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.
Thanks again!
What you're asking about is the order of precedence of applying CSS rules. Simplified:
It does not matter in which order you specify the classes on an element (class="foo bar baz").
It does matter in which order you write the CSS declarations in your CSS file.
foo { ... }
bar { ... }
baz { ... }
Later rules override earlier rules.
You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.
Example:
<div class="baz bar foo">
.foo {
color: blue;
border: 1px solid green;
}
.bar {
color: black;
border-color: orange;
}
.baz {
color: red;
margin: 10em;
}
Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:
color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz
(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)
I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.
I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.
How do I mark the style of C as the strongest?
Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.
Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
div.a, div.b {
background-color: #00f;
}
div.c {
background-color: #f00 !important;
}
The !important will up priority of rule and inheritance will be ignored.
div.a, div.b, div.c {
background-color: #00f;
}
div.c {
background-color: #f00;
}
should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example
body div.c {
background-color: #f00;
}
!important should work just fine, but if not you can chain your classes in your declaration like so:
div.a.c,div.b.c,div.a.b.c
{
color:red
}
I want to know the order of loading the CSS files in a HTML page.
My actual requirement is like this: I have more than 10 CSS files in my application.
I am importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files.
In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.
Can anyone know which one will take higher priority or which one loads first ?
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
Read all about it # http://www.w3.org/TR/CSS2/cascade.html
CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
So
div.sample { background: none; width: 200px }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 400px }
You can also use the '!important' addin to make rules take precedence over other defined rules.
So
div.sample { background: none; width: 200px !important }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 200px !important }
Note: Many people will advise against using the '!important' addin in your CSS files. Personally, I see nothing wrong with it.
Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important; are an exception. Part of the problem is that you have 10 style-sheets.