Estilizando nossa página com CSS 3 – Parte 1

Fala pessoal, tudo certo?

No último post terminamos de realizar a marcação da nossa página e como venho comentando nos posts o HTML5 passou a dar preferência apenas para a marcação do site, deixando a parte de estilização para o CSS.

“Mas o que é CSS?”

Para quem ainda não conhece o CSS ou Cascade Style Sheet (traduzindo para o português fica Folha de Estilo em Cascata), é um mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web.

Agora que sabemos o que é, vamos falar um pouco de como incluir CSS em nossa página.

Existem basicamente três formas de fazer isso: inline, em bloco ou em arquivo.

Vamos começar pelo CSS inline:

Neste exemplo criamos um parágrafo com o texto “Olá Mundo”, com fundo preto (background-color: black) e texto branco (color: white), desta forma:

Agora vamos fazer o mesmo exemplo, utilizando o css em bloco:

Na linha 1 temos o nosso parágrafo somente com o texto. Da linha 2 até a linha 7 temos o bloco de CSS, definido através da tag <style>. Entre as tags, temos o p, que nada mais é do que um seletor, que determina que todos os parágrafos da nossa página (tag <p>) devem ter o estilo definido dentro das chaves.

Por último temos a utilização através de um arquivo de folha de estilo, chamado de estilo.css.

Na página HTML temos a seguinte marcação:

E no arquivo estilo.css, basta incluir o que estava entre as tags <style> da nossa página HTML.

Consegui uma parceria com a DankiCode e consegui vários curso com preços especiais. Um deles é o curso WebMaster Front-End Completo, que é um dos melhores cursos pra você que deseja se especializar em desenvolvimento de páginas web.

Além de ser um curso bastante completo, você também leva 30 dias de garantia, onde você pode solicitar o seu dinheiro de volta à qualquer momento, que será prontamente devolvido sem nenhum questionamento por parte da empresa.

Clique aqui e garanta já sua inscrição no curso, com acesso vitalício de qualquer dispositivo.

Espero que tenha gostado deste pequeno artigo.

Nos vemos em breve!

Forte abraço e bons estudos.

A linguagem de marcação HTML

Neste artigo gostaria de falar um pouco sobre 

Podemos dizer que o desenvolvimento web pode ser realizado com qualquer editor de texto simples, como o próprio bloco de notas do Windows, pois a linguagem de marcação HTML é um formada por tags, onde cada um tem sua função específica e não há necessidade de realizar o processo de “compilação”, como acontece em linguagens de programação como .NET, JAVA, Visual Basic, Pascal, etc. 

O HTML é uma linguagem que é interpretada pelo navegador web, como o Chrome, o Firefox ou o mais odiado deles, o Internet Explorer. A partir da sua versão 5, o HTML melhorou tags antigas e incluiu algumas novas tags e começou propor uma forma diferente de trabalho, focando mais na semântica, focando mais na marcação do texto do que na determinação de formatação.

Neste sentido, após a marcação das nossas páginas, devemos priorizar o uso do CSS para definição do layout dos componentes e textos do nosso site ou sistema.

Existem no bibliotecas gratuitas que facilitam a estilização de um site, sendo o mais conhecido o framework criado pelo twitter, o Bootstrap. Com ele teremos à nossa mão, vários componentes e estilos para facilitar o desenvolvimento de sistemas web e também de web sites. Futuramente irei escrever um artigo mostrando algumas das suas funcionalidades.

Outro framework que tem crescido bastante é o bulma, que tem como proposta melhorar e facilitar a estilização de site, concorrente com o Bootstrap. Na data que escrevo este artigo, ele está na versão 0.7 e possui, assim como o Bootstrap, vários componentes e estilos pré-definidos e de fácil utilização.

Voltando ao assunto inicial, gostaria apresentar pra vocês as novas tags criadas para melhorar a semântica de marcação de páginas HTML5.

TagDescrição
<article>Define um artigo dentro do documento.
<aside>Define um conteúdo lateral para o conteúdo da página.
<bdi>Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele.
<details>Define detalhes adicionais que o usuário pode ou não visualizar.
<dialog>Define uma caixa de diálogo ou janela.
<figcaption>Define um texto para o elemento <figure>
<figure>Define um contexto de imagem dentro do documento.
<footer>Define o rodapé do documento ou da sessão.
<header>Define o cabeçalho do documento ou da sessão.
<main>Define o conteúdo principal do documento.
<mark>Define um texto marcado.
<meter>Define uma medida escalar dentro de um intervalo conhecido (um medidor).
<nav>Define a navegação de links do site.
<progress>Representa o progresso de uma tarefa.
<rp>Define o que mostrar em navegadores que não suportam anotações em ruby.
<rt>Define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)
<ruby>Define uma anotação rubi (para tipografia do leste asiático).
<section>Define uma sessão no documento.
<summary>Define um título visível para um elemento <details>
<time>Define uma data/hora.
<wbr>Defines a possible line-break

Fonte: https://www.w3schools.com/html/html5_new_elements.asp

Apesar de terem introduzido novas tags, é importante salientar que, como foi digo antes, no HTML5 devemos priorizar apenas a semântica da marcação de documentos, portanto, nenhuma das novas tags possuem qualquer tipo de formatação, sendo esta parte feita através do CSS.

No próximo artigo da série, vamos falar um pouco mais sobre estas novas tags e criar um pequeno site ilustrando algumas destas novas tags.

Um forte abraço e até breve!