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.

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="" 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í:

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:

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.

MANUEL

octubre 18, 2021 a las 11:24 am

Excelente aporte. Me ha servido para mi web

parzibyte
octubre 18, 2021 a las 12:07 pm

Me agrada que haya funcionado.
Saludos!

fabian

mayo 3, 2021 a las 2:31 pm

BROTHER ECXELENTE AYUDA, VARIAS HORAS DE TRABAJO MENOS

david

noviembre 22, 2020 a las 12:37 pm

Muy bueno, muchas gracias.

parzibyte
noviembre 22, 2020 a las 2:31 pm

A la orden 🙂
Le invito a compartir el post y suscribirse
Saludos 🙂

Extraer CSS utilizado en una página con CSS Used

Introducción

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

Ejemplo de extracción de CSS

Encantado de ayudarte

No te pierdas ninguno de mis posts

Me gusta esto:

5 comentarios en “Extraer CSS utilizado en una página con CSS Used”

Dejar un comentario Cancelar respuesta

Introducción

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

Ejemplo de extracción de CSS

Encantado de ayudarte

No te pierdas ninguno de mis posts

Comparte esto:

Me gusta esto:

5 comentarios en “Extraer CSS utilizado en una página con CSS Used”

Dejar un comentario Cancelar respuesta