Principais propriedades e suas funções.

Color

A primeira propriedade CSS que vamos ver será a propriedade Color:

A propriedade Color é a cor do nosso texto, por exemplo, usando a div header e a class titulo no nosso h1 e selecionando essa class na nossa página CSS, o texto do nosso título ficou da cor laranja escuro. Veja a seguir o passo a passo:

  1. Vamos adicionar a div header, e dentro dessa div vamos colocar as classes topo e a titulo em nossa página HTML:
  2. Feito isso, basta adicionarmos a class titulo na nossa página css e colocarmos a propriedade color e escolhermos a cor que gostaríamos:

Background

A propriedade Background serve para não somente cores sólidas, mas também para imagens e outros elementos, veja a seguir todos os Background existentes.

  1. Background-color: O background-color em CSS define a cor de fundo de um determinado elemento, por exemplo, utilizando esse background-color eu irei alterar a cor de fundo desse texto.



  2. Background-image: Para isso é necessários criarmos uma div com uma class, por exemplo, exemplo-back, feito isso vamos na nossa página CSS e adicionamos nossa class conforme aprendemos anteriormente, após isso, para termos nossa imagem de fundo, basta utilizarmos o site Pexels para conseguirmos nossa imagem pesquisando por textura background e adicionarmos a nossa pasta de imagens, agora dentro do nosso CSS escrevemos a propriedade background-image porém, além disso, colocamos o seguinte parâmetro, (:url) para especificarmos o caminho da nossa imagem, no entanto, não é só adicionarmos esse background, temos que ajustar o tamanho e posicionamento da nossa imagem. No geral o nosso código ficaria assim:

    No HTML:


    No CSS

    3. Os demais background utilizados são:
  3. Background-size: É utilizado para ajustar o tamanho da imagem de fundo que queremos que apareça.
  4. Background-repeat: Serve para dizermos se queremos que nossa imagem se repita ou não e a direção da repetição.
  5. Background-position: Para informarmos a posição da nossa imagem de fundo, se queremos que ela fique ao topo, ou centro, a esquerda ou a direita.

    6. Exite um atalho para que não seja necessário ficar criando vários e vários backgrounds com vimos nas imagens acima, para isso, vamos colocar apenas um background e (:), e após isso é so adicionarmos as propriedades background que gostaríamos, por exemplo:


    Basicamente, quando querermos adicionar uma imagem com fundo utilizaremos mais da seguinte forma: colocando um background-image primeiro e depois só utilizar o background-size: cover para a imagem se ajustar automaticamente.



Border

O Border é bastante utilizado para personalizar nosso código na hora de criarmos botões e estarmos tento a possibilidade de trabalharmos de forma mais estilizada. Dentro dessa propriedade CSS chamada border podemos adicionar alguns atributos, tais como o tamanho da borda em pixel por exemplo 1px. Outro atributo que podemos especificar o estilo da bordar que vamos querer, existem vários tipos de estilos de borda para utilizarmos, os principais são: solid , dotted, dashed, double, groove, ridge, inset, outset, none, hidden .
Além disso, existe a questão da onde queremos que essa borda apareça, quando colocamos só border e passamos o tamanho da borda o tipo e a cor, ela vai ficar em toda a area. Se especificarmos o lado que queremos ele vai mostrar somente daquele lado, para isso vamos precisar somente colocar o lado que queremos que aquela borda especifica fique, por exemplo: border-top, border-left, border-right e border-bottom.
Além dessas bordar temos também a borda arredondada, para usarmos essa borda vamos adicionar a propriedade border-radius e dentro dessa propriedade vamos adicionar os atributos de porcentagem ou de pixels para escolhermos o tamanho do nosso efeito arredondado.

No código CSS ficará da seguinte forma:

Margin

A propriedade margin serve ára dar um espaço em branco em uma das direções do elementos, por exemplo a margem que deixamos nas laterias do nosso site em todos os títulos e parágrafos, veja a seguir como fizemos a utilização dela:


Essa margem pode ser adicionada a qualquer direção da nossa página, margin-top para a margem no topo do nosso site, margin para as laterais e marge-bottom para a margem na parte de baixo da página web, caso quiséssemos adicionar a margem de um lado especifico e só colocar margin- e o lado que queremos nossa margem, left para esquerda e right para direita. Caso seja de necessidade do usuário adicionar margens de diferentes valores, existem um atalho para nao poluirmos tanto nosso código, é só colocarmos a propriedade margin e escrevermos os valores de cada lado, começando pelo top, depois right, bottom e por fim, left, nessa respectiva ordem. Exemplo: margin: 30px 70px 40px 25px; (30px para o topo, 70px para a direita, 40px para a parte de baixo e 25px para a esquerda.)

Caso fosse necessário afastarmos nossos parágrafos, nos adicionaríamos a propriedade margin-bottom a nossa tag p e colocaríamos o valor que queremos que afaste, por exemplo.

Conclusão

Neste material, exploramos algumas das principais propriedades do CSS e suas funções essenciais na estilização de páginas web. A propriedade color permite definir a cor do texto, enquanto background possibilita a personalização do fundo com cores ou imagens. Já border é fundamental para criar bordas estilizadas, dando um toque diferenciado aos elementos, e margin auxilia no espaçamento externo dos componentes da página.
O domínio dessas propriedades é essencial para desenvolver layouts visualmente agradáveis e organizados. Ao compreender e aplicar corretamente esses conceitos, você poderá criar designs mais personalizados e responsivos, garantindo uma melhor experiência para os usuários.

Padding

O padding é bem parecido com o margin, com a diferença que, o padding ao invés de dar um espaçamento em branco, ele vai dar um preenchimento dentro do nosso elemento. Para utilizar essa propriedade basta seguirmos as mesma regras da propriedade passada.

Essa propriedade padding é muito utilizada para estilizar botões de forma simples e rápida, para isso, vamos criar uma classe, por exemplo botao dentro do link que leva para nossa página principal, feito isso vamos adicionar uma margem ao nosso botão de 33%, personalizar a cor de fundo usando o background-color, mudando a cor do link para branco através do color, preenchendo o fundo com o padding e arredondando as bordar com o border-radius. Outra propriedade que vamos ver um pouco mais pra frente, porém, que já vamos introduzir nesta parte do curso é para dar efeito ao passar o cursor do mouse em cima do botão, para isso e necessário repedir a classe e colocarmos (:hover), hover significa sobre, ou seja, oque vai acontecer quando o mouse tiver sobre. Dentro dessa propriedade vamos por exemplo, adicionar um background-color com uma cor diferente e pronto, temos um botão rápido, simples e utilizável.



Voltar para a principal



Veja como ficou o código CSS...



Width e Height

Basicamente as propriedades width e height são a altura e largura dos nossos elementos com por exemplo, as imagens. Além disso, temos também o max-width, com essa propriedade vamos dizer qual a largura máxima do nosso elemento, e conforme o tamanho da nossa tela for alterando, nosso elemento irá se adaptando até chegar no valor máximo especificado, para isso, vamos adicionar uma div neste parágrafo com a class teste, feito isso nos vamos adicionar as seguintes propriedades ao nosso CSS: background-color, max-height e max-widht. Com essas propriedades, nossa div ira ficar de certa forma, responsiva, sem a necessidade de java ou java sript. Veja a seguir como ficou o código HTML e o código CSS.

HTML:


CSS:


Essa forma de se utilizar o max-width e max-height se tornam muito interessante quando há a necessidade de trabalharmos com páginas adaptativas para determinados tamanhos de tela do usuário, porém existem formas mais eficazes de realizarmos essas adaptações do nosso site que veremos mais pra frente.

Text

Existem varias propriedades relacionadas ao texto, tais como alinhamento, decoração, transformação, espaçamentos, entre outros. Para identificarmos bem as diferenças entre todas as propriedades de texto vamos criar uma div com a class teste-"nome da propriedade", exemplo: teste-textaling.

  1. text-aling: Essa propriedade possuí vários atributos, tais como, center, end, justify, left, right,start, inherit, initial e unset.
  1. center: Responsável por alinhar nosso texto ao centro da nossa página.
  2. end: Alinha nosso texto a direita.
  3. end: Alinha nosso texto a esquerda.
  4. justify: Deixa todos os cantos do nosso parágrafo quadrados.

    5. Sem justify!

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vero dolor consectetur dolore sapiente in cum vitae? Quis necessitatibus, ipsa similique enim possimus, dolores facilis quasi alias ex corporis adipisci.At, amet voluptatibus consectetur repudiandae natus fugiat minima repellendus, libero eum soluta vitae placeat, cum quam corporis. Accusantium fugiat in, ad debitis omnis laborum mollitia eum repudiandae tenetur nostrum similique.Facilis, quod deleniti maxime voluptatem neque quasi quos ad atque sint est, dolorum ipsum tempora. Aperiam molestiae, fuga voluptatibus placeat architecto consequatur inventore illum natus, quod obcaecati odio dicta dignissimos.Consequuntur doloribus reiciendis ipsam officia asperiores, maiores numquam commodi, quia similique cumque sed magnam ad facilis corrupti aperiam repellat? Laborum, tempora. Perspiciatis velit corrupti aut debitis eius impedit. Vitae, quidem!

    Com justify!

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, harum ipsum? Quam voluptatem, facilis, debitis aut in earum consectetur consequatur voluptas ex pariatur atque quia nisi inventore aliquid incidunt odit.Nostrum nisi sapiente reprehenderit doloremque dolorum modi ducimus exercitationem aperiam animi molestias delectus atque vitae voluptate accusamus at, eos deleniti et. Odio sapiente nam, eum laborum ratione unde vel illo.Beatae enim accusamus deleniti quos quia maiores amet quas repellendus temporibus cumque, ab harum ipsam neque dicta cupiditate. Deserunt ipsa placeat vitae ipsam reprehenderit consequuntur hic recusandae culpa quidem inventore.Voluptas rem necessitatibus debitis repellendus a? Quo consectetur praesentium est illum excepturi non repudiandae quod ut necessitatibus? Voluptate distinctio sit sint maiores voluptas! Totam dolor cupiditate eos fugit laborum dicta.

  5. text-shadow: Cria um sombreado nas palaras selecionadas.

Além desses atributos de alinhamento, existe o text-decoration. O text-decoration é muito utilizado com os links das nossas páginas. Quando colocamos um link ele sempre vai ter um sublinhado por padrão, para mudar isso nos usamos o text-decoration, bastar colocarmos um style diretamente na tag e definir que o text-decoration será "none" o "nenhuma". Ficaria da seguinte forma:

No código HTML ficaria da seguinte forma:

E o resultado seria:
Voltar para principal

Existem outras porpiredades do text-decoration além do none, que seriam:

  1. overline: Coloca uma linha sobre todo meu texto.

  2. line-thtoung: Ele risca todo nosso texto selecionado, por exemplo:

    Gustavo


  3. underline: Que sublinha todo nosso texto selecionado.

Outra porpriedade de texto que utilizamos bastante seria a text-transform, essa propriedade é muito utilizada para muitos recursos, como por exemplo, tudo letra maiuscula, tudo letra minuscula ou capitalizar.

  1. uppercase: Faz com que todas as letrar selecionadas fiquem maiusculas.

  2. lowercase: Faz com que todas as letrar selecionadas fiquem minusculas.

  3. capitalize: Vai capitalizar todo nosso texto, ou seja, deixar sempre a primeira letra da nossa palavra em maiúsculo.

  4. text-indent: Vai dar uma margem na primeira linha de todos os parágrafos selecionados, por exemplo, uma margem de 90px aplicada nesse parágrafo.

Letter-spacing

O letter-spacing é utilizado quando queremos dar um certo espaçamento entre as letras das palavras contidas do nosso site, podendo ser positivo ou negativo, por exemplo, vamos colocar um espaçamento de 3px em todas as letras do próximo parágrafo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia exercitationem cupiditate nemo, earum animi in culpa? Officia laboriosam in officiis blanditiis voluptas repellat reprehenderit, rerum laudantium pariatur ipsam laborum fuga.

live-height

O line-height é utilizado para alterarmos o espaçamento entre as linhas do nosso site, e novament, esse espaçamento pode ser positivo ou negativo. Por exemplo, vamos dar um espaçamento de 50px no nosso próximo parágrafo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet error suscipitiste veritatis possimus aspernatur tenetur quasi hic quis eaque, deserunt voluptas officia, mollitia voluptatibus, optio odit illum esse illo.Unde vel, asperiores, tenetur odio aliquid delectus magni quos dolores corrupti ducimus deserunt pariatur quibusdam perferendis doloribus quis soluta quod tempora quaerat quam sint voluptatibus necessitatibus harum officiis minus. Dolores!

Conclusão

A propriedade padding é essencial para estilização, pois permite adicionar espaçamento interno aos elementos, proporcionando um design mais organizado e agradável. Como visto, essa propriedade é amplamente utilizada na criação de botões estilizados, permitindo ajustes rápidos e eficientes para melhorar a experiência do usuário.

Além do padding, exploramos outras propriedades fundamentais, como width e height, que controlam o tamanho dos elementos e contribuem para a responsividade do layout. O uso do max-width e max-height também se destaca como uma estratégia eficiente para adaptação de elementos em diferentes tamanhos de tela.

No que diz respeito à estilização de textos, vimos a importância de propriedades como text-align, text-decoration, text-transform, letter-spacing e line-height. Essas propriedades são essenciais para a personalização da aparência textual, permitindo ajustes na disposição, espaçamento e formato das palavras.

Compreender e aplicar corretamente essas propriedades possibilita a criação de páginas mais atrativas e funcionais. À medida que avançamos no estudo do CSS, descobriremos técnicas ainda mais sofisticadas para aprimorar o design e a usabilidade dos nossos projetos.

Font

A propriedade font no CSS é essencial para definir a aparência do texto em um site. Ela permite configurar, de forma abreviada, várias características da fonte, como estilo (itálico ou normal), peso (negrito ou regular), tamanho e a própria família da fonte. Isso ajuda na legibilidade, na identidade visual da página e na experiência do usuário.

  1. font-family: O font-family, ou, familia da fonte, o vscode já apresentará os tipos de fonte cosiderados padrões, que iram rodar em praticamente qualquer navegador. Dessa forma utilizamos as fontes padrões do vscode.
  2. font-size: O font-size é utilizado para alterarmos o tamanho da nossa fonte em pixel conforme a necessidade do desenvolvedor.

Existe uma forma de adicionarmos fontes externas ao nosso site através do Google fonts. Uma curiosidade que muitas pessoas não sabem é que as fontes também possuem direitos autorais, ou seja, você não pode sair pagando qualquer fonte e colocar no seu site que isso provalvemnte vai dar problema para sua página.

O Google fonts te fornece fontes que são livres de direitos autorais para que nos possamos utiliuzar em nossas páginas sem nenhum tipo de problema.
Como adicionar fontes externas ao meu site.

font-style

No font-style podemos expecificar se queremos nossa fonte italica, normal ou oblica.

font-weight

O font-weight serve para determinarmos a grossura da nossa funte, por exemplo, podemos utilizar a propriedade font-weight para deixar a fonte em negrito adicionando o atributo bold. Além disso, podemos selecionar uma grossura pré selecionada que vem junto com a fonte, a maioria das fontes vem com variações de grossura da fonte, sendo o 100= mais fine e 900= mais grossa.

Conclusão

Em resumo, a propriedade font no CSS é uma ferramenta poderosa para personalizar a tipografia de um site, influenciando diretamente na estética e na legibilidade do conteúdo. Com o uso de font-family, font-size, font-style e font-weight, é possível criar textos visualmente atraentes e acessíveis para os usuários. Além disso, a utilização de fontes externas, como as disponíveis no Google Fonts, permite ampliar as possibilidades de design sem preocupações com direitos autorais. Dominar essas configurações é essencial para qualquer desenvolvedor que deseja criar interfaces bem estruturadas e harmoniosas.





Voltar para a principal