A sigla CSS significa "folhas de estilo em cascata". CSS é usado para estilizar sites e aplicativos usados ​​em todos os dispositivos. A folha de estilo é comumente usada junto com HTML e uma linguagem de programação front-end, como JavaScript.

O CSS pode ser implementado de três maneiras - em linha, interna ou externamente. Embora CSS externo seja a abordagem recomendada, há casos em que os dois métodos restantes de implementação podem ser mais práticos.

Neste artigo tutorial, você aprenderá todos os fundamentos de CSS para começar a construir aplicativos hoje.

Quando usar os diferentes métodos de implementação CSS

CSS embutido é o método ideal de implementação quando a intenção é incluir apenas uma ou duas preferências de estilo em uma página da web, junto com alguns outros casos de nicho. O método CSS inline utiliza o estilo palavra-chave junto com uma propriedade CSS para alcançar um resultado específico.

Se você pretende alterar a cor de um único título para vermelho, CSS inline pode ser uma boa opção. Um caso de nicho, como mencionado acima, seria ao criar layouts HTML que consistem principalmente de tabelas (uma prática desatualizada).

Exemplo de uso de CSS Inline

Título Principal

A linha de código acima exibirá o texto “Título principal” revestido em vermelho. Esta é possivelmente uma das únicas razões práticas para usar CSS inline, porque geralmente há apenas um h1 elemento em uma determinada página da web.

Se você pretende revestir todos H2 elementos em uma página da web com a cor amarela. Você terá que usar o CSS estilo palavra-chave, junto com a cor propriedade e seu valor (amarelo) em cada elemento. No entanto, uma maneira mais eficiente de realizar essa tarefa é usar CSS interno.

Usando exemplo de CSS interno

Colocando o código acima no tag do seu arquivo HTML irá garantir que todos os H2 os elementos desse arquivo são revestidos de amarelo. O CSS interno é separado do código HTML e isso torna o método mais eficiente porque facilita o direcionamento de vários grupos de elementos.

Então, por que o método de implementação de CSS externo ainda é a abordagem mais recomendada? Separação de preocupações. Com CSS externo, seu código CSS é completamente separado do código HTML, o que garante escalabilidade para grandes projetos e torna o processo de teste mais eficiente.

Usando Exemplo de CSS Externo

Inserindo a linha de código acima no tag de seu arquivo HTML irá facilitar o estilo de sua página da web usando o método CSS externo. O único aspecto do código acima que mudará é o valor atribuído ao href propriedade, que deve ser sempre o nome do arquivo CSS (incluindo a extensão .css).

Relacionado: O que são folhas de estilo em cascata e para que é usado o CSS? Com o seu arquivo CSS vinculado ao seu documento HTML, agora você pode começar a escrever o código CSS no seu arquivo CSS. Neste ponto, a única diferença entre o exemplo de CSS interno acima e o CSS externo é o estilo marcação. Portanto, inserir o código a seguir em um arquivo CSS produzirá o mesmo resultado do exemplo CSS interno acima.

h2 {
cor amarela;
}

Explorando a estrutura básica do CSS

A declaração CSS básica contém sete elementos essenciais, como você pode ver no exemplo abaixo. Todos eles trabalham juntos para atingir um conjunto específico de preferências de estilo.

O seletor

Em uma declaração CSS, um seletor pode ser um Eu iria, uma classe, um elemento ou, em alguns casos especiais, um pseudo-seletor. Na estrutura CSS acima do uma elemento é usado como um seletor, o que significa que todos os links em uma página da web serão revestidos em vermelho. Essencialmente, o objetivo do seletor é identificar os elementos que devem ser estilizados.

Início e término da declaração

O início e o fim da declaração são importantes porque incluem todas as preferências de estilo que se aplicam a um seletor específico. Ambos os elementos são representados por um par de chaves abertas e fechadas. Uma boa maneira de lembrar de usar um início ou fim de declaração é lembrar que, se você tiver uma chave aberta, deve haver uma chave fechada correspondente e vice-versa.

A propriedade

A propriedade CSS em uma estrutura de declaração pode ser qualquer um de mais de uma centena de tipos de propriedade diferentes. O tipo de propriedade usado na estrutura CSS acima é cor e essa propriedade direciona o texto em uma página da web. Se você gostaria de saber mais, confira nosso lista abrangente de propriedades CSS e seu uso.

O Separador de Propriedade / Valor

Embora possa parecer pequeno e insignificante, o separador propriedade / valor é tão importante quanto todos os outros elementos na estrutura CSS. Se alguma vez houver uma instância em que esse elemento seja esquecido, a declaração CSS inteira não será executada.

O valor que

O valor da propriedade CSS representa o estilo exato que você deseja aplicar a uma determinada propriedade. Os valores disponíveis para uso dependem do tipo de propriedade. Por exemplo, a propriedade usada na estrutura acima é cor, o que significa que há apenas um tipo de valor que pode ser aplicado a essa propriedade, um nome de cor. UMA cor O valor pode ser apresentado em uma das quatro formas: um valor de palavra (como no exemplo acima), um valor hexadecimal, um valor HSL (Matiz, Saturação, Luminosidade) ou um valor RGB (Vermelho, Verde, Azul).

O Separador de Declaração

O separador de declaração indica que você está no final de uma declaração de estilo específica. Na estrutura acima, há apenas um separador de declaração, mas pode haver mais. Tudo depende do número de propriedades CSS que você pretende usar em um determinado classe, Eu iria, ou elemento.

O que são ids e classes?

ids e Aulas desempenham um papel fundamental no processo de estilização CSS. Como elementos HTML, CSS ids e Aulas são usados ​​como seletores em uma declaração CSS. Contudo, Aulas e ids têm precedência sobre um elemento HTML.

A regra geral em CSS é que a última declaração de estilo adicionada a um arquivo substituirá as que estavam lá antes. Portanto, se houver duas declarações com um H2 seletor em um arquivo CSS, a declaração adicionada por último substitui as que estavam lá antes.

No entanto, se este H2 elemento tem um Eu iria que é usado como um seletor em uma declaração CSS, independentemente de sua posição (antes ou depois) para uma declaração CSS que tem o H2 elemento como seu seletor, a preferência de estilo no Eu iria declaração sempre terá precedência sobre o elemento. Em suma, um Eu iria irá substituir outros seletores de estilo.

É importante lembrar que em uma declaração CSS, ids começam com um sinal de número e as aulas começam com um ponto final. A diferença mais significativa entre um Eu iria e um classe isso é um Eu iria é único, enquanto um classe pode ser duplicado. Por exemplo, uma coleção de semelhantes tags podem receber o mesmo classe nome; No entanto, o Eu iria De cada a tag precisa ser única.

Explorando os diferentes tipos de seletores

Existem três tipos básicos de seletores - único, múltiplo e aninhado. Até agora, este artigo cobriu amplamente os seletores únicos.

Ao usar CSS, haverá casos em que você gostaria de diferentes elementos em diferentes posições em um página da web para ter um estilo semelhante que é diferente do estilo geral aplicado a toda a página da web. Nesses casos, saber como usar vários seletores será útil.

Exemplo de modelo HTML básico

Receber

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit volúpia
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Cerca de

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit volúpia
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Título

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? No ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?







Título

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? No ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?

Se você olhar atentamente para o arquivo HTML acima, verá a dinâmica que existe entre ids e Aulas. Em referência ao arquivo acima, se você deseja aplicar o mesmo estilo ao cerca de seção e os artigos na página da web apenas, o código CSS a seguir fará isso.

Exemplo de uso de vários seletores

#Sobre, .content {
cor branca;
cor de fundo: ciano-escuro;
}

Ao usar vários seletores, você sempre deve separar cada seletor usando uma vírgula. O exemplo acima tem dois seletores, um Eu iria e um classe. Se a vírgula que segue o cerca deEu iria estiver faltando, a declaração CSS não será executada.

Voltando ao exemplo de modelo HTML básico acima, há dois tags presentes - uma na seção de boas-vindas e outra na seção sobre. Se sua meta é atingir apenas um desses tags, um seletor aninhado deve ser seu método go-to.

Usando exemplos de seletores aninhados

#Welcome p span {
cor vermelha;
}

O seletor aninhado acima contém um Eu iria e dois elementos HTML. Como você pode ver no exemplo acima, um seletor aninhado fornece a capacidade de direcionar um elemento específico dentro de um grupo.

Portanto, apenas o período seção no etiqueta do div com o bem vindo id será revestido na cor vermelha.

Quer esteja usando uma linguagem de estilo como CSS ou uma linguagem de programação, você deve saber como escrever um comentário. Os comentários são essenciais em projetos de nível empresarial onde vários desenvolvedores trabalham juntos e também são úteis ao fazer desenvolvimento em pequena escala.

Um comentário CSS contém duas barras, dois asteriscos e uma seção de comentários.

/ * É assim que você escreve um comentário de uma única linha em CSS * /

/*
É assim que você escreve
um comentário multilinha
em CSS
*/

Qual é o próximo?

Este artigo fornece os componentes básicos do CSS. Agora você pode usar um identificador:

• Qualquer um dos três métodos de implementação CSS
• Todos os elementos em uma declaração CSS
• Os três tipos básicos de seletores
• Um comentário CSS

No entanto, este é apenas o começo. CSS possui vários frameworks que o ajudarão a desenvolver um melhor entendimento da linguagem. O único desafio é decidir qual é o melhor para você.

Tailwind CSS vs. Bootstrap: qual é uma estrutura melhor?

Ao escolher uma estrutura CSS, é importante encontrar aquela que atenda aos seus requisitos.

Leia a seguir

Sobre o autor