Você está visualizando atualmente O que é CSS e como usar?
Ícone feito por Julien Monty , Obrigado :)

O que é CSS e como usar?

O mundo HTML é interessante, no entanto, ele é inteiramente estrutural, ou seja, ao utilizar o HTML temos pouquíssimas opções de como estilizar a página adicionando cores, bordas, espaçamentos, etc.  Para suprir esta necessidade de controlar os estilos de uma página web foi criado o CSS (Cascading Style Sheets).   Combinando o HTML com o CSS os designers descobriram uma forma muito eficiente de dar as páginas a beleza que elas mereciam. Nessa aula iremos entender um pouco como utilizar o CSS.    

Aqui no CSM nós adoramos postar conteúdo sobre desenvolvimento web. Quer saber mais? acesse aqui.

Primeiros passos com CSS

A primeira coisa que devemos entender é que o CSS é um tipo de “configuração” que o navegador aplica a página web. Sendo assim, ao utiliza-lo precisamos especificar ao navegador qual página e quais elementos vamos querer estilizar.   Portanto, existem 3 formas de adicionar CSS a uma página html:  

a) INLINE  – O estilo adicionado inline é colocado diretamente dentro do elemento html através do atributo style. Essa forma de adicionar estilo ao elemento é a que possui maior prioridade dentre todas as outras. Veja o exemplo:  

<!DOCTYPE html>
<html>
<head>
    <title>Primeira página</title>
</head>
<body>
    <div style="font-size:50px"> eu sou uma div estilizada</div>
</body>
</html>

 b) Via tag style  – É possível ainda estilizar um elemento criando uma tag dentro do html chamada <style></style>. Dentro desta tag você poderá inserir código CSS e eles irão ser aplicados a página. Veja um exemplo:  

<!DOCTYPE html>
<html>
  <head>
   <title>Primeira página</title>
  </head>
<body>

 <div id="elemento"> eu sou uma div estilizada</div>
 <style type="text/css">
 #elemento{
 font-size:50px;
 }
 </style>
</body>
</html>

 c) Via arquivo externo – Por fim, a ultima forma de inserir CSS em uma página HTML é utilizar um arquivo com a extensão .css. É importante lembrar que para inserir os estilos na pagina html é necessário adicionar o arquivo no <head></head> da página. Veja um exemplo:    

<!DOCTYPE html>
<html>
<head>
 <title>Primeira página</title>
 <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
 <div id="elemento"> eu sou uma div estilizada</div>
</body>
</html>

Seletores CSS

Para utilizar o CSS de forma eficiente devemos saber como reaproveitar código e escrever o mínimo possível de configurações repetidas. Para indicar ao navegador qual elemento deve ser estilizado são utilizados os seletores.   

Selecionando usando o elemento html

Podemos indicar para o navegador para aplicar o estilo em todos elementos do html. por exemplo:  

a {
       color:red;
}

  Esta sintaxe é válida pra qualquer elemento do HTML. Mas CUIDADO, aplicar uma configuração a um elemento nem sempre é uma boa ideia.  

Selecionando via ID

  A segunda forma de indicarmos ao navegador qual elemento selecionar é utilizar um id. veja um exemplo.  

<body id="corpo">
 <div id="elemento"> eu sou uma div estilizada</div>
</body>

  neste caso dois elementos possuem ids, podemos seleciona-los no CSS da seguinte maneira:  

#corpo{
      paddind:20px;
}


#elemento{
      font-size:50px;
}

O problema do uso do ID é que ele deve ser único em uma página. Você nunca poderá colocar dois IDs iguais.   

Selecionando utilizando classes

As classes são a forma mais comum de aplicar CSS a uma página. Uma classe é definida pelo usuário e você pode aplica-la quantas vezes for necessário. Veja um exemplo:  

<body>
 <div class="minhaclasse"> eu sou uma div estilizada</div>
</body>

  No arquivo CSS escreveriamos da seguinte forma para estilizar:  

.minhaclasse{
    font-size:50px;
}

Principais propriedades CSS

font-family: Define a família da fonte utilizada. Exemplos:

font-family: Arial, Verdana, Geneva, sans-serif;
font-family: Georgia, "Times New Roman", Times, serif;

font-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique. Exemplos:   

font-style: italic;
font-style: normal;

font-weight : Define a propriedade de intensidade de uma fonte na sequência de valores de ‘100’ a ‘900’, cada número indica uma fonte mais intensa (escura) que o valor anterior. Exemplos:   font-weight: normal;  (ou valores de 100 a 500)

font-weight: bold;  (ou valores de 600 a 900)

font-size: Define o tamanho da fonte.

Exemplo:

font-size: 12pt;

letter-spacing: Controla o espaçamento entre as letras de um texto. Exemplo:  

letter-spacing: 5px;

word-spacing: Controla o espaçamento entre as palavras de um texto. Exemplo:

word-spacing: 10px;

line-height: Controla a altura entre as linhas do texto de um paragrafo. Exemplo:

line-height: 25px;

text-align: Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left, right, center e justify. Exemplo:  

text-align: center;

text-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante). Exemplo:  

text-decoration: underline;

text-transform: Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas). Os valores possíveis são:

  • capitalize – transforma o primeiro caracter de cada palavra em maiúscula
  • uppercase – transforma todas as letras de todas as palavras em maiúsculas
  • lowercase – transforma todas as letras de todas as palavras em minúsculas
  • none – cancela algum valor que tenha sido herdado
text-transform: uppercase;  

text-indent: Define o tamanho da endentação para a primeira linha do texto contida em um bloco, ou seja, o deslocamento para a direita de um paragrafo. Exemplo:  

text-indent: 20px;

color: Define a cor do texto de um texto.

Exemplos:

color: red;
color: rgb(255,0,0);
color: #FF0000;

font: Propriedade para definir em um único local vários estilos para a fonte. A sintaxe geral para font: [style] [variant] [weight] [size] [/line-height] [family].

Exemplo:  

font: normal small-caps bold 14px "Comic Sans MS", sans-serif;

Nota: Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).  

width: Define o comprimento (largura) de um elemento.

Exemplo:

width: 100px;

height: Define a altura de um elemento.

Exemplo:

height: 50px;

border: Define bordas para um elemento.

Exemplo:

border:1px solid #CCC;
border-bottom:5px solid #97B2B9;

background: Define as propriedades relacionadas ao fundo de exibição.

Exemplo:

background:url("images/fundo-topo.png") no-repeat;

margin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.   margin: 15px;

margin: 10px 1px 5px 20px;

A última atribuição do exemplo acima é equivalente a:

margin-top: 10px;
margin-right: 1px;
margin-bottom: 5px;
margin-left: 20px;

padding: Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos.   padding: 5px;

padding: 10px 5px 5px 10px;

float: Esta regra faz com que o box seja retirado de sua posição  no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento.

Exemplo:  

 float: left;

float: right;  

Se você quer saber mais sobre esse assunto.

Acesse este link e confira um tutorial mais detalhado:   https://www.chiefofdesign.com.br/css/

Tags:

Vinicius dos Santos

Apenas um apaixonado por Ciência da Computação e a forma com que ela pode transformar vidas!

Deixe um comentário

dois + 15 =