CSS, ou Cascading Style Sheets, é uma linguagem de design usada por desenvolvedores web para criar uma aparência uniforme e visualmente agradável em várias páginas de um site. O HTML determina em grande parte o conteúdo textual, mas o CSS determina a estrutura visual, o layout e a estética do site.

A personalização de CSS só é recomendada se você tiver conhecimento avançado de CSS. O suporte ao cliente não poderá ajudá-lo quando você estiver implementando seu próprio código no Brandguide.

O código será higienizado em um esforço para evitar ataques XSS. Esteja ciente de que nossos desenvolvedores podem fazer alterações em nosso código Brandguide a qualquer momento que tenham o potencial de afetar seu CSS e HTML.

Sintaxe CSS

A sintaxe CSS consiste em um conjunto de regras. Essas regras têm 3 partes: um seletor, uma propriedade e um valor. 

Seletor { property: value; }

O seletor representa o elemento HTML que você deseja estilizar. A propriedade refere-se a um aspecto específico do elemento HTML, como cor, família de fontes ou margem. Toda propriedade usada em CSS tem um conjunto de valores aceitos, por exemplo, um código hexadecimal ou valor de pixel.

O seletor pode ter várias propriedades e pares de valores que são separados por ponto e vírgula. Por exemplo, o seguinte aplicará os valores fornecidos das propriedades a todas as tags h1:

h1 { font-family: comic sans; font-size: 12px; color: blue; }

Seletores CSS comuns

Seletor de tipo CSS

O seletor de tipo CSS seleciona todos os elementos de um tipo específico dentro da página da web.

Veja a seguir alguns exemplos de seletores de tipo comuns:

• p: Seleciona todas as tags de parágrafo.
• a: Seleciona todos os hiperlinks.
• h1: Seleciona todas as etiquetas de cabeçalho h1.
• span: Seleciona todas as tags span.
• body: Seleciona todos os elementos dentro do corpo da página da web.
• button: Seleciona todos os botões na página da web.
• li: Seleciona todos os itens da lista.

Seletor de classe CSS

Uma classe CSS é um atributo usado para definir um grupo de elementos HTML. Isso torna possível personalizar vários elementos usando um único seletor. Podemos fazer isso digitando um caractere de ponto (.) na frente do nome da classe em nosso CSS. Por exemplo, para alterar a fonte do cabeçalho da amostra e do parágrafo abaixo:

cabeçalho 
parágrafo

Usaremos o seguinte CSS para direcionar todos os elementos com uma classe de i-am-a-class:

.i-am-a-class { font-family: helvetica; }

Seletor de ID CSS

Um CSS id é um atributo usado para definir um único elemento exclusivo em uma página da web. Para selecionar um elemento com um id específico, digite um símbolo hash (#) na frente do id. Por exemplo, para alterar a fonte do parágrafo abaixo:

parágrafo

Usaremos o seguinte CSS para direcionar apenas o elemento com um id de i-am-an-id:

#i-am-an-id { font-family: helvetica; }

Propriedades CSS

Propriedades do texto

• font-family: define a fonte do texto, por exemplo, "Arial" ou "Times"
• font-size: define o tamanho da fonte, por exemplo, 5px ou 1em
• font-weight: define o peso da fonte ou "boldness", por exemplo, "bold" ou 200
• color: Define a cor do texto, por exemplo, azul, #add8e6 ou rgb(135,206,250)
• line-height: Espaço vertical entre linhas, por exemplo, 5px ou 1em
• letter-spacing: espaço entre caracteres, por exemplo, 5px ou 1em
• espaço de palavras: espaço entre palavras, por exemplo, 5px ou 1em

Propriedades de fundo

• cor de fundo: defina a cor de fundo do elemento, por exemplo, azul, # add8e6 ou rgb(135,206,250)
• background-image: define uma imagem de fundo com base na url, por exemplo, url('sample-image.jpg')
• posição de fundo: define a posição inicial de uma imagem de fundo, por exemplo, centro ou 50%

Propriedades de espaçamento

As seguintes propriedades aceitam auto, inherit, % ou qualquer unidade de comprimento CSS 

• height: Define a altura do elemento 
• width: Define a largura do elemento 
• padding: define o espaço de preenchimento do elemento
• margin: define o espaço de margem do elemento 

Comprimentos E unidades

• px: Pixels (1px = 1/96 de 1 polegada)
• em: Em relação ao tamanho da fonte do elemento (3em = 3 vezes o tamanho da fonte atual)
• vw: Em relação a 1% da largura da janela de visualização
• vh:  Em relação a 1% da altura da janela de visualização
• %: Em relação ao elemento pai

Encontrar elementos usando o Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas de desenvolvedor da web construído diretamente no navegador Google Chrome. Podemos usar essas ferramentas para localizar rapidamente elementos HTML e estilos CSS existentes em qualquer site. 

1. Para acessar o DevTools, você pode clicar com o botão direito do mouse na página e selecionar Inspecionar ou utilizar comandos curtos, como Command+Option+C (Mac) ou Control+Shift+C (Windows, Linux, Chrome OS).

2. Quando o painel DevTools estiver aberto, selecione a ferramenta Inspecionar, na parte superior da página.

3. Você pode então clicar no elemento da página que deseja estilizar. Os seletores que podem ser usados para personalizar este elemento serão destacados na guia Elementos. A guia Estilos abaixo dela revelará as regras de estilo CSS que são aplicadas atualmente a esse elemento.

4. Neste exemplo, vamos alterar a cor do link de navegação para #6b646b utilizando a classe nav-link que encontramos usando o inspetor DevTools. Também adicionaremos a propriedade "!important" ao final da declaração para substituir todos os estilos anteriores dessa propriedade no elemento.

5. Uma vez que o CSS tenha sido atualizado e as alterações tenham sido salvas, você verá que a cor do texto de navegação mudou para #6b646b:

Adicionar fontes de terceiros

@font-face é uma regra CSS que permite importar e utilizar fontes de terceiros em seu Brandguide. Recomendamos que você adicione sua fonte via CSS no nível de configuração global (em oposição ao nível de bloco).

Você pode adicionar uma fonte de terceiros de duas maneiras.

Copiar e colar um URL

A primeira opção é navegar até a biblioteca de fontes de sua escolha e selecionar a fonte que deseja adicionar ao seu Brandguide e copiar e colar a url. Este processo está descrito abaixo. 

Sintaxe

Você pode copiar a sintaxe abaixo e adicioná-la à seção CSS personalizada do seu Brandguide. Este é o único CSS necessário para importar a fonte. Para importar uma fonte diferente, basta alterar a família de fontes, a URL de origem e o formato para a fonte escolhida.

@font-face { font-family: 'Satisfy'; src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2'); }

Encontrando a URL e o formato da fonte:

1. Navegue até a biblioteca de fontes de sua escolha e selecione a fonte que deseja adicionar ao seu Brandguide. No nosso caso, selecionaremos Satisfy no Google Fonts.

2. Depois de selecionado, copie e cole a URL @import em uma nova guia do navegador. 

3. Isso levará você a uma página contendo o URL e o formato necessários para importar a fonte para o seu Brandguide.

4. Copie a URL do SRC e cole-a no código @fontface e font-family. Em seguida, cole o código na caixa CSS. Suas alterações serão atualizadas automaticamente. 

5. Selecione Atualizar CSS para salvar suas alterações. 

6. A fonte recém-importada será preenchida no menu suspenso Tipo de letra padrão no menu suspenso Configurações globais. 

Convertendo a fonte em um formato WOFF ou WOFF2

A segunda opção de fonte personalizada é converter a fonte em um formato woff ou woff2. Este formato de fonte da web é mais compatível para navegadores do que os formatos de arquivo de texto ttf/otf. Este processo está descrito abaixo.  

Fontes proprietárias 

1. Converta a fonte em um formato woff ou woff2. Este formato de fonte da web é mais compatível para navegadores do que os formatos de arquivo de texto ttf/otf. 

2. Carregue a fonte em uma seção de arquivos na Brandfolder. 

3. Abra o ativo, navegue até a guia incorporar e selecione Copiar link. 

4. Navegue até o menu suspenso Configurações Globais. Você pode copiar a sintaxe abaixo e adicioná-la à seção CSS do subtítulo Configurações Globais. Este é o único CSS necessário para importar a fonte. Para importar uma fonte diferente, basta alterar a família de fontes, a URL de origem e o formato para a fonte escolhida. Assim que a sintaxe for inserida, suas alterações serão salvas.  

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

5. As fontes importadas dessa maneira não mostrarão a fonte no menu suspenso Fonte padrão. Em vez disso, você deve aplicar manualmente a fonte na seção CSS. Abaixo está um exemplo de aplicação da fonte Bold Web a tags de parágrafo importadas. 

p { font-family: 'boldweb'; color: #333; }

Adicionando vídeo 

Você pode adicionar um vídeo ao seu Brandguide seguindo estas etapas: 

1. Abra o modal Asset para o vídeo.
2. Navegue até a guia Incorporar. 
3. Localize o código de incorporação de vídeo e selecione Copiar link. 
4. Cole o código no bloco HTML.