CSS - Estilo em cascata

História do CSS?

Em 1995, Håkon Wium Lie e Bert Bos apresentaram a proposta do CSS(Cascading Style Sheets) que logo foi apoiada pela W3C. Misturar estilo e estrutura era muito difícil de dar manutenção, fora que os sites ficavam uma mistura de fontes e cores.

O que é CSS?

CSS significa Cascading Style Sheets – Folha de estila em cascata.

O CSS foi criado para separar a formatação de um site do conteúdo, programado em HTML, que gerava arquivos com milhares de linhas, difícil manutenção e a falta de padrão. Imaginemos um site com 300 páginas HTML, para alterar a cor dos títulos, a fonte ou quarquer mudança, era necessário acessar todas as página e alerar todas as tags.

A W3C é um orgão formado por pesquisadores que trabalham para padronizar todas as linguagens executadas por navegadores. Visam tornar o desenvolvimento padrão e também exigir dos navegadores uma interpretação adequada e compatível, para que um site fique igual em todos os navegadores.

Regras do CSS

Veremos como modificar elementos HTML através de propriedades de ajustes de tamanho como width e height, a definir tamanhos máximos e mínimos com min-width, max-width, min-height e max-height, utilizar tamanhos relativos como porcentagem, vh e vw e também a definir a visibilidade de um elemento no navegador utilizando display, visibility e opacity através do CSS.

Seletores

Em CSS , seletores são usados para direcionar os elementos HTML em nossas páginas da web que queremos estilizar. Há uma grande variedade de seletores CSS disponíveis, permitindo uma precisão refinada ao selecionar elementos para estilizar.

Um seletor CSS é a primeira parte de uma regra CSS. É um padrão de elementos e outros termos que informam ao navegador quais elementos HTML devem ser selecionados para que os valores da propriedade CSS dentro da regra sejam aplicados a eles. O elemento ou elementos que são selecionados pelo seletor são referidos como o assunto do seletor .

Seletores para as TAGs (Tipo)

Esse grupo inclui seletores que visam um TAGs do HTML. No CSS, escreve a TAG desejada, seguida de { }, os atributos ficam no meio das chaves. No HTML não é necessário atribuir, todas as TAG H1 vão ter os atributos definidos.

body{
font-family:Arial, Helvetica, sans-serif;
}
h1{
font-family;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
line-height: normal;
text-transform: none;
color: #444444;
padding: 10px;

}
h2{
font-size: 24px;
margin-left: 20px;
color: #ED6A5A;
}
h3{
font-size: 18px;
color: #6EC1E4;
margin-left: 20px;
background-color:#E5E5E5
}
p{
font-size:16px;
margin-left: 30px;
margin-right:30px;
text-align:justify;
}

Seletores Div

Um seletor de DIV, no CSS começa com #.

São mais usadas na estrutura do site, por exemplo: menu superior, menu esquerdo, rodapé

Se for usado a propriedade ID, a DIV tem que ser única. O ID é o atributo que usamos para acesso a DIV com JavaScript.

#menu_esquerdo{
border: thin solid #CCC;
padding: 10px;

}

#menu_direito{
border: thin solid #CCC;
margin: 15px;

padding: 10px;

background-color:#E5E5E5;
}

Seletores Class

.html{
border: thin solid #CCC;
padding: 10px;

}
.css{
border: thin solid #CCC;
margin: 15px;

padding: 10px;

background-color:#E5E5E5;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Atributos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

html5 + css

Inline - Adiciona o código na tag

Era a tecnologia que tínhamos a poucos anos atrás, as páginas continuavam com milhares de linha de código e a manutenção ainda era complicada. Continuaram a busca por solução menos trabalhosa.

Interno

O código CSS fica junto com o HTML no mesmo arquivo, mas dentro da tag <head>. Foi uma grande evolução, porque tadas as tags de títulos ficam padronizadas e a font-family dentro da tag body, formata o arquivo todo. As pesquisas continuaram, porque em sites com muitos arquivos HTML, ainda precisavam ser aberto e adicionado o código CSS.

Externo

A folhas de estilo externas são arquivos de texto, salvo com a extenção.css. Na maioria das vezes, chamado style.css. Os arquivos HTML são ligados a uma ou mais arquivos CSS, atraves de um Link.

<head>
<link href="style.css" rel="stylesheet" type="text/css" />

...</head>

Estilização de conteúdo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

CSS - Estilo em cascata

História do CSS?

O que é CSS?

Regras do CSS