A TRÍADE DO DESENVOLVIMENTO WEB PARTE #2 [CSS]

[Nxtt 2]

Após uma longa jornada de estudo sobre HTML acredito que está pronto para saber mais sobre a tríade da dominação do desenvolvimento web, pois estruturada a página com nossas varias tags e elementos, precisamos dar estilo as coisas, afinal oque seria dá internet com apenas HTML.

Então passamos mais um passo e iremos ao CSS.

CSS

O CSS (Cascading Style Sheets) é uma linguagem utilizada para definir a aparência de documentos que usam linguagens de marcação, como o HTML, XML e etc... O CSS define como os elementos contidos no documento serão exibidos em tela.

A sua criação se deve a grande crescente das tecnologias de desenvolvimento,  as tecnologias estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários.

Inicialmente o estilo era todo realizado a partir de tags e atributos para o HTML. Mas isso era uma tremenda dor de cabeça aos programadores, pois era impossível definir padrões, era tudo feito manualmente elemento por elemento.

Destas complicações, nasceu o CSS. Com isso, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo do documento, enquanto o CSS encarregou-se da aplicação de estilos necessários para a aparência dela. Hoje em dia ainda é possível definir estilos por meio de atributos em tags, mas é completamente inviável desenvolver dessa forma.

O CSS também permite que as mesmas marcações de um documento sejam apresentadas de diferentes estilos, conforme o método de renderização (como em uma tela, impressão, via voz, dispositivos táteis e etc...). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.

Sintaxe

Assim como no HTML, para escrever código CSS é necessário seguir uma regra. A nossa regra é composta de três partes principais: um seletor, uma propriedade e um valor a se aplicar.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Explicando de uma forma grotesca, o seletor nada mais é do que o nosso elemento HTML ao qual queremos aplicar a regra.

Um exemplo prático seria:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Neste caso estamos aplicando a propriedade de background-color (que muda a cor do background) com o valor de #000 (preto) ao tag body do HTML.

Classes

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir a mesma formatação de estilo a vários elementos. Exemplo:

CSS:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Desta forma declaramos no CSS uma classe chamada "classe", note que o nome das classes são declaradas com o precedente " . " (Isto é importante pois separa os elementos visto primeiro exemplo, as classes e os IDS que vamos ver no próximo exemplo.)

Já no HTML:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

As IDS, só podem ser declaradas uma vez, então é impossível reutilizar uma ID dentro de um código HTML, vamos entender isso.

Para declararmos uma tag no HTML devemos fazer o seguinte:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Neste caso, a página será exibida com erros pois duplicamos um ID, mas vamos entender como estilizar isso no CSS:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Neste caso o elemento HTML que tiver o id #idUm será exibido com o background na cor azul, já o #idDois será exibido com a cor vermelha. Note que precedemos o nome do id com o caractere "#".

Com esses precedentes o CSS identifica os elementos, classes e ids.

 

Muito obrigado pela companhia mais uma vez e por hoje é só criançada, continue seus estudos nos links abaixo e caso não tenha visto a primeira parte dessa série, deixarei o link hehe.

Até a próxima

Links

• Parte 1 sobre HTML
• Tutorial CSS W3S
• Tutorial CSS Mozilla
• Curso CSS DevMedia