How to copy all CSS style from my selected element?

[snowmanstudio]

is there any extension?

Suppose I select a Newsletter/Hero Box and want to all copy all css style used for that box.

 

[Gogol]

Inspect element. That’s how pros do it.

 

[snowmanstudio]

Inspect element. That’s how pros do it.

can you give screenshot? i inspect element and copy style but its not giving css correctly

 

[Gogol]

can you give screenshot? i inspect element and copy style but its not giving css correctly

Ofcourse not‍. Do you think I will spend on feed you? Nopes

 

[snowmanstudio]

Ofcourse not‍. Do you think I will spend on feed you? Nopes

Sorry.

 

[CPANathan]

Sorry.

Google is your best friend handsome

 

[Dopious]

Inspect element. That’s how pros do it.

Shh.. That is a potential Marketplace course with an upselling e-book on copy-n-paste.

 

[snowmanstudio]

copy > copy styles
its giving css like this

    color: #333;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Source Sans Pro","Helvetica Neue",Helvetica,Sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;

 

[Gogol]

copy > copy styles
its giving css like this

    color: #333;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Source Sans Pro","Helvetica Neue",Helvetica,Sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;

I feel bad for being mean to you the other day. But here’s the thing, the inspect element is giving you the correct css. Css is an intricate thing. The hero you see probably has more than one element inside it. You only get styles for the element that you inspected. There’s probably more css rules for the inner elements that you have not inspected yet.

When you are copying some element, you have to look into the dom structure as well as the css rules.


This will be much easier to understand if you go through the basics of how html and css works together.


If you pm me the hero box example (just a screenshot will do), I will make it for free in codepen and pm it back. Let me know if you still need help.


Edit: oh and here’s another secret. Pros don’t copy code, they copy concepts.

 

[Nahidhassan2981]

First, hover over the element you want to copy. Then, right-click on it and choose the option “Inspect”. On the left side is the HTML DOM tree, and on the right side, are the CSS styles of the selected element. Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”