# Initial page

Welcome to CSS Pro's documentation! 👋

### Learn to install it:

{% content-ref url="/pages/-MTOZ5GVzq0UbUChlEfx" %}
[Installing it](/quick-start/installing)
{% endcontent-ref %}

### Learn to use it:

{% content-ref url="/pages/-MT\_C--EvD-d7NKEuLbg" %}
[Inspecting](/inspecting/choosing-what-happens-when-you-click-on-an-element)
{% endcontent-ref %}

{% content-ref url="/pages/-MTd9P3\_hEAdFoHLGfVf" %}
[Editing](/editing/code-editor)
{% endcontent-ref %}

{% content-ref url="/pages/-MTdC8vvNxrUUCi5Qrhf" %}
[Copying](/copying/copying-css-and-html)
{% endcontent-ref %}

### If you need help with your license:

{% content-ref url="/pages/-MTn729RrWybaWNqLnqk" %}
[License](/license/managing-your-license-activations)
{% endcontent-ref %}

### What's CSS Pro?

CSS Pro is a re-imagined Devtools for web design.

[Click here to get a license key](https://gum.co/csspro).


# Installing it

How to install CSS Pro

Installing CSS Pro is easy and just takes 2 minutes or less.

To begin with this tutorial, please [purchase a license key](https://gum.co/csspro) and download the extension from the page you'll be redirected to after purchasing it, or through the link in your receipt (the email you received after buying CSS Pro) or through your [Gumroad library](https://gumroad.com/library). If you can't find it, please download the extension via the [My License](https://csspro.com/my-license) page.

Now, choose the browser you want to install it on:

{% content-ref url="/pages/-MTQdj20hOsfZZxyQ5Rq" %}
[On Google Chrome](/quick-start/installing/on-google-chrome)
{% endcontent-ref %}

{% content-ref url="/pages/-MTQeCORYHsdRFgfO\_Ou" %}
[On Firefox](/quick-start/installing/on-firefox)
{% endcontent-ref %}

{% content-ref url="/pages/-MTQeVnRl-kY\_Atgmdzn" %}
[On Safari](/quick-start/installing/on-safari)
{% endcontent-ref %}


# On Google Chrome

### How to install CSS Pro on Chrome:

To follow these steps, **you need to have purchased a CSS Pro license key**. If you don't have one yet, [**get one here**](https://gum.co/csspro?wanted=true).

{% embed url="<https://www.youtube.com/watch?v=DDbqtuHrvF8>" %}
Video tutorial
{% endembed %}

**Step 1.** **Download the extension from the link you were redirected** to after buying it or your Gumroad receipt (in your email) or [library](https://gumroad.com/library). If you can't find it, please download the extension via the [My License](https://csspro.com/my-license) page.

**Step 2.** Install the extension on your Chrome browser via Chrome Webstore.

**Step 3.** **Click on** **"Add to Chrome"** to download the extension.

![Click on the blue button "Add to Chrome" on the right side to download the extension](/files/wbtkpFB2ojltXfgswJ69)

Now that you have the extension installed, it's time to activate it with a license key, which you've got in your receipt but can also be retrieved [here](https://cssscanpro.com/my-license) if you forgot/lost it.

**Step 4. Open any website on a new tab**, for example, Google or your website (it won't activate on the "New tab" page; it has to be a website).

**Step 5.** **Right-click anywhere on the page** and **select "Inspect with CSS Pro"** on the context menu.

![](/files/SegZabKzen9E8WM4MGrg)

A modal (popup) will appear asking for the license.

**Step 6. Input your license key** and validate it by clicking on **"Activate"**:

![](/files/fqtUufqTMf2whS4GQSKq)

🎉 **Done!** Your license is now activated, and you can use CSS Pro anywhere else.

The extension will not ask for your license again (unless deactivated or disabled).

To manage your license activations in the future, use [the My License page](https://cssscanpro.com/my-license).

### 🎁 Bonus:

You can also **pin the extension on your Chrome's top bar** by **clicking on "Extensions"** (puzzle icon):

![](/files/t64fsvmq3o7RtfCAa1h4)

**Find CSS Pro and click "Pin"**:

![Click on the pin icon to pin the extension on your browser's top bar for easy access](/files/pCm7uI05dgC90frxsfdU)

Now you can just open CSS Pro by clicking on its icon on your Chrome's top bar.


# On Firefox

### How to install CSS Pro on Firefox:

To follow these steps, **you need to have purchased a CSS Pro license key**. If you don't have one yet, [**get one here**](https://gum.co/csspro?wanted=true).

{% embed url="<https://www.youtube.com/watch?v=wPaiE5baXxQ>" %}
Video tutorial
{% endembed %}

**Step 1.** **Download the Firefox extension from the link you were redirected** to after buying it or your Gumroad receipt (in your email) or [library](https://gumroad.com/library). If you can't find it, please download the extension via the [My License](https://csspro.com/my-license) page.

**Step 2.** **Drag and drop** the **"Firefox.xpi"** file **into your Firefox** browser window, and click on the button "Add" to install the add-on.

![Click on "Add"](/files/rsvWIaXHvHdw6FDrkGuq)

Now that you have the extension installed, it's time to activate it with a license key, which you've got in your receipt, but can also be retrieved [here](https://cssscanpro.com/my-license) if you forgot/lost it.

**Step 3. You're going to be redirected to a webpage. If that doesn't happen, open any website on a new tab**, for example, Google or your own website.

**Step 4.** **Click on CSS Pro's icon** on your **toolbar** to open the extension:

![](/files/PwYsMijCKOA8qA4I8icF)

A modal (popup) will appear asking for the license.

**Step 5. Input your license key** and validate it by clicking on **"Activate"**:

![](/files/fqtUufqTMf2whS4GQSKq)

🎉 **Done!** Your license is now activated, and you can use CSS Pro anywhere else.‌

The extension will not ask for your license again (unless deactivated or disabled).‌

To manage your license activations in the future, use [the My License page](https://cssscanpro.com/my-license).


# On Safari

### How to install CSS Pro on Safari:

To follow these steps, **you need to have purchased a CSS Pro license key**. If you don't have one yet, [**get one here**](https://gum.co/csspro?wanted=true).

{% embed url="<https://www.youtube.com/watch?v=vKUJWCzBV6s>" %}
Video tutorial
{% endembed %}

**Step 1.** **Download the Safari extension from the link you were redirected** to after buying it or your Gumroad receipt (in your email) or [library](https://gumroad.com/library). If you can't find it, please download the extension via the [My License](https://csspro.com/my-license) page.

**Step 2. Open the .dmg file** (named CSS Pro + version number).dmg

**Step 3.** **Drag and drop the application to your Mac's Applications folder**:

![Move the CSS Pro app to your Mac's Applications folder](/files/fEszMqXnt8vyK5vuy9zZ)

**Step 4.** L**ocate the application** via Launchpad or in your Applications folder and click to open it:

![Open the CSS Pro app](/files/SEhajuD9Avmqae2t4EVX)

**Step 5. Follow the application steps** to install CSS Pro on your Safar&#x69;**:**

![](/files/AvZdiEyFNsX4jtD0S1e4)

\
🎉 **Done!** Your license is now activated, and you can use CSS Pro anywhere else.‌

The extension will not ask for your license again (unless deactivated or disabled).‌

To manage your license activations in the future, use [the My License page](https://cssscanpro.com/my-license).


# Choosing what happens when you click on an element

CSS Pro has 3 "on click" modes regarding what happens when you click on an element: Select element, Copy code, and Pin the CSS window.

### 1. Default mode: Select element

Opens the Editor Panel which is movable throughout the screen. This mode also shows a tooltip with 5 different possible actions and shows red guidelines around the selected element:

<figure><img src="/files/1WnfOPayaOhoi8qAnd9J" alt=""><figcaption></figcaption></figure>

The tooltip options are, in order:

* **Copy to clipboard**
  * **Copy code**
    * The final result depends on your Settings. But by default, it copies the HTML and CSS code of the element, all its children, and pseudo-classes and pseudo-elements)
  * **Copy selector**
    * Copy a general and non-specific CSS selector for the current element.
    * Example: "p" or "p.some-class"
  * **Copy unique selector**
    * Copy a specific and unique CSS selector that only matches this element on the page.
    * Example: "div#rso > div:nth-child(1) > div > div > div > div:nth-child(1) > a > h3 > span"
  * **Copy HTML code**
    * Copy the element's HTML code

![](/files/3CTUsIHRavuHZalzU6ey)

* #### Edit or inspect elements' CSS

If you want to see or edit the element's CSS code. This option will hide the tooltip and only keep the Editor Panel on the screen:

![](/files/WDFqCRLyCk05Rc50237Z)

* **Export element**
  * **Export element to Codepen** (export the HTML and CSS of the element, all its children, and pseudo-classes and pseudo-elements)
  * **Save element as a file** (same as exporting the element to Codepen, but instead of sending it to Codepen, it's exported as a .html file)

![](/files/lu8jJLW7EDbGb7JVDvXN)

* **Remove element**

Completely remove the element from the DOM (locally and until you refresh the page again).

* **Cancel**

Sometimes, you click on an element by accident. This option lets you cancel the selection.

### 2. Copy code

If your goal is to copy things quickly, this is going to save you time. It's simple: click to copy. The result is the same as selecting "Copy code" on the "Select element" mode.

![](/files/2T63cwUPVowfNBZR5qJA)

### 3. Pin the CSS window

If this mode is selected, whenever you click on an element, it will pin the CSS window on the screen so you can edit it. Pinning can also be done by pressing the space bar key shortcut in any mode (the page has to be focused for the shortcut to work).

![](/files/aDEf1z9jej7lQXtUAhcB)

### Changing "On click" modes

To change modes, click on the three dots icon (More) on CSS Pro's menu, then go to Settings, and then find the section "On click," and choose one of the 3 options by clicking on it.

![](/files/MSCK9OOPyrformUh0EXn)


# Inspecting invisible, overlapping, and parent elements

Precisely re-target any DOM element using your keyboard's arrow keys (▲ up and ▼ down) to navigate the HTML tree.

Sometimes, you can't select an element only using your mouse. Maybe they're invisible, or perhaps they're hidden deeply inside the HTML.

There are 2 ways to select these complex elements with CSS Pro:

### 1. Using your keyboard arrow keys (▲ up and ▼ down)

To inspect the upper and lower elements on the DOM without moving your mouse, press the arrow keys (▲ up and ▼ down):

![](/files/QY4pEwsI5ctNT28Cs1JH)

{% hint style="info" %}
PS: The page needs to be focused for shortcuts to work - such as the arrow keys. If the page is not focused, you must click somewhere first. Or always open the extension via the shortcut. That way, the page starts focused.
{% endhint %}

### 2. Via the menu's HTML Navigator feature

You can also click on the menu's option **HTML Navigator** to visualize the website's HTML structure and all its elements.

<figure><img src="/files/ug4EAsKQO5hy4ZSm2TFN" alt=""><figcaption><p>Visualize all the elements of a website in real-time and understand the website's structure. Click to select elements and edit.</p></figcaption></figure>

Navigate the elements tree using your mouse or, even faster, use your keyboard's arrow keys ▲ up and ▼ down to navigate between elements and ► right and ◄ left to expand and collapse elements.

You can also click "Pick an element" to pick elements using your mouse. When this mode is active, as you move the mouse throughout the screen, elements will be focused/highlighted so that you can understand where they are located in the website's structure.

{% embed url="<https://youtu.be/yg0u_TA-EmQ?si=cVoMN3KFo1eX7vV-&t=9>" %}
A video showing how the HTML Elements feature work.
{% endembed %}


# Comparing multiple elements at the same time (Pinning)

To compare multiple elements at the same time, you can pin the CSS windows by **pressing the "space bar" key**. It's useful to check for differences and to edit the CSS.

It makes your compliance work easier. Pinned windows are movable all over the screen.

![Compare, edit, or inspect multiple elements at the same time.](/files/DDoVq5oEEmlfkLHE3yG2)

{% hint style="info" %}
PS: For shortcuts to work - such as the space bar key to pin, the page needs to be focused. If the page is not focused, you'll have to click somewhere first. Or always open the extension via the shortcut, that way the page starts focused.
{% endhint %}


# Measuring distances and checking alignments

CSS Pro is your new best friend to measure distances and check alignments.

There are 3 features to help you with that:

### 1. Ruler

When you want to check the alignments on your layout, or simply get a good sense of spacing from your favorite websites, you'll love our Ruler feature.

It basically measures distances between everything you see on your browser, in real-time, even if it's an image.

{% hint style="info" %}
You can easily open the Ruler by using the shortcut Option+Shift+F on Mac or Alt+Shift+F on Windows/Linux - **even if CSS Pro is not currently opened on the tab**.
{% endhint %}

Or you can also open it from the main topbar, by clicking on "Ruler".

![](/files/-MTd5koiRcMMRpNs29e0)

You can also click, drag and drop to measure in "free-style". The box that will be created is resizable and movable, which makes it even easier to use CSS Pro to measure anything on the web and finish your work faster. Use the "Delete" key to remove the box.

![](/files/-MTd5twadNSXXqF7LT29)

###

### 2. Grid

The grid settings outline all elements on the page with a red border.

To toggle it on, go to Settings > Display > Grid.

![](/files/-MTd6y0wyHZgS8fMxoeR)

This makes it easier to understand the CSS box constraints and how layouts are built.

{% hint style="info" %}
You can also set a custom keyboard shortcut to toggle Grid on your Settings.
{% endhint %}

###

### 3. Guidelines

Guidelines are enabled by default on CSS Scan Pro but can be turned off on your Settings > Display > Guidelines.

Guidelines help you understand how an element aligns with the rest of the page:

![See the horizontal and vertical red lines that goes from the element to the edge of the window](/files/-MTd7RE3rIjSj4akBBg2)

### 3. Box-model

You can visualize the CSS box-model (margin and padding) when hovering over an element / editing its `margin` or `padding` via the [Visual Editor](/editing/visual-editor).

To toggle it on, go to Settings > Display > CSS box-model.

![](/files/-Mct9LGyJKcfLz0mU46b)


# Inspecting animations

With CSS Pro, you can inspect CSS animations (@keyframes).

All animations are shown under the main code and pseudo-classes and pseudo-elements of an element (if there are any).

You can also edit the animation on the [Code editor](/editing/code-editor). It's currently not possible to edit animations on the [Visual Editor](/editing/visual-editor).

![](/files/Nu7VWkVY5kXcqUbxWxNR)


# Identifying fonts

CSS Pro shows you which font-family is being rendered (used) on the top of the CSS window:

![](/files/-MTeiQx3BxPMCYfAzO3p)

You can also click on its name to search for it on Google on a new tab.


# Code Editor (Code tab)

When the CSS window of an element is [pinned](/inspecting/comparing-multiple-elements-at-the-same-time) (by pressing the **space bar key** or by clicking on **"Edit or inspect element's CSS"** on the [Select mode](/inspecting/choosing-what-happens-when-you-click-on-an-element)), you can start editing the CSS of the specific element and see the changes in real-time:

![](/files/Hith8xsXlfx9NJCKdCS8)

You can remove/add declarations and also edit @media queries, @keyframes animations, pseudo-classes, and pseudo-elements (such as :hover, :before, etc).

It smartly suggests autocompletes for CSS properties and values, and it has checkboxes to easily toggle each declaration.

&#x20;All changes are tracked and shareable. To learn more about it, check:

{% content-ref url="/pages/-MTdBfNCTLJYCIevIXON" %}
[Handling CSS changes](/editing/handling-css-changes)
{% endcontent-ref %}

### Easily change colors

You can also easily change colors on the Code Editor. To do that, just click on the color preview to edit it:

![Tints and shades, opacity, hue, color syntaxes, color eyedropper, everything you need](/files/Lf6uwPfSIyVzbKwh0vm5)

It's a complete color picker that suggests tints and shades in real-time so that you can quickly try darker or lighter colors, and comes with an eyedropper so that you can pick any color from the screen (even if it's from an image, for example).


# Forcing a state or pseudo

When editing pseudo-classes such as :hover, you won't see the changes in real-time unless you perform that interaction (for :hover, for example, you'd have to hover over the element).

For that, you can force toggle a state or pseudo with CSS Pro by clicking on the "eye" button on the right corner of the state/pseudo:

<figure><img src="/files/guZgGE22i3Koptz0vsGw" alt=""><figcaption><p>Click on the eye to toggle the pseudo ON/OFF</p></figcaption></figure>


# Visual Editor (Design tab)

The Visual Editor is the biggest feature of CSS Pro.

With it, you can quickly and easily change things like spacing, colors, sizes, borders, text, etc... by just clicking, and get a generated CSS code for it.

It's like having WordPress-like theme builders but for the whole internet.

{% embed url="<https://youtu.be/iqDiHtpAc88>" %}
A quick demo
{% endembed %}

### Tips:

* To quickly increase and decrease values, click (and hold), then drag to the left or right side of the screen.
* You can also change values by using the keyboard arrow keys (▲ up and ▼ down), which will increase or decrease by 1.
  * Holding the Shift key will increase or decrease values by 10.
  * Holding the Alt key will increase or decrease values by 0.1.

### Available Sections and CSS Properties

1. **General**
   * `width`
   * `height`
   * `transform: rotate`
   * `border-radius`
2. **Spacing**
   * `margin-top`
   * `margin-right`
   * `margin-bottom`
   * `margin-left`
   * `padding-top`
   * `padding-right`
   * `padding-bottom`
   * `padding-left`
3. **Typography**
   * `font-family` (access to all 2,000+ Google Fonts in an instant)
   * `font-weight`
   * `font-size`
   * `color`
   * `line-height`
   * `text-align`
   * `letter-spacing`
   * `text-decoration-line`
   * `text-decoration-style`
   * `background-clip: text`
4. **Background (**[Editing backgrounds](/editing/visual-editor/editing-backgrounds))
   * `background-color`
   * `background-image`
   * `background-repeat`
   * `background-size`
   * `background-position`
5. **Display**
   * `display`
   * `opacity`
   * `flex-direction`
   * `flex-wrap`
   * `justify-content`
   * `align-items`
6. **Border**
   * `border-color`
   * `border-width`
   * `border-style`
7. **Positioning**
   * `position`
   * `top`
   * `left`
   * `right`
   * `bottom`
8. **Text shadow**
   * `text-shadow`
9. **Filters**
   * `filter`
     * `blur()`
     * `contrast()`
     * `brightness()`
     * `saturate()`
     * `invert()`
     * `grayscale()`
     * `sepia()`
10. **Box shadow**

    * `box-shadow`

With the exception of the General section, every section is expandable and collapsible.

To expand or collapse a section, click on its name or on the arrow icon on its right side.

When you pin an element, the Visual Editor will automatically collapse sections with unused CSS properties.

### Auto unit conversion

CSS Pro automatically converts units for you. Check [Auto unit conversion](/editing/visual-editor/auto-unit-conversion).


# Editing media queries and pseudo states

When editing in the Visual Editor, you can choose to edit specific media queries and/or pseudo-classes and pseudo-elements such as :hover, :before, etc.

<figure><img src="/files/q2TWpCOuQcaadn9UZEVH" alt=""><figcaption><p>Choosing a media query to edit in the Visual Editor</p></figcaption></figure>

When selecting media queries, you can choose:

* None (the default state of the element)
* Auto (the last currently matched media query - updates itself automatically depending on your browser's window size)
* Suggested (suggested breakpoints by CSS Pro) - mobile first and then desktop first
* or custom (simply type on the input to create any media query you want)

<figure><img src="/files/lmwCiVdOws3kMn7V43rr" alt=""><figcaption><p>Choosing a pseudo-class to edit in the Visual Editor</p></figcaption></figure>

When selecting state or pseudo, it shows some options for the specific element, but you simply type on the input to edit any pseudo you want.


# Editing backgrounds

CSS Pro has the most complete background editor for the web, and you'll be amazed at what you can create.

**How to use it:**

Select an element, then go to the tab "💧 Design", then scroll down to the section "Background" and either choose one of our 300+ high-quality background presets or start by clicking "Add a background layer".

Click on the layer preview (a circle) where you can choose the layer type (solid, linear-gradient, radial-gradient, conic-gradient, image, pattern, and noise).

**What you see is what you get.** Drag and adjust color stops directly over the element and easily create stunning gradients.

Hide, re-order, duplicate, blend, or delete layers with ease. It also comes with 80+ charming, pure CSS background patterns.

<figure><img src="/files/1n4ocNxuAPocWvRwYwmm" alt=""><figcaption><p>CSS Pro's background editor</p></figcaption></figure>


# Auto unit conversion

Save time by converting px to %, em, etc., and vice-versa with a single click and stop guessing numbers.

It works with any property with a unit on Visual Editor.

![](/files/KmWgoPuj9knHhWL7k0tR)


# HTML Editor (HTML tab)

With CSS Pro, you can edit an element's HTML attributes and inner HTML content.

To do that, click on the "HTML" tab:

<figure><img src="/files/BZbZGTDOzyJFZFBiMSvc" alt="" width="375"><figcaption></figcaption></figure>

You can add, edit, and remove HTML attributes on this tab.

The `src` attribute on `img` elements get a special interface that shows you a preview of the image and also lets you change that image. You can drag and drop an image there, or paste the image file, or click on the image preview to select an image from your computer.

<figure><img src="/files/yQlW87QCRNMxPYkC1MnZ" alt="" width="375"><figcaption></figcaption></figure>

The image is then converted to a base64 URL:

<figure><img src="/files/1GIN43T9TgvRjiw6EAmK" alt="" width="375"><figcaption></figcaption></figure>

You can also edit the inner HTML when the element is not a `img`.


# Handling CSS changes

All CSS changes you make using the [Code](/editing/code-editor) or [Visual](/editing/visual-editor) Editor are trackable and shareable.

That means you'll never lose your changes anymore.

You can see all the improvements you've made and easily copy or export them all.

As soon as you make your first CSS change, you'll see a bubble with a counter show up in the toolbar.

To see all the changes, click on "CSS Changes" on the toolbar:

<figure><img src="/files/O2g7atQiw2agMyHw5DWp" alt=""><figcaption></figcaption></figure>

A popup will show up:

<figure><img src="/files/SGF3fdqiKxB46jWp3NmD" alt=""><figcaption></figcaption></figure>

There are four options on the top:

* **Share changes via link**
  * Generates a unique URL link that you can share with your team or clients so that they can see the website with all your CSS changes, along with a Before/After toggle.
  * Here's an [example output](https://edits.csspro.com/e/toastlog-com-519smxcz).
* **Export changes**
  * Export all changes as a .css file
* **Reset changes**
  * Reset all changes (un-reversible). The CSS will go back to its original version.
* **Copy changes**
  * Copy all changes to the clipboard

Then each modified element is shown separately with a git diff visualizer (see which lines you removed, edited, or added), and you have two options:

* Copy changes only (copy only the changes to the clipboard)
* Copy new code (copies all the CSS code for that element to the clipboard)


# Editing texts

To edit an element's text:

**Step 1.** Click on it to select it ([Select mode](/inspecting/choosing-what-happens-when-you-click-on-an-element))

**Step 2.** Type anything and see the changes in real-time.

![](/files/-MTeYO9CbM_gkw7kB_Zi)

**🎉 Done!**

{% hint style="info" %}
Text edits don't persist through a refresh, so whenever you refresh the page, the changes are lost.
{% endhint %}


# Removing elements

To remove an element:

**Step 1.** Click on it to select it (on [Select mode](/inspecting/choosing-what-happens-when-you-click-on-an-element))

**Step 2.** Click on "Remove element"

![](/files/-MTeYRAIjFZTQGGAaLeB)

**🎉 Done!**

{% hint style="info" %}
Removing elements is currently an unreversible action. The only way to bring it back is by refreshing the page.

Removals don't persist through a refresh, so elements re-appear whenever you refresh the page.
{% endhint %}


# 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:

![](/files/zOa3onRk30C8h64wTQNl)

### 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:

![](/files/CkHFx53rinSzI3ck94gA)

### 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="/files/FFsKogwIn4UONBAaV9R5" 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)

![](/files/OcaW261B9Ici0fbGCbvi)


# Exporting elements

With CSS Pro, you can copy/export the HTML and CSS of not only the element you select but also of ALL its children. That means you can export hundreds or even thousands of elements in a single time.

You can share these web elements (as files or Codepen snippets) with your team or keep them on your desktop and start your folder of beautiful elements that you can use on your projects from today on.

There are 2 ways to export elements:

* On a [pinned CSS window](/inspecting/comparing-multiple-elements-at-the-same-time), click on "Export element"
* On [Select mode](/inspecting/choosing-what-happens-when-you-click-on-an-element), click on "Export Element"

![](/files/-MTeYnzV2-MILKvCN6OM)

When you export elements, no matter what settings you're using, it will export:

* the outer HTML of the element
* the CSS of the element
  * with pseudo-codes and pseudo-elements
* the CSS of all its children
  * with pseudo-codes and pseudo-elements
* all CSS variables

It does listen to your settings about one thing: if you want pseudo-classes and pseudo-elements to be copied as nested (for SASS/LESS), so if you export it to Codepen, it will already choose SCSS as the preprocessor.

{% hint style="info" %}
If you use Elementor, for example, you can also add these exported elements as an "HTML widget".
{% endhint %}


# Downloading page assets (images)

You know when you want to save a picture but there's no option to "Save Image As"?

That's because the picture is in the background, then you'll have to dig the code to find it.

Well, no more.

Easily download any image from a website without having to dig the code.

CSS Pro gathers all images for you by analyzing background images, \<img> tags, svgs, og-images, favicons, and even HTML attributes.

### How to see and download the assets of a website

**Step 1.** With CSS Pro opened, click on "Assets" on the menu

#### To download all assets:

**Step 2.** Click on "Save All" at the top of the Assets window

#### To download a specific asset:

**Step 2.** Find the asset you want to download and hover over it

**Step 3.** Click on "Save"

![](/files/FDxSI18gENimqtKPP2Sb)


# Copying colors

Apart from copying colors from the CSS code of the elements when inspecting with CSS Pro, there are also 2 big features you can use to copy colors from websites:

### Color eyedropper

Fell in love with a color you saw somewhere? Use Pro's color eyedropper - it works even if it's an image.

Point and click to get the color you're seeing.

{% hint style="info" %}
You can easily open the Color Eyedropper by using the shortcut Option+Shift+E on Mac or Alt+Shift+E on Windows/Linux - **even if CSS Pro is currently not opened on the tab**.
{% endhint %}

Or you can also open it by clicking on "Color eyedropper" on the top bar.

It's simple: just hover your mouse over the color you want to copy, and click on it.

![](/files/D03lCQeVBimVotVgmjQP)

### Color Palette

Analyze the entire palette of colors from a website in a second. Find the color you like, and just click on it to get its syntax.

Open it by clicking on "Color Palette" on the top bar.

![](/files/MHHojIEUk0uw8u3uL6uz)


# Managing your license activations

On CSS Pro, each license is limited to 3 simultaneous activations.

Activations are by browser and account (not by machine).

### Three simultaneous activations examples:

* You use Chrome (only one Google account logged in), Firefox, and Safari
* You use Chrome with 3 different Google accounts logged in
* You use only one browser and account on 3 different machines

You can always manage your activations anytime on the [My License](https://cssscanpro.com/my-license) page:

![How it looks when you're managing your license on the My License page.](/files/dZd2q1LoHuQSD7AuuYPH)

[Click here to manage your activations](https://cssscanpro.com/my-license).


# Retrieving your license key (forgot)

Let's fix this.

**Step 1**. Visit the [My License](https://cssscanpro.com/my-license) page.

**Step 2.** Click on "**Lost my license**" (below the button "Manage my activations")

**Step 3.** Input the email address you've used to buy CSS Pro

**Step 4.** Click on "Send me my license"

**Step 5.** Check your email for the license key (could also be in the Spam folder).

**🎉 Done!**

Still having issues? [Click here to contact us](https://cssscanpro.com/contact/).


# Switching from the monthly to the annual plan

**Step 1.** Go to your [Gumroad Library](https://gumroad.com/library)

**Step 2.** Find CSS Pro and click on it

**Step 3.** On the left side, click on "Membership", then "Manage"

**Step 4.** Select the desired duration of your subscription:

![](/files/0qHaYwGyzGciGZhLd4zS)

**Step 5.** Click on "Update membership"

**🎉 Done!**

Still having issues? [Click here to contact us](https://cssscanpro.com/contact/).


# Canceling your subscription

**Step 1.** Go to your [Gumroad Library](https://gumroad.com/library)

**Step 2.** Find CSS Pro and click on it

**Step 3.** On the left side, click on "Membership", then "Manage"

**Step 4.** Click on "Cancel membership" (at the end)

**🎉 Done!**

Still having issues? [Click here to contact us](https://cssscanpro.com/contact/).