O que é arquivo CSS?

Perguntado por: amenezes4 . Última atualização: 1 de fevereiro de 2023
4.9 / 5 5 votos

O CSS é uma linguagem de estilo usada para definir a apresentação de um documento HTML ou XML. Com CSS, você pode controlar a cor, o tamanho e a fonte de um texto, além de inserir imagens e outros elementos gráficos. Já o HTML é uma linguagem de marcação usada para criar páginas da web usando tags.

Você pode usar qualquer navegador moderno para visualizar arquivos CSS, por exemplo, Google Chrome, Microsoft Edge, Firefox, Opera ou Safari.

Siga os passos abaixo para usar o CSS externo:

  1. Crie um novo arquivo .css com um editor de texto e então adicione regras de estilo. ...
  2. Na seção <head> da sua planilha HTML, adicione uma referência para o seu arquivo .css logo depois da tag <title>: <link rel="stylesheet" type="text/css" href="style.css" />

O CSS é uma linguagem de folha de estilo e é composta por camadas, que permitem estilizar as páginas desenvolvidas com HTML. Isso significa que é possível definir a aparência de cada página, alterando seu layout, o posicionamento dos elementos, fontes, cores e outras opções visuais.

Adicionando uma imagem
É muito simples adicionar uma imagem usando a propriedade background-image . Basta informar o caminho da imagem no valor de url() .

O CSS tem a tarefa de separar o conteúdo do site de sua apresentação visual, alterando elementos como cor do texto, fonte e espaçamento entre blocos, assim como todo o aspecto estético de uma página.

Para linkar um arquivo CSS a um documento HTML, basta utilizar a tag <link> dentro da seção <head> do HTML. A tag <link> deve conter pelo menos três atributos: href, rel e type. O atributo href indica o caminho para o arquivo CSS que será linkado.

Resumindo, com o CSS você não precisa mais escrever repetidamente como os elementos individuais se parecem. Isso economiza tempo, encurta o código e diminui a chance de erros. O CSS permite que você tenha vários estilos em uma página HTML, tornando as possibilidades de personalização quase infinitas.

Existem três formas para incluir o código CSS em seu projeto

  1. Inline. A primeira forma de aplicar CSS a uma página é utilizando o atributo style em elementos do HTML: ...
  2. Interno. A segunda forma é utilizar a tag style dentro do head da página HTML: ...
  3. Externo.

E o que é CSS3? O CCS3 é simplesmente a versão mais atual do CSS, uma evolução. Entre outras as evoluções, ele incorpora novos elementos para construir animações tanto em 2 como e 3 dimensões.

HTML: linguagem de marcação utilizada para estruturar os elementos da página, como parágrafos, links, títulos, tabelas, imagens e até vídeos. CSS: linguagem de estilos utilizada para definir cores, fontes, tamanhos, posicionamento e qualquer outro valor estético para os elementos da página.

As CSSs (Cascating Style Sheets) foram desenvolvidas para trabalhar com HTML, mas podem ser usadas com XML.

CSS permite aos usuários sobrescrever os estilos definidos pelo autores. Isto é muito importante para usuários imposibilitados de distinguir fontes e cores definidas pelo autor. CSS permite aos usuários visualizar documentos com suas fontes, cores, etc... preferidas, especificando-as em uma folha de estilos do usuário.

O bloco de criação básico do layout de CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e outros elementos de página. Quando você cria um layout de CSS, coloque tags div na página, adicione conteúdo a elas e posicione-as em vários lugares.

Uma dica importante para trabalhar com imagens em sites, e estilizar com CSS é: usar divs. Dentro da div colocamos a imagem, através da tag <img> e de seus atributos, como src, width, height, alt e title.

Para inserir uma imagem no HTML basta utilizar a tag <img> com o atributo src. Ou seja: o atributo src, ou source, vai conter a url da imagem que será inserida.

Outra forma de centralizar uma imagem é usando a propriedade margin: auto (para as margens esquerda e direita). Simplesmente usar margin: auto , contudo, não funcionará com imagens. Se você precisar usar margin: auto , há 2 outras propriedades que você também precisará usar.

Existem três tipos de folha de estilo CSS possíveis para utilização em projetos WEB: estilos inline, incorporado e externo.

Sinal de maior > : significa filho-direto do elemento. Seleciona todos os filhos-diretos do elemento. Dois pontos :: : significa pseudo-elemento (um elemento-filho). Sinal de + : seleciona o elemento imediatamente após.