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