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**](http://codepen.io/l-emi/pen/dMQQyY)
and [**the main code**](http://codepen.io/l-emi/pen/QNZevb) (trying to add the carousel underneath the about sections).

Answer: 
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**](http://sass-lang.com/) or [**LESS**](http://lesscss.org/)

**References:**

For further reading you may take a look at :

* [The answer to **Nesting CSS
classes** question on Stackoverflow](https://stackoverflow.com/a/4564922/3669624)
* [**Nested selectors: the inception rule**](http://thesassway.com/beginner/the-inception-rule)
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](http://www.w3schools.com/css/css_syntax.asp) Does that answer your question?