Como incluir um arquivo CSS em outro?

Ao desenvolver projetos extensos, é melhor criar arquivos separados para HTML e CSS. Como sabemos bem, o CSS fornece inúmeras propriedades que os desenvolvedores podem usar para fazer páginas da web e documentos html mais estéticos. Portanto, a abordagem ideal é criar vários arquivos CSS para diferentes componentes do projeto. Isso ajuda os desenvolvedores a pesquisar o código específico para modificar.

Este post explicará como adicionar um arquivo CSS a outro.

Como incorporar um arquivo CSS em outro?

O CSS “@import regra”É utilizado para incorporar um arquivo CSS em outro. Confira o exemplo para um entendimento claro.

Exemplo: incluindo um arquivo CSS em outro

Primeiro, crie três arquivos, um HTML e dois arquivos CSS.

Etapa 1: Crie arquivo HTML

Crie um arquivo HTML, “índice.html", Então adicione o"”Elemento no“Seção como dado abaixo. Aqui "rel”O atributo é usado para definir o relacionamento entre HTML e o arquivo vinculado e“Href”É usado para especificar a fonte do arquivo:

No "Seção, execute as seguintes etapas:

• Adicione um “”Elemento e atribui duas classes“conteúdo-div" e "livro”.
• Adicionar "

  ”Elemento para o cabeçalho e“

  ”Elemento para criar uma lista.
  • Para listar os itens, adicione “
  • " Tag:
  
  

  Livros

  
  
  
  
  • Alquimista
  
  
  • O corredor da pipa
  
  
  
  

  Etapa 2: Crie arquivo CSS

  Depois disso, crie o “principal.CSS”Arquive e adicione o seguinte código:

  .Content-Div
  Largura: 400px;
  Altura: 300px;
  margem: automático;
  Background-Color: RGB (245, 230, 212);
  

  O ".conteúdo-div”É utilizado para acessar o“”Elemento com classe nomeada como“conteúdo-div”E as seguintes propriedades são aplicadas a ele:

  • ““largura”Determina a largura do elemento.
  • ““altura”Ajusta a altura do elemento.
  • ““margem”Gera o espaço ao redor do elemento HTML.
  • ““cor de fundo”Altera a cor de fundo do elemento HTML.

  Saída

  Etapa 3: Crie segundo arquivo CSS

  Em seguida, crie um segundo arquivo CSS, “livro.CSS”. Em seguida, acesse o nome da segunda classe “.livro”E atribua as seguintes propriedades CSS:

  .livro
  Imagem de fundo: URL (/imagens/folhas-.jpg);
  Size de fundo: capa;
  preenchimento: 15px;
  Size da fonte: 40px;
  intensidade da fonte: Negrito;
  Cor: RGB (243, 243, 243);
  

  Aqui:

  • ““imagem de fundo”É usado para definir a imagem de fundo, definindo o URL da imagem.
  • ““tamanho de fundo”Especifica o tamanho da imagem de fundo do elemento.
  • ““preenchimento”Aplica espaço dentro da fronteira do elemento.
  • ““tamanho da fonte”Define o tamanho da fonte.
  • ““espessura da fonte”Designa a espessura da fonte.
  • ““cor”Determina a cor da fonte.

  Adicione o "@importar”Regra no topo do“principal.CSS" arquivo:

  @import url (livros.css);

  O "@importar”Regra importa o arquivo CSS para outro arquivo CSS. Por exemplo, o “livros.CSS"Está incluído no"principal.CSS" arquivo.

  A saída verifica que as propriedades do CSS de ambos os arquivos foram aplicadas com sucesso:

  Incluímos com sucesso um arquivo CSS em outro.

  Conclusão

  Para incluir um arquivo CSS em outro, use o CSS “@importar" regra. A regra "@import" deve ser especificada na parte superior do arquivo CSS, onde você deseja incluir outro arquivo CSS. Para vincular os arquivos CSS em HTML, o “”Tag, junto com o“Href”Atributo, é usado. Este post explicou como incorporar um arquivo CSS em outro.