Extraer CSS utilizado en una página con CSS Used

Introducción

¿No te ha pasado que a veces ves un botón y quieres extraer su estilo? pero sólo el estilo del botón, no todo el archivo de estilos CSS. O simplemente quieres extraer CSS utilizado en una página web o sitio de internet.

Pues bien, hoy veremos cómo extraer el estilo CSS de un componente de cualquier página. Así, si sólo quieres el estilo de determinado botón, div o link, podrás extraerlo y pegarlo directamente en otro sitio.

Cómo extraer CSS utilizado en una página web o sitio de internet

Veamos entonces cómo ver o extraer los estilos usados en una página web. No pienses que sólo vamos a copiar la hoja de estilos.

De una vez te digo que necesitarás el poderoso navegador Google Chrome, ya que lo que extrae el CSS es una extensión del mismo.

La extensión se llama CSS Used y puedes descargarla completamente gratis. Una vez instalada abres la consola de depuración con F12, seleccionas el elemento que deseas y la extensión se encargará de decirte los estilos.

Ejemplo de extracción de CSS

En este caso copiaré el estilo del botón de descarga de Google Chrome. Vamos al sitio en cuestión y abrimos la consola de depuración con F12 o CTRL + SHIFT + I

Seleccionamos la pestaña Elements y luego el icono del puntero:

Inspeccionar elemento para extraer CSS utilizado en una página web

El puntero se pondrá de un color distinto cada que lo pongamos sobre un elemento. Vamos a seleccionar el botón, así:

Seleccionar botón para extraer CSS utilizado en una página web

(también podíamos hacer click derecho y luego seleccionar Inspeccionar elemento)

A la derecha vas a ver que se muestra el código HTML del botón. Dale click derecho y selecciona Copy > Copy outerHTML.

Copiar el código HTML

Luego pégalo en un lugar seguro, por ejemplo en mi caso este es el código:

<button type="button" class="button js-download chr-hero__download-link show" id="js-download-hero" data-g-event="cta" data-g-action-xhr="#" data-g-label="download-tiffany">Descargar Chrome</button>

Ya tenemos el elemento con las clases y atributos necesarios. Ahora vamos a extraer el estilo. Ve a la pestaña de CSS Used:

Seleccionar CSS Used para extraer css de una página web

Ahí espera a que se “traverse” el HTML y al final verás algo así:

Copiar estilos

Ese es el estilo que se encarga de darle forma al botón. Puedes presionar el botón Copy to Clipboard o copiarlo con Click derecho y Copiar, o CTRL + C, como quieras.

Ahora sí ya tenemos el estilo y el elemento. Vamos a crear un documento HTML para juntar todo. Quedaría así:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ejemplo de extracción de CSS</title>
 <style>
  /*! CSS Used from: https://www.google.com/chrome/static/css/main.min.css */button{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}
button{overflow:visible;}
button{text-transform:none;}
button,html [type="button"]{-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring{outline:1px dotted ButtonText;}
.chr-hero__download-link{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:"Roboto",sans-serif;font-weight:normal;}
.chr-hero__download-link{font-weight:500;}
.chr-hero__download-link{font-size:.875rem;line-height:1.25rem;color:#3367d6;}
@media only screen and (min-width: 1025px){
.chr-hero__download-link{font-size:1rem;line-height:1.375rem;}
}
.chr-hero__download-link{text-transform:uppercase;}
.chr-hero__download-link{background-color:#3367d6;color:#fff;cursor:pointer;display:block;}
.chr-hero__download-link:hover,.chr-hero__download-link:active,.chr-hero__download-link:focus{background-color:#4285f4;}
.chr-hero__download-link{border-radius:2px;}
*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;}
button{background:transparent;border:0;border-radius:0;padding:0;}
.chr-hero__download-link{height:46px;margin:20px auto 0;padding:0 24px;}
@media only screen and (min-width: 1025px){
.chr-hero__download-link{height:48px;}
}
@media only screen and (min-width: 1025px){
.home .chr-hero__download-link{margin:26px auto 0;}
}
/*! CSS Used fontfaces */@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
 </style>
</head>
<body>
 <button type="button" class="button js-download chr-hero__download-link show" >Descargar Chrome</button>
</body>
</html>

Como ves, el estilo fue pegado dentro de la etiqueta <head>. Y el elemento dentro del body, le dejamos las clases (button js-download, etcétera) y también el tipo (button) pero removimos las etiquetas data-*

Ahora sí es hora de probar, si abrimos el documento html vemos esto:

Botón clonado

Y de hecho lo podemos modificar. En mi caso le pondré la dirección de este blog:

Clonar y modificar. Extraer css utilizado en página

Y todo eso sin tener que copiar toda la hoja de estilos. Lo mismo podemos hacer con un link, una imagen, un div, o incluso con todo el body.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente API de shink.me con PHP »

Anterior « Cambiar título de página cuando el usuario cambia de pestaña

Ver comentarios

MANUEL dice:

octubre 18, 2021 en 11:24 am

Excelente aporte. Me ha servido para mi web
- parzibyte dice:
  
  octubre 18, 2021 en 12:07 pm
  
  Me agrada que haya funcionado.
  Saludos!
fabian dice:

mayo 3, 2021 en 2:31 pm

BROTHER ECXELENTE AYUDA, VARIAS HORAS DE TRABAJO MENOS
david dice:

noviembre 22, 2020 en 12:37 pm

Muy bueno, muchas gracias.
- parzibyte dice:
  
  noviembre 22, 2020 en 2:31 pm
  
  A la orden :)
  Le invito a compartir el post y suscribirse
  Saludos :)