CSS (um acrônimo de Cascading STyle Sheet) especifica a interface do conteúdo HTML. O CSS permite embelezar as páginas HTML especificando as cores, os estilos de fonte e muito mais relacionados à estética das páginas. As propriedades definidas usando CSS são herdadas para todos os elementos infantis também. Por exemplo, se uma propriedade CSS for adicionada ao documento Body of HTML, todos os elementos dentro da etiqueta corporal adotarão essa propriedade. Para evitar esse acontecimento, você pode especificar a propriedade para elementos infantis específicos.

Existem várias maneiras de aplicar CSS no seu documento HTML e são definidas abaixo:

• Em linha: Permissões para adicionar CSS dentro de uma tag HTML específica
• Interno: Um código CSS é escrito dentro da etiqueta da cabeça (recomendada, mas não necessária) de uma página HTML
• Externo: Um arquivo CSS é feito externamente, definindo todas as propriedades. É adicionado à página HTML usando o <link> elemento

Compilamos este guia para demonstrar todas as maneiras possíveis de adicionar CSS a uma página HTML.

Como adicionar CSS a uma página da web

Esta seção descreve brevemente as abordagens disponíveis para adicionar CSS a uma página HTML.

Como adicionar CSS embutido

Como o nome da técnica sugere, ele permite adicionar CSS a um único elemento HTML. O estilo atributo de um elemento é exercido para fazê -lo. Vamos praticar o exemplo abaixo do ponto em que obtém uma imagem mais clara do CSS embutido:

Exemplo

O código escrito abaixo adiciona os estilos a uma tag html

Linux Dica

:

Linux Dica

• A cor do texto é definida como verde: para isso, o cor propriedade do estilo atributo é usado
• O texto de

  está centrado alinhado: o alinhamento de texto A propriedade é utilizada

• O texto do cabeçalho será sublinhado: para fazê -lo, o decoração de texto A propriedade de atributo de estilo está definida como sublinhado.

A interface da web da página HTML acima mencionada é exibida abaixo:

Além das propriedades acima mencionadas, poucos editores HTML mostram a lista suspensa das propriedades disponíveis. Portanto, é recomendável escolher seu editor HTML com sabedoria, pois a melhor seleção facilitará a maneira de adicionar CSS à página HTML.

Como adicionar CSS interno

O CSS interno é adicionado usando o etiqueta dentro do Elemento de uma página HTML. Digamos que queremos adicionar vários estilos a corpo, parágrafos, e divisões usado em uma página HTML.

A imagem exibida abaixo mostra as várias propriedades adicionadas a várias seções da página HTML e todas essas propriedades são atribuídas usando o <estilo> elemento.

- A cor de fundo do corpo será preta

- Os parágrafos terão texto vermelho, tamanho da fonte 1 e texto alinhado à esquerda

- A cor das divisões é o anti -moro e a largura das divisões depende da largura do texto que está sendo usado:

A interface da web usando as propriedades acima é exibida abaixo:

Como adicionar CSS externo

O CSS pode ser adicionado às páginas da web fazendo um arquivo CSS dedicado e depois chamando -o dentro de uma página. O CSS externo é bastante útil quando você precisa aplicar o mesmo estilo em várias páginas HTML. Esta seção fornece uma postagem processual para criar e usar um arquivo CSS externo:

Etapa 1: Crie um .arquivo CSS

Em primeiro lugar, abra seu editor de código e faça um arquivo com .CSS Extensão (ou o editor pode oferecer a opção de salvar como um arquivo CSS). O arquivo que estamos usando aqui é nomeado como linuxhintstylesheet e é criado da seguinte maneira:

Abriu um novo arquivo no editor:

Depois disso, clique em Salvar como:

Nomeou esse arquivo com .Extensão CSS e CSS selecionado como um tipo de arquivo:

Etapa 2: Adicione estilos ao arquivo CSS

Adicionamos as seguintes propriedades de estilo:

- A cor de fundo do corpo é céu azul

- O H1 estará tendo o branco cor

- Os parágrafos têm a família de fonte definida para serif e a decoração de texto contém Overline (linha acima do texto) propriedade:

A imagem a seguir exibe o código que contém estilos declarados acima:

Etapa 3: Adicione o arquivo CSS ao documento HTML

Depois de criar e adicionar estilos a um arquivo CSS, agora você deve adicionar o arquivo à página em que deseja aplicar esses estilos. Queremos adicionar linuxhintstylesheet para Linuxhint Documento HTML:

O O elemento de HTML é usado para importar CSS arquivo. Além disso, o rel e Href A propriedade do elemento de link é exercida para incorporar o arquivo CSS. O rel Atributo Define a relação entre o documento HTML e o arquivo CSS. Considerando que a Href A propriedade do elemento contém o link para o arquivo CSS.

Depois que as etapas acima forem executadas corretamente, você poderá carregar sua página HTML com as propriedades acima mencionadas.

Conclusão

CSS é um idioma para fazer as páginas da web (html/xml) apresentáveis. CSS pode ser adicionado às páginas da web adotando um dos métodos mencionados neste artigo. O primeiro método usa o atributo de estilo de um elemento para adicionar várias propriedades relacionadas ao CSS. O método interno pratica o idioma CSS usando elemento na etiqueta da cabeça. E o último método importa um arquivo CSS externo para uma página da web específica. Todos esses métodos são usados ​​para adicionar CSS a uma página da web e a seleção de um método depende do desenvolvedor de que ele/ela pretende adicionar estilos.