HTML (Hypertext Markup Language) é a linguagem padrão para estruturar páginas da web. Enquanto a folha de estilo em cascata é utilizada para fornecer várias propriedades de estilo aos elementos HTML. Mais especificamente, você pode acessar os elementos de HTML no CSS por nome do elemento, por seletores de classe ou por seletores de id.

Três métodos para adicionar uma folha de estilo CSS a um arquivo HTML são CSs internos, CSS embutidos e CSS externos. No entanto, este artigo orientará como adicionar uma folha de estilo externa em html.

O que é uma folha de estilo CSS externa?

A folha de estilo externo é útil de uma maneira que podemos mudar a aparência do nosso site modificando apenas um arquivo. O arquivo HTML deve ter um link para a folha de estilo dentro da “”Elemento, que será mencionado dentro do componente principal da página HTML.

O exemplo abaixo demonstra vários elementos HTML que serão estilizados com propriedades CSS usando a folha de estilo externo.

Exemplo: como criar e vincular a folha de estilo externa ao arquivo html?

No arquivo html, primeiro, adicione um elemento div ter um nome de classe “principal”. Dentro disso, adicione

elemento com nome de classe como “cabeçalho”Para fornecer o cabeçalho. O

elemento com id como “pára”É então adicionado para fornecer conteúdo de texto.

Etapa 1: Crie arquivo HTML

Abaixo está o código HTML para o cenário discutido:

Este é o elemento de cabeçalho

Esta é a div principal

Como não fornecemos nenhum dos elementos HTML com propriedades de estilo, a tela de saída ficará assim:

Na próxima seção, criaremos uma folha de estilo que contenha as propriedades de estilo dos elementos que criamos no arquivo html.

Etapa 2: Crie folha de estilo externo

Crie um novo arquivo e nomeie -o com uma extensão “.CSS”. Abra -o e escreva o código conforme fornecido no bloco de código abaixo.

Estilo div

.principal
Largura: 500px;
Altura: 200px;
Background-Color:#001253;
Alinhamento de texto: centro;
Top-top: 20px;
margem: 0px automático;
fronteira: 5px RGB sólido (194, 194, 189);
Fonte-família: cursiva;

As propriedades aplicadas aos elementos HTML na folha de estilo externo são descritos abaixo:

• ““.principal”É usado para acessar a classe do elemento div, onde“.”Seguido pelo nome da classe é conhecido como seletor de classe.
• ““largura”A propriedade é utilizada para o cenário da largura do elemento.
• ““altura”A propriedade é utilizada para o cenário da altura do elemento.
• ““cor de fundo”A propriedade é utilizada para definir a cor de fundo.
• ““alinhamento de texto”É a propriedade usada para o alinhamento do texto.
• ““Top-top”É a propriedade utilizada para adicionar espaço acima do conteúdo da div.
• ““margem”Com o valor 0px automaticamente representa o espaço 0px da parte superior e inferior e espaço igual à esquerda e direita do elemento.
• ““fronteira”A propriedade é definida com o valor de 5px RGB sólido (194, 194, 189), onde 5px se refere à largura da borda, o sólido é o tipo de linha e RGB (194, 194, 189) é o código de cor da borda da borda.
• ““família de fontes”Com o valor cursivo, faz com que o estilo da fonte pareça manuscrito.

ID de estilo para

#pára
Size da fonte: 25px;
intensidade da fonte: Negrito;
Cor: #ffb9b9;

O elemento de identificação com o nome para do

ID do elemento estilizado com as propriedades que são explicadas abaixo:

• ““#pára”É utilizado para acessar o elemento de identificação do HTML. O "#”O sinal é conhecido como seletor de identificação.
• ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte.
• ““espessura da fonte”Com o valor definido como negrito, torna a fonte ousada.
• ““cor”A propriedade é utilizada para o cenário da cor da fonte.

Cabeçalho de estilo

.cabeçalho
Cor: Whitesmoke;

A cor da fonte do cabeçalho é definida como “fumaça branca”Ao utilizar a propriedade“cor”.

Etapa 3: Ligue a folha de estilo externo ao HTML

Agora, na seção principal do arquivo HTML, especificaremos o link para a folha de estilo externo:

Vários atributos podem ser utilizados na tag HTML Link. Os atributos especificados no elemento Link estão descritos abaixo:

• ““rel”O atributo é utilizado para informar o navegador sobre o arquivo importado, como a folha de estilo.
• ““Href”Atributo especifica o caminho do arquivo.
• ““tipo”O atributo é utilizado para indicar o conteúdo do arquivo importado.

Conforme mostrado na imagem abaixo, as propriedades de estilo fornecidas na folha de estilo externo são aplicadas com sucesso:

Aprendemos com sucesso a vincular o arquivo CSS ao arquivo html.

Conclusão

CSS é a folha de estilo em cascata que fornece propriedades de estilo diferentes para os elementos HTML. Existem três maneiras de conectar o CSS ao HTML: CSS em linha, CSS externo e CSS interno. No HTML, dentro da seção da cabeça, o link para a folha de estilo externo será especificado usando o elemento. Este artigo demonstrou o procedimento para criar e vincular folhas de estilo externo ao HTML.