inheriting from another css class - html

I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}

You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!

If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...

Related

CSS - Class not registering when combined with bootstrap

I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.

Style that I apply to an element doesn't apply to elements nested inside?

Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/

CSS: Should I use a mixin or a class?

I am using the boostrap CSS framework for one of my personal projects.
By default all the col- classes have a padding on both sides.
Which is good for some components.
But there are places where I don't want this extra padding.
So I usually just take a unique class (say containerName) being used to style that element and then-
.containerName {
padding-right: 0;
padding-left: 0;
//and whatever other css is required
}
I don't want to keep writing this again and again. So I decided to write a simple mixin just for that.
%removePadding {
padding-right: 0;
padding-left: 0;
}
and then use extend on .containerName
.containerName {
#extend %removePadding;
//and whatever other css is required
}
Is this an overkill?
Should I just add another class to those elements which has these two rules?
What is the best way to handle this?
I think you should use ".removePadding" as a class, once. Because in any case, you need to check which divs you want the padding, and which divs you don't. So if you just add ".removePadding" class to your div, right after your col-... class, you will have the same control, and more important than that, you won't be expanding your CSS file. And on the other hand, you can unterstand what is going on just by looking at your HTML file. Like common ".clearfix" classes.
Add this CSS rule (.removePadding class) after the bootstrap styles, to override them.

!imporant equivalent for HTML class tag?

I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css

How to stop Injected HTML-div / CSS from inheriting styles ? (Internet Explorer)

I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.
This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.
I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?
If this is the case, is there any way of stopping this?
There are (at least) two means of doing this1, but they're both a little messy.
Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).
Use increased specificity to target the inserted html elements.
body {
/* targets the 'body', and these styles are inherited by its descendant elements */
}
body div {
/* targets all divs that are contained within the 'body' element */
}
body > div {
/* targets only divs that are directly contained within the body element */
/* and these styles will/may be inherited by the children of these divs */
}
The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:
.insertedDiv {
/* this will apply to all elements of class 'insertedDiv', but may be overridden */
/* by a more specific id-based selector such as '#container > .insertedDiv' */
But I can only think of these two at the moment.
CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.
You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.
You should start with a css reset stylesheet. But it has to be modified to only affect your html. So if you wrap your html in a div with a id like "23d4o829" you can use edit each rule in your reset style sheet so it only affects html that is within that div.
For example,
html, body { /* some stuff */ }
table { /* more stuff */ }
becomes
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
and so on. After that, you can have all the css rules you need to control your appearance.
EDIT: I think using iFrames as mentioned by David Thomas is better.