CSS Regrastet

“No CSS, o conjunto de regras é definido como a regra que seguimos para dar estilo aos seletores. Podemos usar o nome do seletor e depois declará -lo usando propriedades diferentes. Podemos usar um ou mais seletores em nosso código CSS e usar várias propriedades junto com seus valores na parte da declaração. Quando usamos qualquer propriedade CSS, devemos atribuir alguns valores a essas propriedades de acordo com a nossa escolha. Se houver alguma palavra -chave disponível que usamos em vez do valor, também atribuiremos essas palavras -chave a essa propriedade. Em resumo, usamos o nome do seletor e, em seguida, colocamos aparelhos encaracolados e, nesses aparelhos encaracolados, usamos diferentes propriedades de estilo que queremos aplicar ao seletor selecionado e, em seguida, damos o valor a essas propriedades. Explicaremos esse conjunto de regras no CSS em detalhes, seguindo esta regra em nosso código CSS aqui.”

Sintaxe

Seletor
Valor da propriedade;

Exemplo 1

Para seguir este conjunto de regras em nosso código CSS, devemos escrever algum código em HTML e estilizar esses elementos HTML em um arquivo CSS, seguindo a regra em nosso código CSS. Devemos criar um novo arquivo e, depois de selecionar HTML como o idioma, comece a codificar neste arquivo. Você também pode usar o bloco de notas ou qualquer editor de texto para compilar esses códigos.

Agora, vamos declarar o cabeçalho 1 e 2 usando as tags e criar um parágrafo simples abaixo desses títulos. Estamos criando esses títulos e os parágrafos no corpo do HTML e, depois de salvar isso, vamos mudar para o arquivo CSS para aplicar propriedades a esses títulos e parágrafos seguindo a regra seguindo a regra. Devemos vincular o arquivo CSS a este arquivo para que todas as propriedades que usaremos no arquivo CSS sejam aplicadas aqui a este parágrafo e títulos.

Vamos seguir a regra para modelar esses títulos e parágrafos; Primeiro, usamos o nome do seletor e depois colocamos aparelhos encaracolados de acordo com a regra. Depois disso, devemos dar o nome da propriedade que queremos usar. Aqui, "H1" é o seletor e, dentro dos aparelhos encaracolados, temos a propriedade "cor", que é usada para alterar a cor da fonte para a cor que colocamos aqui como um valor para esta propriedade. Vamos usar a cor "branca" como a cor da fonte e depois alterar a "família da fonte", definindo "Times New Roman" como o valor para esta "família de fontes.”

Como selecionamos a cor "branca" para a fonte, devemos mudar a cor do fundo. Então, para isso, usamos a propriedade “Background-Color” e definimos o “preto” como o valor desta propriedade. Aqui, completamos o estilo de "H1" e fechamos os aparelhos encaracolados. Agora, para aplicar estilo em "H2", usamos novamente o seletor, que é "H2" e depois damos a propriedade dentro do aparelho encaracolado. Definimos a propriedade “Font-Color” “Black” e a “Font-Family” que estamos usando aqui e damos “Arial” como seu valor. Como aqui, estamos usando a fonte preta, então definimos a propriedade "Background-Color" para "White" e fechamos os aparelhos do "H2" aqui.

Depois vem o parágrafo, então vamos usar o "P" como seletor e depois declarar propriedades aqui para o parágrafo. Estamos definindo o tamanho da fonte do parágrafo usando a propriedade “Size da fonte” e, em seguida, definindo o valor “15px” para este. Em seguida, mude a “família da fonte” deste parágrafo para “Calibri”, que define a fonte simples do parágrafo para a fonte “Calibri”. Também queremos mudar o estilo da fonte, então, para isso, estamos usando a propriedade "estilo da fonte" e usar a "palavra-chave" aqui, que é "itálico."Nossa fonte de parágrafo aparecerá em" Itálico "no estilo de fonte.”Então, temos a propriedade“ Fonte-peso ”e usamos a palavra-chave“ ousada ”para alterar a fonte para um estilo ousado. A cor da fonte do parágrafo é definida usando a propriedade "cor" para "vermelho.”

A saída fornecida mostra que todas as propriedades que usamos no arquivo CSS são aplicadas ao texto que escrevemos no código HTML. O estilo de fonte, cor e cor de fundo, todas as propriedades que usamos todos os renderizados aqui na saída. Se não seguirmos a regra, essas propriedades de estilo não serão aplicadas ao nosso texto ou documento.

Exemplo # 2

Aqui, neste código HTML, criamos um "div" no início, dentro do corpo. Então, vamos criar dois títulos diferentes. Após esses títulos, também temos um parágrafo neste código. Todos esses títulos e parágrafos estão escritos dentro da “div.“Fechamos o“ div ”no final do código antes de fechar a etiqueta“ corpo ”.

Agora, aqui você pode ver como mudamos o estilo de todos esses títulos, div e parágrafos. Novamente seguimos a regra para aplicar o estilo. Primeiro, estamos mudando a “cor” da fonte e definindo seu valor como “laranja.”E use outra propriedade para mudar a família de fontes usando a propriedade“ Font-Family ”e definindo o nome“ Argeliano ”como seu valor.

Em seguida, apenas mudamos a cor do segundo título usando a propriedade "cor" e definimos a cor do segundo cabeçalho para "azul.”Também temos um parágrafo, então definimos sua“ cor de fundo ”para“ Pink."Então a propriedade" cor "muda a cor da fonte para" preto "e o valor" 15px "para definir o" tamanho da fonte.”Também queremos renderizar tudo isso no centro da página; portanto, para isso, usamos a propriedade“ Alinhamento de texto ”e definimos a palavra-chave“ Center ”, que define todos esses seletores para o“ centro ”e, como usamos Para aplicar esse "alinhamento de texto" em todos os seletores, então usamos "corpo" e dentro deste "corpo", usamos esta propriedade.

Na saída, você pode ver que todos os títulos e parágrafos estão alinhados no centro, e todas as propriedades que definimos acima são aplicadas aqui. Na saída, você pode notar facilmente a diferença no texto à medida que usamos propriedades diferentes para todos os seletores.

Exemplo # 3

Em nosso terceiro e último exemplo, vamos criar três títulos, um parágrafo e também uma lista que é uma lista não ordenada, e faremos algum estilo em todos esses.

Primeiro, vamos aplicar o estilo a "H1". Colocamos o nome do seletor “H1” e usamos propriedades diferentes aqui. Definimos sua cor de texto usando "cor: verde" e depois usamos "font-family", que é uma propriedade e usamos "argelino" para isso. Depois vem a “cor de fundo”, que definimos como "amarelo."Além disso, alinhe este caminho para o" centro "com a ajuda da propriedade" Text-Align "e dê um estilo" itálico "a este" H1 ".

Agora, vamos mudar o estilo de "H2" da mesma maneira que "H1". A “cor” é definida aqui como “laranja” e a “família da fonte” é “arial” para isso. A "cor de fundo" para isso é "rosa" e é "central" alinhada. Também temos um parágrafo, então agora vamos usar esse "P" como seletor; A propriedade que estamos usando para esta é a propriedade "Size da fonte" e a definimos como "15px", e a "família da fonte" é "calibri", e o "peso da fonte" que usamos é "ousado.”

Como temos uma lista neste exemplo, usamos esse seletor "UL" e aplicamos estilos. Definimos sua "cor", que define a cor do texto para "roxo", e o "tamanho da fonte" desta lista é "20px" e "itálico" em "Font Style.”

Na saída, a cor de fundo do primeiro cabeçalho é diferente do segundo título, e a família de fontes é alterada. Então a família, a cor e o estilo de fontes para parágrafos e listas também são diferentes. Usamos propriedades diferentes para todos os seletores, então aqui está a saída, todas essas propriedades são aplicadas.

Conclusão

Discutimos o conjunto de regras no CSS neste tutorial. Escrevemos este tutorial para explicar o que é o conjunto de regras e como seguimos esse conjunto de regras no CSS para aplicar diferentes propriedades. Explicamos que devemos usar o nome do seletor primeiro e depois abrir um suporte encaracolado; Então, depois de abrir esse suporte encaracolado, colocamos o nome da propriedade que queremos usar e depois definir seu valor, ou também usamos a palavra -chave se disponível para esta propriedade. Discutimos que devemos seguir esta regra no CSS. Depois de aprender esse conceito com este tutorial, você usará a propriedade em seu código CSS.