Para que é usado o código CSS?
Sua função é criar regras para informar ao nosso site como queremos que ele exiba as informações e salvar comandos para elementos de estilo, ou seja, vincular nosso template HTML para um arquivo css para que o navegador entenda como deve exibir, por exemplo, a cor dos títulos ou dos textos em negrito.
Diferenças entre HTML e CSS
HTMLem sua sigla em inglês, Linguagem de marcação de hipertextosignifica “Linguagem de marcação de hipertexto“, é uma linguagem que serve para dar estrutura ao conteúdo de um site.
Não pode ser considerada uma linguagem de programação já que Não nos permite fornecer funcionalidades dinâmicas aos seus elementos, gerando apenas a estrutura da web.
Como mencionamos anteriormente, CSS adiciona propriedades de forma, cor, tamanho e margem a determinados elementos HTML, obtendo assim melhores resultados para a experiência final do usuário.
Recursos CSS
Já sabemos que cuida de toda a parte visual, mas, quais são suas características?
- Serve para complementar outras línguas como HTML.
- Nos permite criar blocos de instruções aninhados: Isso significa que podemos fazer modificações gerais aplicando-as ao todo, simplificando todo o trabalho.
- Funciona em todos os navegadores e plataformas: CSS é amplamente utilizado, o que o torna compatível com todos eles sem problemas.
- Melhora a acessibilidade web: ao separar a parte textual da parte visual, fazemos com que o funcionamento do site gere melhor usabilidade.
- Tem uma sintaxe específica.
- Isso nos permite grande liberdade criativa.
- É mais preciso, pois podemos dizer o elemento exato onde queremos aplicar as propriedades.
Vantagens CSS
E por fim é importante destacar a vantagens que foram incorporadas à apresentação das páginas web, bem como ao trabalho dos desenvolvedores:
- Mais fácil de usar: permite-nos guardar e armazenar os estilos de um site independentemente do conteúdo, facilitando muito a intervenção no mesmo.
- Otimize a edição: em certas páginas o fluxo de informações pode ser muito grande e editar cada página uma por uma pode ser um trabalho muito complicado, por isso ter uma linguagem que nos permita aplicar estilos a todas elas nos poupará muito tempo.
- Ótima acessibilidade: Atualmente acessamos um site a partir de diferentes dispositivos: PC, celular, tablet… isso significa que a página deve ser otimizada e felizmente o CSS facilita essa acessibilidade graças às folhas de estilo padronizadas.
- Limpeza de código: Estar separado do código HTML garante que ele e o CSS sejam independentes e que não haja linhas de código inúteis ou que possam levar a erros.
Sintaxe do seletor
Quando criamos uma instrução em CSS isso é feito sob a determinação de um seletor, que nos informa sobre qual elemento ou bloco HTML vai atuar, suas propriedades que definirão as características que serão modificadas e o valor, que indicará o valor quantitativo ou qualitativo do imóvel que será alterado.
P {cor: #000000}
Neste exemplo básico, você agiria Seletor “P” (elemento de parágrafo) e o propriedade de cor (cor do texto) e o valor #000000 (cor preta), portanto, o resultado esperado seria que Para todos os elementos “p” do nosso site, a cor do texto seria preta.
Propriedades básicas
Existem mais de 100 propriedades CSS diferentes, portanto, saber o correto funcionamento de todos eles está apenas ao alcance do programadores front-end mais experiente. Por enquanto, sugerimos que você conheça aqueles mais utilizados e que permitem cobrir necessidades básicas:
Largura e altura.
Estas propriedades, como o seu nome indica, estarão relacionadas com o largura e altura dos elementos HTML que queremos modificar, como uma imagem ou um bloco de texto. Seus valores podem estar em pixels (px), em, rem ou porcentagem (%). Existe também uma variação destas propriedades que ajustam seus tamanhos máximo e mínimo, muito útil para sites adaptáveis a qualquer dispositivo (largura máxima; largura mínima; altura máxima; altura mínima)
Plano de fundo e borda
Com estes elementos podemos moldar os blocos HTML tanto no fundo quanto na borda.
Fundo É a propriedade com a qual podemos configurar o fundo, algumas das características específicas mais importantes são:
- cor de fundo com o qual modificaremos a cor de fundo;
- imagem de fundo, com o qual colocaremos uma imagem chamando-a através de uma URL onde ela está localizada.
- tamanho de fundocom o qual podemos adaptar as proporções do fundo de forma relativa ou absoluta.
- posição de fundocom o qual podemos definir a posição da imagem de fundo dentro do nosso bloco
- fundo de repetiçãocom esta propriedade controlaremos se queremos que a imagem de fundo definida se repita no fundo ou não.
Em relação à propriedade Fronteiravocê deve estabelecer seu espessura (largura da borda); estilo (estilo de borda) e cor (cor de borda). Quanto ao estilo, os mais comuns são sólido, pontilhado, duplo ou tracejado. Embora estas sejam suas instruções específicas, elas também podem ser definidas de forma básica com a propriedade de fronteira. Exemplo:
- .block1 { borda: 1px; sólido; azul;}
Outra particularidade deste imóvel é que eles podem ser configurados independentemente em cada lado (superior, direita, inferior e esquerda), separadamente com instruções específicas ou simplesmente inserindo seus valores, seguindo a ordem mencionada (sentido horário). Exemplo:
- .block1 {borda: 1px 2px 1px 2px;}
- .block1 {border-top:1px; borda direita:2px; borda inferior: 1px; borda esquerda: 2px}
Finalmente, a instrução raio da fronteiraIsso nos permitirá arredondar os cantos da caixa ou bloco que estamos estilizando. O valor é determinado em “px”, “%” ou “em” e como funcionalidade especial podemos modificar tanto o raio horizontal e verticalpodendo criar formas muito mais criativas.
- .block1 {raio da borda: 5px} – Todos os cantos seriam arredondados com um raio de 5px.
- .block1 {raio da borda: 5px 2em} – Todos os cantos seriam arredondados com um raio horizontal de 5px e um raio vertical de 2em.
- .block1 {raio inferior direito da borda: 5px 2em} – As alterações afetariam apenas o canto inferior direito.
Cor, família da fonte, tamanho da fonte, estilo da fonte e espessura da fonte
Os textos também são uma parte importante do conteúdo da web e por isso é fundamental conhecer também suas propriedades básicas, que são:
Família de fontes: Defina a fonte ou família específica que queremos que nosso conteúdo tenha. Podemos estabelecer diversas fontes ou famílias, para que caso alguma não esteja disponível no computador do usuário, haja alternativas disponíveis. Exemplo:
- block1 {família de fontes: «Verdana», sans-serif;} – Aqui definimos “Verdana” como fonte principal, mas caso o usuário não a possua, seriam chamadas fontes da família Sans-serif
Tamanho da fonte: Com esta propriedade nós determinamos o tamanho da fonte que queremos mostrar em nosso web design. Os valores podem ser expressos em “px”, “em”, “rem” ou “%”, embora o mais utilizado seja “em” por ser uma unidade proporcional, portanto se o usuário, por exemplo, ampliar com o navegador ou aumentar a fonte em suas configurações, todas as fontes farão isso proporcionalmente a essa modificação.
Cor: Esta é a instrução com vamos colorir nosso texto. Podemos fazê-lo através do nome da cor se for uma das cores suportadas pelos principais navegadores, com valores hexadecimais ou com valores RGB ou HSL. Com este último podemos agregar um último valor referente ao índice de transparência que varia de 0,00 a 1, por exemplo, um valor de 0,50 sendo 50% de transparência. Exemplo:
- bloco1 {Cor: #000080} – Valor hexadecimal
- block1 {Cor: marinho} – Valor expresso com o nome da cor suportada (igual ao acima)
- bloco1 {Cor: rgb (0, 0, 128, 0,50)} – Mesma cor expressa em RGB e com transparência de 50%.
- bloco1 {Cor: hsl (240, 100%, 25%, 0,50)} – Mesma cor expressa em HSL, seus valores referem-se à tonalidade expressa em graus que variam de 1º a 360º, saturação e brilho expressos em porcentagens. Finalmente o índice de transparência.
Estilo de fonte: Com esta propriedade podemos variar o estilo do nosso texto, sendo “normal” por padrão e podendo escolher “itálico” (itálico) ou “força”.
Espessura da fonte: Este é o imóvel que procuramos se quisermos deixe nosso texto em negrito. Para conseguir isso, só teremos que adicionar o valor “negrito”. Seu valor padrão é “normal”, e você pode usar outros valores relativos, como “mais claro” ou “mais ousado”, ou usar os valores numéricos de peso definidos entre 100 (linha fina), 400 (normal), 700 (negrito) e 950 (negrito extra).
Margem e preenchimento
Terminamos nossa revisão dos elementos básicos com Margem e preenchimento que se referem ao margens externas (margem), margens internas (preenchimento) dos elementos HTML aos quais nos referimos.
Os seus valores, tal como acontecia com a propriedade border, são expressos em px, em, rem ou % e podem ser referenciados de forma geral, com um valor que se aplica a todas as margens ou especificamente, através da introdução dos valores top, direita, inferior, esquerda ou seguindo a ordem estabelecida para seus valores. Exemplos:
- .block1 { preenchimento: 1px;}
- .block1 {preenchimento: 1px 2px 1px 2px;}
- .block1 { preenchimento superior: 1px; preenchimento à direita: 2%; fundo de preenchimento: 1em; preenchimento à esquerda: 2px}
Esses são todos os conceitos básicos que você deve saber como começar a estilizar seu site de uma forma mais profissional, mas você sempre se deparará com algum problema no qual terá que investigar e descobrir novos imóveis. Para isso recomendamos o site W3 School onde você poderá ampliar e aprimorar seus conhecimentos sobre CSS.
E se você se tornar um profissional Front-End e você quer se dedicar a isso, não se esqueça que na Viewnext temos uma equipe de programadores Front-End em constante crescimento e sempre há vagas que podem lhe interessar. Dê uma olhada!.