Separate a piece of code from another

Question

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).

Answer 1

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

Answer 2

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?

Answer 3

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!