CSS, o Hojas de estilo en cascada, es un lenguaje de diseño que es utilizado por los desarrolladores web para crear una apariencia uniforme y visualmente agradable en varias páginas de un sitio web. HTML determina en gran medida el contenido textual, pero CSS determina la estructura visual, diseño y estética del sitio web.

La personalización de CSS solo se recomienda si tiene conocimientos avanzados de CSS. El servicio de atención al cliente no podrá ayudarte cuando estés implementando tu propio código en Brandguide.

El código se desinfectará en un esfuerzo por prevenir los ataques XSS. Tenga en cuenta que nuestros desarrolladores pueden realizar cambios en nuestro código de guía de marca en cualquier momento que tengan el potencial de afectar su CSS y HTML.

Sintaxis CSS

La sintaxis CSS consta de un conjunto de reglas. Estas reglas tienen 3 partes: un selector, una propiedad y un valor. 

Selector { propiedad: valor; }

El selector representa el elemento HTML al que desea aplicar el estilo. La propiedad hace referencia a un aspecto específico del elemento HTML, como el color, la familia de fuentes o el margen. Cada propiedad utilizada en CSS tiene un conjunto de valores aceptados, por ejemplo, un código hexadecimal o un valor de píxel.

El selector puede tener múltiples propiedades y pares de valores que están separados por puntos y comas. Por ejemplo, lo siguiente aplicará los valores dados de las propiedades a todas las etiquetas h1:

h1 { Familia tipográfica: Comic Sans; tamaño de fuente: 12px; color: azul; }

Selectores CSS comunes

Selector de tipo CSS

El selector de tipos CSS selecciona todos los elementos de un tipo específico dentro de la página web.

Aquí hay algunos ejemplos de selectores de tipos comunes:

• p: Selecciona todas las etiquetas de párrafo.
• a: Selecciona todos los hipervínculos.
• h1: Selecciona todas las etiquetas de encabezado h1.
• span: Selecciona todas las etiquetas de span.
• body: Selecciona todos los elementos del cuerpo de la página web.
• botón: Selecciona todos los botones de la página web.
• li: Selecciona todos los elementos de la lista.

Selector de clase CSS

Una clase CSS es un atributo utilizado para definir un grupo de elementos HTML. Esto permite personalizar varios elementos con un solo selector. Podemos hacerlo escribiendo un carácter de punto (.) delante del nombre de la clase en nuestro CSS. Por ejemplo, para cambiar la fuente del encabezado de ejemplo y el párrafo siguiente:

encabezado 
párrafo

Usaríamos el siguiente CSS para apuntar a todos los elementos con una clase de i-am-a-class:

.i-am-a-class { Familia tipográfica: Helvetica; }

Selector de ID de CSS

Un identificador CSS es un atributo utilizado para definir un único elemento único en una página web. Para seleccionar un elemento con un id específico, escriba un símbolo de hash (#) delante del id. Por ejemplo, para cambiar la fuente del párrafo siguiente:

párrafo

Usaríamos el siguiente CSS para apuntar solo al elemento con un id de i-am-an-id:

#i-am-an-id Familia tipográfica: Helvetica; }

Propiedades de CSS

Propiedades de texto

• Familia tipográfica: Establece la fuente de texto, p. ej. "Arial" o "Times"
• tamaño de fuente: Establece el tamaño de la fuente, p. ej. 5px o 1em
• peso de la fuente: Establece el peso de la fuente o "audacia", p. ej. "negrita" o 200
• color: Establece el color del texto, p. ej. Azul, #add8e6 o RGB(135,206,250)
• altura de línea: Espacio vertical entre líneas p. ej. 5px o 1em
• espaciado de letras: Espacio entre caracteres p.ej. 5px o 1em
• espaciado de palabras: Espacio entre palabras p.ej. 5px o 1em

Propiedades de fondo

• color de fondo: Establezca el color de fondo del elemento, p. ej. Azul, #add8e6 o RGB(135,206,250)
• imagen de fondo: Establece una imagen de fondo basada en la URL, p. ej. url('sample-image.jpg')
• posición de fondo: Establece la posición inicial de una imagen de fondo, p. ej. centro o 50%

Propiedades de espaciado

Las siguientes propiedades aceptan auto, inherit, % o cualquier unidad de longitud CSS 

• altura: Establece la altura del elemento 
• anchura: Establece el ancho del elemento 
• relleno: Establece el espacio de relleno del elemento
• margen: Establece el espacio de margen del elemento 

Longitudes y unidades

• px: Píxeles (1px = 1/96 de 1 pulgada)
• EM: En relación con el tamaño de fuente del elemento (3em = 3 veces el tamaño de la fuente actual)
• VW: Relativo al 1% del ancho de la ventana
• VH:  Relativo al 1% de la altura del mirador
• %: En relación con el elemento principal

Encontrar elementos usando Chrome DevTools

Chrome DevTools es un conjunto de herramientas de desarrollo web integradas directamente en el navegador Google Chrome. Podemos usar estas herramientas para localizar rápidamente elementos HTML y estilos CSS existentes en cualquier sitio web. 

1. Para acceder a DevTools, puede hacer clic derecho en la página y seleccionar Inspeccionar o utilice comandos cortos como Comando+Opción+C (Mac) o Control+Mayús+C (Windows, Linux, Chrome OS).

2. Una vez abierto el panel de DevTools, seleccione la herramienta Inspeccionar en la parte superior de la página.

3. A continuación, puede hacer clic en el elemento de la página que desea aplicar estilo. Los selectores que se pueden usar para personalizar este elemento se resaltarán en la pestaña Elementos. La pestaña Estilos debajo de ella revelará las reglas de estilo CSS que se aplican actualmente a ese elemento.

4. En este ejemplo, vamos a cambiar el color del enlace de navegación a #6b646b utilizando la clase nav-link que encontramos usando el inspector DevTools. También agregaremos la propiedad "!important" al final de la declaración para reemplazar todo el estilo anterior de esa propiedad en el elemento.

5. Una vez que el CSS se haya actualizado y los cambios se hayan guardado, verá que el color del texto de navegación ha cambiado a #6b646b:

Agregar fuentes de terceros

@font-face es una regla de CSS que te permite importar y utilizar fuentes de terceros en tu Brandguide. Le recomendamos que agregue su fuente a través de CSS en el nivel de configuración global (en lugar del nivel de bloque).

Puede agregar una fuente de terceros de dos maneras.

Copiar y pegar una URL

La primera opción es navegar a la biblioteca de fuentes de su elección y seleccionar la fuente que desea agregar a su guía de marca y copiar y pegar la URL. Este proceso se describe a continuación. 

Sintaxis:

Puede copiar la sintaxis a continuación y agregarla a la sección CSS personalizado de su guía de marca. Este es el único CSS que necesitará para importar la fuente. Para importar una fuente diferente, simplemente cambie la familia de fuentes, la URL de origen y el formato a la fuente elegida.

@font-face familia tipográfica: 'Satisfy'; src: formato url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2)('woff2'); }

Encontrar la URL y el formato de la fuente:

1. Navega a la biblioteca de fuentes de tu elección y selecciona la fuente que deseas agregar a tu guía de marca. En nuestro caso, seleccionaremos Satisfacer de Google Fonts.

2. Una vez seleccionada, copia y pega la URL @import en una nueva pestaña del navegador. 

3. Esto te llevará a una página que contiene la URL y el formato necesarios para importar la fuente a tu guía de marca.

4. Copie la URL de src y péguela en el código @fontface y la familia de fuentes. Luego pega el código en el cuadro CSS. Los cambios se actualizarán automáticamente. 

5. Seleccionar Actualizar CSS para guardar los cambios. 

6. La nueva fuente importada se rellenará en el menú desplegable Tipo predeterminado en el floyout Configuración global. 

Conversión de la fuente en formato WOFF o WOFF2

La segunda opción de tipografía personalizada es convertir la fuente en un formato woff o woff2. Este formato de fuente web es más compatible para los navegadores que los formatos de archivo de texto ttf/otf. Este proceso se describe a continuación. 

Fuentes propietarias 

1. Convertir la fuente en una Formato WOFF o WOFF2No. Este formato de fuente web es más compatible para los navegadores que los formatos de archivo de texto ttf/otf.

2. Sube la fuente a una sección de archivos dentro de Brandfolder. 

3. Abra el activo, vaya a la pestaña incrustar y seleccione Copiar vínculo. 

4. Desplácese hasta el control flotante de Configuración global. Puede copiar la sintaxis siguiente y agregarla a la sección CSS del floyout Configuración global. Este es el único CSS que necesitará para importar la fuente. Para importar una fuente diferente, simplemente cambie la familia de fuentes, la URL de origen y el formato a la fuente elegida. Una vez introducida la sintaxis, se guardarán los cambios.  

@font-face { font-family: 'boldweb'; src: url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. Las fuentes importadas de esta manera no mostrarán la fuente en la lista desplegable Tipografía predeterminada. En su lugar, debe aplicar manualmente la fuente dentro de la sección CSS. A continuación se muestra un ejemplo de cómo aplicar la fuente Web en negrita a las etiquetas de párrafo importadas. 

p { Familia tipográfica: 'boldweb'; color: #333; }

Adición de vídeo 

Puedes agregar un video a tu guía de marca siguiendo estos pasos: 

1. Abra el modo activo para el vídeo.
2. Navegar hasta el Incrustar pestañaNo. 
3. Busque el código de incrustación de vídeo y seleccione Copiar vínculoNo. 
4. Pega el código en el bloque HTML.