Inserindo CSS em uma página HTML

O CSS (Cascading Style Sheets) desempenha um papel crucial na criação de designs atraentes e layouts atraentes para páginas da web.

Rogério Araújo
31 de Outubro de 2023

Compartilhe:

Fala, meus consagrados! Beleza?

O CSS (Cascading Style Sheets) desempenha um papel crucial na criação de designs atraentes e layouts atraentes para páginas da web. Para aplicar estilos a uma página HTML, é necessário saber como inserir o CSS de forma eficaz. Neste artigo, exploraremos diferentes métodos para inserir CSS em sua página HTML, desde o uso de estilos internos até a vinculação de arquivos externos.

Há três formas de inserção de CSS em uma página web:

Folha de estilo externa:
- Linking;
- Definição do CSS em um arquivo externo;
Folha de estilo interna:
- Embedding;
- Definição do CSS no documento com um todo; e
Folha de estilo inline:
- Definição do CSS direto no elemento.

Uma imagem contendo Gráfico

Descrição gerada automaticamente

Figura 1: Formas de inserção de CSS.

A folha de estilo externa pode ser escrita em qualquer editor de texto e não deve conter nenhuma tag html. Ela deve ser salva em um arquivo com extensão .css.

Usando essa forma de inserção de CSS, pode-se alterar a aparência de um site inteiro alterando apenas um arquivo. Para isso, cada página web deve incluir uma referência ao arquivo da folha de estilo externa, dentro do elemento <link> dentro da seção head da página.

Exemplo do conteúdo de um arquivo .css (por exemplo estilo.css):

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

Abaixo, temos a forma de referência do arquivo .css na página HTML

<head>

</head>

A folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único. Essa folha é definida dentro do elemento <style> dentro da seção head.

Exemplo de uma folha dentro de uma página HTML:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Por último, a folha de estilo inline pode ser usada para aplicar um estilo exclusivo para um único elemento. Para isso, usamos o atributo style dos elementos. Esse atributo pode conter qualquer propriedade CSS e é adicionado ao elemento relevante.

Exemplo de uma folha de estilo inline usando o atributo style:

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:blue; text-align:center;”>This is a heading</h1>

<p style=”color:red;”>This is a paragraph.</p>

</body>

</html>

Das três formas, a mais recomendada é a folha de estilo externa, pois pode-se mudar o css de várias páginas ao mesmo tempo modificando apenas um único arquivo .css. Basta que essas páginas possam referenciar esse arquivo.

Com as folhas de estilo interno e inline, caso seja necessário modificar o css das páginas, é preciso modificar cada página com essas formas de inserção de css.

Uma página pode referenciar várias folhas de estilo. Nesse caso, se algumas propriedades tiverem sido definidas para o mesmo seletor (elemento) em diferentes folhas de estilo, o valor da última folha de estilo lida será usado.

Exemplo:

Se o estilo interno for definido após o link para a folha de estilo externa, então será aplicado o estilo interno para os elementos <h1>:

<head>

<style>

h1 {

color: orange;

}

</style>

</head>

Se o estilo interno for definido antes o link para a folha de estilo externa, então será aplicado o estilo externo para os elementos <h1>:

<head>

<style>

h1 {

color: orange;

}

</style>

</head>

Finalmente, a ordem da aplicação de estilos em uma página HTML é:

Estilo inline;
- A folha de estilo inline, se houver, é o último estilo a ser atribuído a um elemento, então ele será o estilo definitivo;
Folhas de estilo externas e internas;
- Os estilos das folhas externas e internas dependerão da ordem que estão sendo citadas, como vimos acima;
Padrão do navegador;
- Se não houver nenhum estilo inserido em uma página web, então haverá o padrão do navegador para essa página.

Em conclusão, a inserção de CSS em uma página HTML é um aspecto fundamental da criação de designs atraentes e funcionais na web. Como discutimos ao longo deste artigo, existem várias abordagens para aplicar estilos, desde estilos internos e em linha até a utilização de arquivos CSS externos. A prática de separar o conteúdo da apresentação, juntamente com a compreensão de seletores, regras, classes e IDs, é essencial para dominar o uso eficaz do CSS. Além disso, a criação de páginas responsivas com media queries e a resolução de conflitos de estilos são habilidades essenciais para qualquer desenvolvedor web. Ao seguir esses princípios e adotar boas práticas de desenvolvimento web, você estará pronto para criar páginas atraentes e bem-estilizadas que proporcionarão uma ótima experiência aos usuários.

Espero que tenham gostado!

Forte abraço e até a próxima jornada!

_________________________

Professor Rogerão Araújo

Quer ficar por dentro dos concursos públicos abertos e previstos pelo Brasil?
Clique nos links abaixo:

CONCURSOS ABERTOS

CONCURSOS 2023

Receba gratuitamente no seu celular as principais notícias do mundo dos concursos!
Clique no link abaixo e inscreva-se gratuitamente: