Explore os conceitos de CSS

  • 4 minutos

Estrutura CSS

Se você quiser que sua página HTML exiba todo o texto entre as h1 tags com a cor laranja, você pode usar o código CSS a seguir.

h1 {
    color: orange;
}

O código CSS acima começa com (h1) que seleciona o HTML que você deseja estilizar. O h1 na amostra é chamado de seletor.

Observe o código dentro das chaves encaracoladas, color: orange;t declara como a tag selecionada h1 deve ser estilizada. O código CSS nas chaves { }, como o color: orange;, é chamado de declaração.

Sua declaração de exemplo contém uma propriedade, color, que é separada de um valor, orange, com dois pontos (:), e o final da configuração é marcado por um ponto-e-vírgula (;).

Nota

Não há necessidade de memorizar todas as propriedades e valores disponíveis no CSS. Há muitos sites que você pode referenciar. Além disso, ferramentas como vscode.dev ou Visual Studio Code oferecem opções de preenchimento automático que podem ajudar a guiá-lo enquanto você cria um CSS.

Incorporar um arquivo CSS

Uma maneira rápida de adicionar informações de estilo é colocá-las dentro head das tags da sua página HTML usando um style atributo. Este método não é considerado a melhor prática, mas pode ser usado para aprendizagem e testes.

O exemplo a seguir adiciona a <style> tag com informações de estilo para qualquer h1 um para exibir cinza. Como esse é o único estilo, o restante do HTML é exibido com o estilo padrão do navegador.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Quando visualizado em um navegador, o texto "Bem-vindo" na <h1> tag exibe cinza.

A captura de tela da página H T M L renderizada exibe o título 1 em cinza.

Aplicar estilos a HTML usando CSS

Quando você adiciona estilos ao HTML (Hypertext Markup Language), é melhor fazer o estilo em um arquivo CSS separado. Quando vários arquivos HTML usam o mesmo CSS, eles têm uma aparência consistente. Além disso, atualizar um arquivo CSS é mais fácil do que ter que atualizar cada arquivo HTML individual.

Para fazer referência ao arquivo CSS, use o link elemento .

link tem dois atributos, rel e href. rel é usado para identificar o tipo de recurso que você está referenciando, folha de estilos para folhas de estilo. href é usado para identificar o caminho para o arquivo CSS. Se o arquivo CSS estava na mesma pasta que o arquivo HTML e tinha o nome style.css, você pode usar o seguinte para fazer referência a ele a partir da sua página:

<link rel="stylesheet" href="style.css">

Agora você tem pelo menos dois arquivos, um .html arquivo e um .css arquivo. O exemplo anterior teria um arquivo HTML vinculado ao CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>