Visão geral do básico sobre CSS

Além dos termos HTML, existem outros termos como CSS, dessa forma você vai aprender o básico sobre CSS. Assim, esses termos incluem seletores, propriedades e valores. Da mesmo forma que a terminologia HTML, quanto mais você trabalha com CSS, mais esses termos se tornarão uma segunda natureza.

Seletores

À medida em que você adiciona os elementos em uma página da web, o CSS básico estiliza os elementos.

A seletor designa exatamente a qual elemento ou elementos em nosso HTML direcionar e aplicar estilos (, como cor, tamanho e posição).

Os seletores podem incluir uma combinação de qualificadores diferentes para selecionar elementos exclusivos, todos dependendo da especificidade que desejamos ser.

Por exemplo, podemos selecionar todos os parágrafos de uma página ou selecionar apenas um parágrafo específico de uma página.

Os seletores geralmente segmentam um valor de atributo, como um id ou class valor ou segmentar o tipo de elemento, como <h1> ou <p>.

No básico do CSS, os seletores usam colchetes, [], que ativam os estilos nos elementos selecionado. O seletor aqui está segmentando todos <p> elementos.

p { ... }

Veja também:

Estrutura Básica Do HTML
Introdução rápida sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
JavaScript: acelere seu site Usando a Tag script

Propriedades

O elemento selecionado recebe uma propriedade que determina os estilos desse elemento.

Os nomes das propriedades caem após um seletor, entre colchetes, [], e imediatamente antes de dois pontos: Existem inúmeras propriedades que podemos usar, como background, color, font-size, height, e width, e frequentemente novas propriedades aparecem.

No código a seguir, a propriedade que define o tamanho dos elemento <p> é font-size com o valor de 20px.

p {
    font-size: 20px;
}

Valores

Até o momento, selecionamos um elemento com um seletor e determinamos qual estilo gostaríamos de aplicar com uma propriedade.

Agora podemos determinar o comportamento dessa propriedade com um valor. Dessa forma para identificar os valores, basta olhar o texto entre os dois pontos (:) e ponto e vírgula(;).

Aqui estamos selecionando todos <p> elementos e definir o valor do color propriedade a ser orange e o valor do font-size propriedade a ser 16 pixels.

p {
    color: orange;
    font-size: 20px;
}

Para revisar, no básico no CSS, nosso conjunto de regras começa com o seletor, que segue imediatamente por colchetes.

Dentro desses colchetes, há declarações que consistem em pares de propriedades e valores. Cada declaração começa com uma propriedade, seguida por dois pontos, o valor da propriedade e, finalmente, um ponto e vírgula.

É uma prática comum recuar pares de propriedades e valores dentro dos colchetes. Assim como no HTML, esses recuos ajudam a manter nosso código organizado e legível.

Sintaxe

Nome da tag {
    Declaração; = Propriedade: valor;
}

Exemplificado:

a {
    color: red;
}

Esboço da sintaxe CSS, incluindo um seletor, propriedades e valores

Conhecer alguns termos comuns e a sintaxe geral são o básico do CSS é um ótimo começo, mas temos mais alguns itens a aprender antes de nos aprofundarmos demais. Especificamente, precisamos examinar mais de perto como os seletores funcionam no CSS.

Trabalhando com seletores

Os seletores, como mencionado anteriormente, indicam quais elementos HTML estão sendo denominados.

É importante entender completamente como usar seletores e como eles podem ser alavancados.

O primeiro passo é familiarizar-se com os diferentes tipos de seletores. Começaremos com os seletores mais comuns: tipo, classe, e ID seletores.

Seletores de tipo

Tipo os seletores direcionam elementos pelo tipo de elemento. Por exemplo, devemos desejar segmentar todos os elementos da divisão, <div>, usaríamos um seletor de tipo de div.

O código a seguir mostra um seletor de tipos para elementos de divisão, bem como o HTML correspondente selecionado.

CSS

div {...}

HTML

<div>...</div>         

<div>...</div>

Seletores de classe

Classe os seletores nos permitem selecionar um elemento com base nos elementos class valor do atributo.

Os seletores de classe são um pouco mais específicos que os seletores de tipo, pois selecionam um grupo específico de elementos em vez de todos os elementos de um tipo.

Os seletores de classe nos permitem aplicar os mesmos estilos a diferentes elementos de uma só vez, usando os mesmos class atribuir valor entre vários elementos.

No básico do CSS, as classes usam o ponto final para indicar que é um seletor de classe, logo seguido com o nome do valor da classe.

Aqui, o seletor de classes selecionará qualquer elemento que contenha o class valor do atributo de awesome, incluindo elementos de divisão e parágrafo.

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

Seletores de ID

ID os seletores são ainda mais precisos que os seletores de classe, pois visam apenas um elemento único de cada vez.

Assim como os seletores de classe usam um elemento class valor do atributo como seletor, os seletores de ID usam um elemento id atribuir valor como um seletor.

Independentemente de qual tipo de elemento ele seja, o ID seleciona apenas um elemento por página.

Se usados, eles devem visar a reserva de elementos significativos, ou seja, elemento específico e importante para o design da página.

No CSS, os seletores de ID usam o sinal de hashtag, #, seguido pelo valor do atributo. Aqui, o seletor de ID selecionará apenas o elemento que contém o id valor do atributo de shayhowe.

CSS

#shayhowe { ... }        

HTML

<div id="shayhowe">...</div>

Seletores adicionais

Os seletores são extremamente poderosos, e os seletores descritos aqui são os seletores mais comuns que encontraremos.

Esses seletores também são apenas o começo. Muito mais seletores avançados existem e estão prontamente disponíveis.

Quando você se sentir confortável com esses seletores, não tenha medo de procurar alguns dos seletores mais avançados.

Tudo bem, tudo está começando a se unir. Adicionamos elementos a uma página dentro do nosso HTML e podemos selecionar esses elementos e aplicar estilos a eles usando CSS.

Agora vamos conectar os pontos entre nosso HTML e CSS e fazer com que esses dois idiomas funcionem juntos.

Referenciando CSS

Para que nosso CSS converse com nosso HTML, precisamos fazer referência ao nosso arquivo CSS em nosso HTML.

A melhor prática para referenciar nosso CSS é incluir todos os nossos estilos em uma única folha de estilos externa, referenciada a partir de <head> elemento do nosso documento HTML.

O uso de uma única folha de estilos externos nos permite usar os mesmos estilos em um site inteiro e fazer alterações rapidamente em todo o site.

Outras opções para adicionar CSS

Outras opções para referenciar CSS incluem o uso de estilos internos e embutidos.

Você pode encontrar essas opções em estado selvagem, mas elas geralmente são desaprovadas, pois tornam a atualização de sites complicada e pesada.

Para criar nossa folha de estilo CSS externa, desejaremos usar nosso editor de texto preferido novamente para criar um arquivo de texto sem formatação com um .css extensão de arquivo.

Nosso arquivo CSS deve ser salvo na mesma pasta ou subpasta em que nosso arquivo HTML está localizado.

Dentro do <head> elemento do documento HTML, o <link> O elemento tem a função de definir o relacionamento entre o arquivo HTML e o arquivo CSS.

Como estamos vinculando ao CSS, usamos o rel atributo com um valor de stylesheet para especificar seu relacionamento.

Além disso, o href O atributo (ou referência de hiperlink) tem a função de identificar o local ou caminho do arquivo CSS.

Considere o seguinte exemplo de um documento HTML <head> elemento que faz referência a uma única folha de estilo externa.

<head>
    <link rel="stylesheet" href="main.css">
</head>

Pontos de atenção

Para que o CSS seja renderizado corretamente, o caminho do href o valor do atributo deve se correlacionar diretamente com o local em que nosso arquivo CSS é salvo.

No exemplo anterior, o main.css o arquivo tem o armazenamento no mesmo local que o arquivo HTML, também conhecido como diretório raiz.

Se nosso arquivo CSS estiver dentro de um subdiretório ou subpasta, o href o valor do atributo precisa se correlacionar com esse caminho de acordo.

Por exemplo, se o nosso main.css arquivo se encontra em um subdiretório chamado stylesheets, o href valor do atributo seria stylesheets/main.css, usando uma barra para frente para indicar como se mover para um subdiretório.

Neste ponto, nossas páginas estão começando a ganhar vida, lenta, mas seguramente.

Não nos aprofundamos muito no CSS, mas você deve ter notado que alguns elementos têm estilos padrão que não declaramos em nosso CSS.

Esse é o navegador que impõe seus próprios estilos CSS preferidos para esses elementos. Felizmente, podemos substituir esses estilos com bastante facilidade, que é o que faremos a seguir usando as redefinições CSS.

Usando redefinições CSS

Todo navegador tem seus próprios estilos padrão para diferentes elementos. Como o Google Chrome processa títulos, parágrafos, listas e assim por diante pode ser diferente de como o Internet Explorer se sai. Para garantir a compatibilidade entre navegadores, as redefinições de CSS se tornaram amplamente utilizadas.

As redefinições de CSS levam todos os elementos HTML comuns com um estilo predefinido e fornecem um estilo unificado para todos os navegadores.

Essas redefinições geralmente envolvem a remoção de qualquer tamanho, margem, preenchimento ou estilo adicional e a redução desses valores.

Porque o CSS cai de cima para baixo — mais sobre isso em breve — nossa redefinição precisa estar no topo da nossa folha de estilos.

Isso garante que esses estilos sejam lidos primeiro e que todos os diferentes navegadores da web estejam trabalhando a partir de uma linha de base comum.

Existem várias redefinições diferentes disponíveis para uso, todas com seus próprios fortes. Uma das redefinições mais populares é Redefinição de Eric Meyer, que foi adaptado para incluir estilos para os novos elementos HTML5.

Se você está se sentindo um pouco mais aventureiro, também há Normalize.css, criado por Nicolas Gallagher.

Normalize.css não se concentra no uso de uma redefinição rígida para todos os elementos comuns, mas na definição de estilos comuns para esses elementos. Requer uma compreensão mais forte do CSS, bem como a conscientização sobre o que você gostaria que seus estilos fossem.

Compatibilidade e teste entre navegadores

Como mencionado anteriormente, diferentes navegadores renderizam elementos de maneiras diferentes.

É importante reconhecer o valor na compatibilidade e teste entre navegadores. Os sites não precisam ter a mesma aparência em todos os navegadores, mas devem estar próximos.

Quais navegadores você deseja oferecer suporte e em que grau é uma decisão que você precisará tomar com base no que é melhor para o seu site.

Ao todo, há um punhado de coisas a serem procuradas ao escrever o CSS. A boa notícia é que tudo é possível e, com um pouco de paciência, descobriremos tudo.

Veja o primeiro artigo do Roadmap: Passo a passo de como funciona a internet

Conclusão

Se você quer saber mais sobre o básico do CSS, você está no lugar certo, aqui no site tem um tutorial gratuito é bem detalhado para você aprende tudo sobre o assunto. Além disso o conteúdo é atualizado frequentemente.

Então é isso espero te ajuda, continue estudando, aqui no site tem muito conteúdo que pode se auxiliar. Bons estudo e até o próximo artigo.

Perguntas frequentes