Separate a piece of code from another - html

I don't know if this will make sense and excuse me for the bad terminology (just started learning) but what I'm trying to do is keep a piece of code separate from another so its tags don't affect the code I don't want to be affected.
I changed up some code in codepen to make a carousel for a page. I typed up the page code in another project. I tried importing that carousel code into the main page's code, but as some tags from the carousel code are the same as the main page's, it isn't laid out as I want it to be as it's interfering. I would change the tags, but they're "universal" ones such as img or a.
Is there a way of separating that CSS code from the main code? Like assigning it a separate div and applying that div to the container for the carousel in the HTML?
Here's the carousel
and the main code (trying to add the carousel underneath the about sections).

Well it is very simple, the best approach in styling with CSS is to:
Never apply styles to HTML tags directly because this will affect all the pages where your style is included, so it would be better to:
Use classes and ids to style some specific elements in your pages, this way including your css in the page will only affect these specific elements:
#myElementId{
...
...
}
.myElementsClass{
...
...
}
Note:
Use id for a unique element in the page and a class for more than one elements in your page.
Nested CSS classes:
To answer your question about using nested classes, you can't do it with CSS only, you should use SASS or LESS
References:
For further reading you may take a look at :
The answer to Nesting CSS
classes question on Stackoverflow
Nested selectors: the inception rule

This is called CSS conflicts, you better never apply much styling attributes on tags directly, use namespace with your classes, like-
If you want to apply/change predefined attributes classes, then you can define classes like-
// same classes with a parent Css class,
// to show it's effects only for that partcular section
.home .carousel{
// your css goes code here
}
OR
.someOther .carousel{
// your css goes code here
}
// Then few more nested classes
OR, if you gotta define whole of bunch new classes for your project, you can do something like-
.home-carousel{
// your css goes code here
}
Hope solves your query!

In that case, you would need to create assign a class or id to the tag you want customised and in your css, identify that class or id. For example:
<div class="myheader">
<p>hello</p>
</div>
<div id="myfooter">
</div>
<style>
.myheader{
/*ur css for myheader*/
}
.myheader > p {
/*css for <p> tag in myheader class*/
color:blue !important;
}
#myfooter{
/*ur css for myfooter*/
}
p {
color:red;
}
</style>
if you noticed, class in css is identified with a . and ids are identified with a #. Classes and id can be applied to any tag you need.
Should you have overlapping css as shown above, just use an !important to specify which takes precedence.
For more info: w3s Does that answer your question?

Related

Changes in my CSS aren't showing on the webpage, how do I link the classes properly

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.

CSS : Unapply all the css code to a specific DIV (and all elements inside) :

I'm in Wordpress... And I have a Wordpress theme with lots of css files included. Don't blame me please.
I want to use the powerful plugin "Gravity Form" but the theme contains many defined form tags and it make so bad...
===> So I want to reset all css code of input,select,buton tags etc... only inside the div CLASS "gform_wrapper". ["css_Div_Iframe" in fact xD]
Any Idea ?
Do you know how to do that ? Thanks.
If I understand you correct you would like to make specific styling to a specific including the elements inside this - am I right?
If so, it may be easier for you to add a specific class to that div, like:
<div class="specific"><p>My text</p><div>
Then you can use ordinary CSS to target that specific using for instance:
<style>
div.specific {background-color:#cecece;}
.specific p {font-size:16px;}
etc ...
</style>
If you get a CSS conflict you can overrule the CSS styles by adding !important to the CSS, like this:
div.specific {background-color:#bebebe !important;}

How to prevent a HTML element from being targeted by a CSS rule?

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.

CSS scope and coding/naming guidelines

When you have a big website with lots of different pages, then lots of CSS, then big styles file (want single file to improve page load performace) one problem I see with CSS is that they don’t have scope and one style can interfere with others. One style defined in one place can affect all other styles defined after it. Let me explain my question with an example:
If I have in my CSS file
p a {
style-values-X
}
.whatever a {
style-values-Y
}
First style can inadvertently affect an Html like that
<p>
...
<div class="whatever">
...
<a href="…"> /* this will end with style-values-X + style-values-Y */
...
</div>
...
</p>
What is the way to code to avoid problems without having a CSS file for each Html page, long names for style classes…?
Is there any coding/naming guidelines document to organize/name your CSS classes?
That's why you start out general and get more specific when working with CSS. The cascading part of it becomes easy to take advantage.
CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
Also this awesome link (If you're a star wars fan) : http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

How Can I Override Style Info from a CSS Class in the Body of a Page?

So I'm working on a project that accepts HTMLs as inputs and returns them as outputs. All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute.
To better visualize things, and to see how my project is coming along, I would love to output the input HTMLs color coded to specifications I give them. It's really easy for me to modify the body of the HTML, but difficult to deal with the style sheet. All I'm looking for is something simple to override the color property of the style sheet. It can be hacky, as this is just internal code for temporary use. I just want something simple that works. Is there an easy way to override aspects of CSS classes in the body of a file?
[EDIT] I want to provide an example to better explain what I'm looking for. An example of the style sheets I have at the top of my page (that I want to override) is:
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
An example of a div whose color I'd like to change is:
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
My problem is that I can't override the color specified in the css. As you can see in the above example, I'm trying to do it in the specific style within the div, but that isn't working. [/EDIT]
Either use the style attribute to add CSS inline on your divs, e.g.:
<div style="color:red"> ... </div>
... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
... or add a <style> element in the <head> of your HTML with the CSS you need, this will take precedence over an external style sheet.
You can also add !important after your style values to override other styles on the same element.
Update
Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.
Id's are prior to classnames.
Tag attribue 'style=' is prior to CSS selectors.
!important word is prior to first two rules.
More specific CSS selectors are prior to less specific.
More specific will be applied.
for example:
.divclass .spanclass is more specific than .spanclass
.divclass.divclass is more specific than .divclass
#divId .spanclass has ID that's why it is more specific than .divClass .spanClass
<div id="someDiv" style="color:red;"> has attribute and beats #someDiv{color:blue}
style: #someDiv{color:blue!important} will be applied over attribute style="color:red"
you can test a color by writing the CSS inline like <div style="color:red";>...</div>
You can put CSS in the head of the HTML file, and it will take precedent over a class in an included style sheet.
<style>
.thing{
color: #f00;
}
</style>
Have you tried using the !important flag on the style? !important allows you to decide which style will win out. Also note !important will override inline styles as well.
#example p {
color: blue !important;
}
...
#example p {
color: red;
}
Another couple suggestions:
Add a span inside of the current. The inner most will win out. Although this could get pretty ugly.
<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>
jQuery is also an option. The jQuery library will inject the style attribute in the targeted element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").css("color", "#ff0000");
});
</script>
Hope this helps. CSS can be pretty frustrating at times.
if you can access the head add
<style>
/*...some style */
</style>
the way Hussein showed you
and the ultra hacky
<style>
</style>
in the html it will work but its ugly.
or javascript it the best way if you can use it in you case
Eli,
it is important to remember that in css specificity goes a long way. If your inline css is using the !important and isn't overriding the imported stylesheet rules then closely observe the code using a tool such as 'firebug' for firefox. It will show you the css being applied to your element. If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration.
Also remember that in general an id is more specific than a class is more specific than an element.
Hope that helps.
-Rick