Cascading Style Sheets, ou CSS, é uma linguagem que define a aparência de uma página web. CSS adiciona cor, estilo e layout à estrutura básica de um site. Assim como você escolhe suas roupas para se sentir bem e ter uma aparência elegante, CSS ajuda uma página web a se vestir e ter uma aparência atraente. No desenvolvimento web, usamos CSS para alterar a cor, o tamanho e a posição do texto e das caixas na página. Esta lição apresentará os conceitos básicos de CSS em linguagem simples. Aprenderemos o que é CSS , por que é importante e como funciona com HTML.
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É uma linguagem especial usada para estilizar páginas da web. Pense em CSS como a tinta e a decoração de um edifício. O edifício é feito de HTML , e CSS o torna bonito. Usando CSS , você pode alterar a cor de fundo, os estilos de fonte e o espaçamento ao redor dos elementos da sua página. CSS é uma ferramenta que ajuda web designers a tornar os sites mais atraentes e divertidos.
Imagine que você está colorindo um desenho. As linhas do desenho são como a estrutura básica de um site. CSS é como os lápis de cera e os marcadores que dão vida ao desenho. Com algumas regras simples, você pode transformar todo o seu desenho de simples em colorido!
CSS é usado para tornar sites atraentes e fáceis de usar. Ele mantém o estilo separado do conteúdo. Isso significa que as palavras e imagens na página (fornecidas pelo HTML ) permanecem as mesmas, enquanto CSS controla sua aparência. Ao atualizar o estilo, você não precisa alterar o conteúdo. Essa separação ajuda os desenvolvedores web a trabalharem mais rápido e torna os sites mais agradáveis de visitar.
Pense no CSS como a roupa que você escolhe. Se você usa roupas diferentes, você parece diferente, mas ainda é a mesma pessoa. CSS muda a aparência de um site sem alterar as informações nele contidas. Isso simplifica a atualização do design de um site inteiro editando apenas um arquivo CSS .
CSS trabalha em conjunto com HTML. HTML é a base que define onde os elementos devem ser colocados em uma página web. CSS então entra em cena para adicionar cores, fontes e estilo. Quando um navegador carrega uma página web, ele primeiro constrói a estrutura com HTML e, em seguida, aplica os estilos definidos em CSS .
CSS é escrito como um conjunto de regras. Cada regra tem duas partes: um seletor e um bloco de declaração. O seletor informa ao navegador qual elemento HTML estilizar. O bloco de declaração contém uma ou mais declarações. Cada declaração tem uma propriedade e um valor. A propriedade é o que você deseja alterar, e o valor indica como alterá-lo.
Por exemplo, para definir a cor de fundo da página como azul claro, você pode escrever uma regra parecida com esta:
<code>corpo {
cor de fundo: azul claro;
código>Esta regra simples muda o plano de fundo da página inteira.
Uma regra básica CSS segue um padrão simples. Ela mostra o seletor e um bloco de propriedades e valores. O padrão é assim:
<code>seletor {
propriedade: valor;
código>Aqui, o seletor escolhe qual elemento HTML será o alvo. A propriedade é o que você deseja alterar e o valor é como você deseja alterá-lo.
Por exemplo, se você quiser que todo o texto do parágrafo fique azul, escreva:
<código>p {
cor: azul;
código>Esta regra informa ao navegador da web que cada elemento <p> (parágrafo) deve ter texto azul.
Os seletores CSS permitem que você escolha quais elementos da sua página serão afetados pelas regras de estilo. Existem vários tipos de seletores, e cada um funciona de maneira diferente.
Esses diferentes seletores oferecem bastante poder para estilizar partes específicas da sua página. Eles permitem que você segmente elementos com precisão e decida como eles devem ficar.
CSS oferece diversas propriedades diferentes que você pode usar para estilizar sua página web. Cada propriedade permite alterar um aspecto específico da aparência de um elemento. Algumas propriedades comuns são:
Cada propriedade CSS é seguida por um valor. Por exemplo, para dar ao texto uma cor vermelha, você pode escrever:
<código>p {
cor: vermelho;
código>Esta regra simples faz com que todos os parágrafos tenham texto vermelho. A propriedade color controla como o texto aparece e o valor red indica a cor que ele deve ter.
A palavra "cascata" em CSS significa que os estilos podem fluir de uma regra para outra. Se duas regras pudessem ser aplicadas ao mesmo elemento, a ordem poderia decidir qual delas prevaleceria. Isso é semelhante ao empilhamento de blocos, em que um bloco às vezes cobre parte de outro.
Uma regra comum é que os estilos escritos diretamente dentro de um elemento HTML (chamados de estilos inline) substituirão os estilos no seu arquivo CSS . Outra regra é que, se um elemento pai for estilizado, seus elementos filhos poderão herdar esse estilo, a menos que sejam informados o contrário.
Por exemplo, se você definir a cor do texto de uma <div> como verde, o texto dentro dela também frequentemente aparecerá verde devido à herança. Isso ajuda a manter um design consistente em uma página da web.
Com CSS , você pode alterar as cores de várias maneiras. Você pode usar nomes de cores comuns, como vermelho , azul e verde . Você também pode usar códigos hexadecimais, como <code>#FF0000</code> para vermelho, ou valores RGB , como <code>rgb(255, 0, 0)</code>.
As fontes são outra parte importante do CSS . Uma fonte é como o estilo de escrita que você escolhe em um caderno. Em CSS , você pode alterar a família, o tamanho, a espessura e o estilo da fonte. Por exemplo, se quiser que seus parágrafos apareçam em Arial, você pode usar:
<código>p {
família de fontes: Arial, sem serifa;
código>Esta regra informa ao navegador para exibir o texto na fonte Arial, se estiver disponível, e usar outra fonte semelhante, se não estiver.
Alterar cores e fontes com CSS torna o texto mais fácil de ler e sua página da web mais interessante de se ver.
O Modelo de Caixa CSS é uma maneira de entender como as diferentes partes de um elemento estão organizadas em uma página. Cada elemento é como uma caixa. O modelo de caixa tem quatro partes:
Imagine uma fotografia. A fotografia em si é o conteúdo. O tapete que envolve a fotografia é como o enchimento. A moldura que mantém tudo unido é a borda. E o espaço ao redor da moldura é a margem. Usando este modelo, você pode garantir que todas as partes do seu design tenham espaço e equilíbrio adequados.
CSS não se trata apenas de cores e fontes; ele também ajuda a organizar elementos em uma página web. Isso se chama layout e posicionamento. Com CSS, você pode decidir onde cada elemento aparece na página.
Existem várias maneiras de controlar o layout de uma página da web, incluindo:
Usar essas técnicas de layout é como organizar brinquedos em uma prateleira. Você decide onde cada brinquedo ficará para que todos tenham espaço suficiente e fiquem organizados. Isso torna sua página mais organizada e convidativa.
Aqui está um exemplo de como HTML e CSS funcionam juntos. Este código de exemplo mostra uma página web simples com alguns estilos:
<código><!DOCTYPE html>
<html>
<cabeça>
<estilo>
corpo {
cor de fundo: azul claro;
}
h1 {
cor: marinho;
tamanho da fonte: 24px;
}
p {
cor: verde;
tamanho da fonte: 18px;
}
</estilo>
</cabeçalho>
<corpo>
<h1>Minha primeira página da web</h1>
<p>Esta é uma página da web simples estilizada usando CSS.</p>
</corpo>
</html></code>Este código cria uma página web com fundo azul-claro. O texto do cabeçalho é azul-marinho e o texto do parágrafo é verde. O CSS dentro da tag <code><style></code> mostra como as regras são escritas e aplicadas.
Você pode adicionar CSS ao seu HTML de três maneiras principais. Cada método tem sua utilidade, dependendo da situação:
O método externo é o mais comum no desenvolvimento web profissional porque mantém HTML organizado e permite que você atualize estilos em muitas páginas ao mesmo tempo.
CSS é muito útil em muitos aspectos. Aqui estão alguns benefícios de usar CSS no desenvolvimento web:
Usar CSS é como ter uma caixa de ferramentas especial. Cada ferramenta na caixa de ferramentas ajuda você a melhorar a aparência da sua página web facilmente. À medida que você pratica, verá o quão poderoso CSS pode ser para tornar sites bonitos e fáceis de usar.
Todos os sites que você visita usam CSS de alguma forma. Dos seus sites de desenho animado favoritos às páginas de projetos escolares, CSS ajuda a criar um layout divertido e fácil de ler. Quando você vê uma página colorida com espaçamento organizado e texto claro, é CSS em ação.
Considere o design de sites populares, como os de jogos, desenhos animados ou histórias online. O uso criterioso de cores, fontes e layouts ajuda a tornar esses sites interessantes e envolventes. CSS também é usado em aplicativos e sites mobile, garantindo que o conteúdo tenha uma boa aparência tanto em telas grandes quanto em celulares pequenos.
No dia a dia, CSS é semelhante à decoração de um ambiente. Você pode escolher um tema para o seu quarto, pendurar quadros coloridos e organizar seus móveis de forma organizada. O CSS faz o mesmo com sites. Ele traz ordem e beleza ao espaço digital, tornando-o agradável para os visitantes.
Aqui estão os principais pontos que aprendemos sobre CSS:
CSS é uma parte vital do desenvolvimento web, tornando os sites bonitos e fáceis de navegar. À medida que você explora mais e tenta criar suas próprias páginas, lembre-se de que CSS é sua ferramenta para expressar criatividade. Divirta-se experimentando cores, fontes e layouts, pois cada pequena mudança contribui para a magia de um site bem projetado.
Continue praticando e observando seus sites favoritos. Observe como diferentes estilos são usados para capturar sua atenção e criar uma experiência agradável. Com o tempo, você verá o quão poderoso CSS pode ser para transformar estruturas HTML simples em páginas visualmente envolventes.