# Copying CSS and HTML

### Copying child elements' CSS:

With CSS Pro, you can copy the CSS of the selected element and all its child elements. This can be turned on and off anytime at More > Settings > Child elements' CSS:

![](https://4099068609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MRSyVu0mdmCYd_OgGIo%2Fuploads%2Fyzz1pF7HnxatFQCmT4K9%2FCleanShot%202023-10-09%20at%2015.22.18%402x.png?alt=media\&token=f4eb258e-4052-48e8-b306-cc1d8c6330dd)

### Copying pseudo-classes pseudo-elements and media queries styles:

CSS Pro automatically copies all pseudo-classes such as `:hover`, `:active`, `:focus`, etc, and pseudo-elements such as: `:before`, `:after`, etc, **along with all media queries** automatically.

### Copying CSS variables:

CSS Pro automatically copies all CSS variables.

### HTML Code:

It's also possible to copy HTML code along with the CSS:

![](https://4099068609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MRSyVu0mdmCYd_OgGIo%2Fuploads%2FJlKF9KPhuaUGVYyUWGrn%2FCleanShot%202023-10-09%20at%2015.24.22%402x.png?alt=media\&token=d679d7d5-2932-4965-999b-8041e27fa448)

### Copying preferences for CSS selectors

**Copy original selectors**: CSS Pro will try its best to copy the selectors in their original form (removing invalid parts of it when necessary).

**Smartly generate selectors**: CSS Pro will generate a unique selector for every CSS. This generates a bigger output, but it's specific and won't cause conflict with your current CSS.

<figure><img src="https://4099068609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MRSyVu0mdmCYd_OgGIo%2Fuploads%2FMlwhdlioquk5F4Bdilj3%2FCleanShot%202023-10-09%20at%2015.29.18%402x.png?alt=media&#x26;token=0c41f6f0-ebb3-4eab-923d-82b622dc21e7" alt=""><figcaption></figcaption></figure>

### Other copying preferences:

* **Convert font-size measurement units to px**
  * If the CSS property `font-size` is declared on the element, will always be rendered in pixels.
* **Ignore box-sizing**
  * Ignores the CSS property `box-sizing` (don't show it when inspecting elements, even if it's declared)
* **Ignore browser vendor prefixes**
  * Ignores browser vendor prefixes such as (`-webkit-`, `-moz-`, `-ms-`, etc) (don't show it when inspecting elements, even if it's declared)
* **Ignore inherited properties**
  * Ignores inherited CSS properties (such as `font-family`, `font-size`, `color`, etc)
* **Convert relative URLs to absolute**
  * Converts all relative URLs to absolute in the CSS.
  * Example: "`background: url(../assets/img.jpg)`" turns into "`background: url(https://yourwebsite.com/assets/img.jpg)`"
* **Nest pseudo-classes, pseudo-elements, and media queries (for SASS/LESS)**
  * If you use CSS pre-processors like *SASS* and *LESS*, this can copy the code with the pseudo-classes, pseudo-elements, and media queries as "nested".
* **Don't copy CSS selectors when possible**
  * If the copied code is simple (without child elements and without HTML code), it won't copy the CSS selectors.
* **Copy fonts**
  * Copies the website's custom fonts imports (`@font-face` declarations with their URLs)

![](https://4099068609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MRSyVu0mdmCYd_OgGIo%2Fuploads%2FBGTnhD6C4kDWnMbidVwC%2FCleanShot%202023-10-09%20at%2015.25.22%402x.png?alt=media\&token=c6f7259d-4ecd-469d-8091-bebdb069aa92)