Tecnologias para programação Front-End

Como se organiza os estilos deve ser sempre matéria de preocupação para os bons programadores, especialmente quando está trabalhando em projetos grandes. Organizar a cooperação entre programadores e manter grandes bases de código CSS trará melhoria no desempenho da equipe.

1. O básico do básico, ou seja, as tecnologias que os navegadores interpretam

• HTML – conteúdos nas páginas web
• CSS – estilização da página web
• JavaScript – dinamismo da página web

 

2. Tecnologias CSS para organizar os elementos para serem apresentados numa tela

• BoxModel (Modelo de Caixa CSS) – bordas, margem e padding de um elemento. É um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o modelo de formato visual. Ver CSS BoxModel.
• Flexbox – Flexbox é um método de layout unidimensional para organizar itens em linhas ou colunas. Ver Flexbox.
• GridLayout – abordagem bidimensional: GridLayout posiciona os componentes dentro de um grid. Este grid ocupa todo o espaço do container, todas as células possuem o mesmo tamanho e os componentes adicionados são redimensionados para ocupar todo espaço disponível na célula. Ver CSS Grid Layout.

 

3. Metodologias para organização de CSS (arquiteturas CSS)
Outras metodologias CSS para ter os elementos de forma organizada, limpa e escalável ao longo do tempo:

• BEM (Block, Element, Modifier). Ver BEM – padrão CSS e Metodologia BEM.
• SMACSS (Scalable and Modular Architecture for CSS). O SMACSS é mais uma série de tutoriais de como escrever um bom código que propriamente um sistema de CSS.
• OOCSS (Object-oriented CSS). Dois importantes princípios desta metodologia: separar estrutura de skin e separar contêiner de conteúdo. Ver Organizando Seu Código CSS
• Atomic. Dividir estilos em peças atômicas ou indivisíveis. Uma maneira de tornar os estilos mais encapsulados, mais fáceis de escrever e geralmente reduz o código geral. Ver AtomicCSS e Let’s Define Exactly What Atomic CSS is. Desenvolvido pelo Yahoo.

 

4. Frameworks CSS
Os frameworks front-end facilitam a construção de interfaces e, consequentemente, possibilitam uma melhor experiência ao usuário. São diversas as possibilidades que trazem estes frameworks para o desenvolvimento de websites, tanto em termos visuais quanto em termos de UX (“user experience”).

A utilização de frameworks proporciona uma melhoria significativa na velocidade do processo de desenvolvimento de projetos em comparação com a não utilização de um framework.

• Bootstrap: no mercado desde 2010, possui uma comunidade muito grande e ativa que está sempre evoluindo o framework, se constituindo em um framework consolidado no mercado. Um framework HTML, CSS e JavaScript que oferece muita liberdade e controle sobre os elementos de UX (é baseado em componentes), seguindo o padrão BEM de escrita de CSS. Sua prioridade é a responsividade e foco na experiência do usuário. Especialmente indicado para projetos mais robustos. Ver Bootstrap ou Materialize: Conheça as principais diferenças.
• Materialize: o grande foco deste framework é o visual. Foi projetado em cima de um espaço tridimensional e utiliza muito o movimento. É um framework CSS baseado no Material Design do Google. Especialmente indicado para uma aplicação visualmente interessante (em termos de UI) e que não exija grande esforço.
• TailwindCSS: criado em 2017, é um framework baseado em utilidades e tem como prioridade a facilidade de customização. Ao contrário do Bootstrap, o Tailwind CSS não oferece nenhum componente pré-construído para ser utilizado; em vez disso, cabe ao desenvolvedor projetar e construir os seus próprios componentes. Ver Bootstrap vs Tailwind
• Foundation: é um framework CSS criado em setembro de 2011. O menu responsivo é um de seus maiores trunfos. Foundation conta com componentes CSS e HTML, bem como extensões JavaScript, o que ampliam ainda mais sua funcionalidade. Cria designs responsivos, com foco em aplicativos da Web voltados para dispositivos móveis. É grande a capacidade de personalização do Foundation, o que pode melhorar muito o aspecto visual de um projeto. Isso não quer dizer que o Boostrap não possa fazer o mesmo, mas o Foundation foi criado para criar designs exclusivos e personalizados. Ver Foundation vs. Bootstrap.

 

5. Bibliotecas JavaScript

• React – utilizado pelo Meta. O React é uma biblioteca criada para construir telas de forma declarativa, ou seja, cria aplicações web para serem executadas em navegadores, sejam eles para desktop, mobile ou qualquer outro dispositivo. O React é conhecido como uma biblioteca de JavaScript utilizado para a criação de user interfaces (UI). React não é um framework e, diferente de Angular, não possui ferramentas próprias que juntas ofereçam uma solução completa para o desenvolvimento front-end. Pelo contrário, o React é apenas uma base, uma coleção de funções que cria elementos reutilizáveis. Angular é semelhante ao MVC, React foca apenas no “V” (view).
• Angular – utilizado pelo Google. Assim como o React, possui recursos JavaScript poderosos e populares para construir praticamente qualquer projeto de frontend que se deseje. É uma plataforma de código aberto baseada em TypeScript. Ver Angular vs React: Uma comparação em profundidade.
• Vue: inspirado em versões iniciais do Angular. Na verdade, une os aspectos mais positivos do React e do Angular. Tem se caracterizado como uma boa alternativa ao React e ao Angular. Possui uma curva de aprendizado baixa, mostrando-se leve, simples e eficaz.
• SolidJS: é uma biblioteca javascript declarativa, baseada no React, eficiente e flexível para construir UIs. É destinada especialmente para desenvolvimento de aplicações de desktop através de programação funcional, com suporte ao TypeScript. Vale frisar que o React é uma biblioteca voltada para o desenvolvimento de aplicações web.
• Svelte: Svelte é um framework de componentes de front-end de código aberto lançada em 2016. O código Svelte é compilado em JavaScript antes de chegar ao navegador, ao contrário da maioria dos frameworks, como React e Vue, onde o código é executado no navegador. Esse código compilado é pequeno e eficiente. O Svelte é apropriado para projetos menores que não exigem muitos recursos. É mais leve que o React e usa menos código, por isso é ótimo para projetos em que o desempenho é fundamental. Tem uma curva de aprendizado curta e ótimo para criar interfaces de usuário dinâmicas, pois compila o código em JavaScript altamente otimizado.
• Qwik: Qwik é um framework de front-end para criar aplicativos web que oferece tempos de carregamento de página extremamente rápidos, independentemente do tamanho e complexidade do site. Qwik renderiza HTML do lado do servidor para otimizar o desempenho.

 

6. Gerenciamento de sessões, estados e cache (persistências de informações)

• REDUX – utilizado pelo React. Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript. Nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional.
• MobX – utilizado no Angular e Vue.js. O Mobx é uma biblioteca de gerenciamento de estado para Javascript tida como “técnica de gerenciamento de estado sólida” por seu alto desempenho em projetos de larga escala. É uma biblioteca de gerenciamento de estado que simplifica a conexão dos dados reativos do aplicativo com a interface do usuário, e é frequentemente utilizada com o React. Aplica conceitos de programação funcional reativa em JavaScript de forma transparente, escondendo detalhes complexos de implementação por trás de objetos JavaScript puros. Tem uma curva de aprendizado menos abrupta do que a sua alternativa mais popular, o Redux.
• VueX – Vuex é um padrão + biblioteca de gerenciamento de estado para aplicativos Vue.js. Ele serve como um armazenamento centralizado para todos os componentes de um aplicativo, com regras que garantem que o estado só pode sofrer mutações de maneira previsível.
• ngRx – utilizado no Angular. Ou seja, é a versão Angular do Redux (utilizado pela biblioteca React), para gerenciamento de estado.

 

7. Server Side Rendering (SSR)
Conteúdo da página gerado do lado do servidor e enviado para o navegador já como HTM estático. Em particular, React e Angular oferecem suporte à SSR.

• Remix: Remix é um framework para o React, utilizado para renderização do lado do servidor (SSR). Isso significa que tanto o back-end quanto o front-end podem ser feitos usando um único aplicativo Remix. Os dados são renderizados no servidor e servidos no lado do cliente com o mínimo de JavaScript. Ao contrário do vanilla React, onde os dados são buscados no front-end e depois renderizados na tela, o Remix busca os dados no back-end e entrega o HTML diretamente ao usuário
• Next.js: Next.js é um framework de desenvolvimento para Web, de código aberto, para aplicativos web baseados em React com renderização do lado do servidor e geração de sites estáticos. Next.js é um dos frameworks mais populares para React. Fornece vários recursos extras, incluindo renderização do lado do servidor e geração de sites estáticos. Lançado em 2016.

 
8. Testes automatizados

• Jest: Jest é um framework JavaScript de testes construído sobre Jasmine e mantida pela Meta (anteriormente Facebook). Ele foi projetado com foco na simplicidade e suporte para grandes aplicativos da web. Funciona com projetos usando Babel, TypeScript, Node.js, React, Angular, Vue.js e Svelte. O Jest não requer muitas configurações dos usuários iniciantes.
• Cypress: Cypress é uma ferramenta de teste de front-end para aplicativos da web. O Cypress é executado no Windows, Linux e macOS. O aplicativo Cypress é um software de código aberto lançado sob a licença MIT, enquanto o Cypress Cloud é um aplicativo da web. O Cypress foi comparado ao Selenium. É executado totalmente do lado do cliente.

 
9. Ferramentas
Chrome Dev Tools
Firebug

 
10. Editor de Código
Vim
Sublime text
Bracket
Atom
Light Table
Geany
Bluefish

  
Referências:
1- Arquitetura CSS
2- Caminhos para ser um dev front-end
3- Padrão Digital do Governo Federal – Boas práticas de CSS
4- Object Oriented CSS – OOCSS
5- Top 5 bibliotecas JavaScript
6- 12 Frameworks e Bibliotecas JavaScript

Dicas HTML – Gráficos e imagens

Dicas
 
Dica: lista de itens li com pequena imagem antecedendo cada item
– colocar uma pequena imagem antecedendo o texto de cada item:
– url: endereço da imagem (uma pequena imagem, por exemplo 20x10px)
– 4px: posição vertical da imagem deslocada de 4px para baixo
– 25px: gerar espaço de 25px à esquerda do início do box de texto (evita texto sobrepor a imagem)
– 10px: espaço entre os itens
– 30px: espaço antes da imagem (antes do espaço reservada para a tag li)
– 40px: espaço à direita antes do término do box de texto
#minha_lista li {
list-style: none;
background-image: url(....endereço_imagem....);
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
margin-left: 30px;
padding-right: 40px;
}
<div id="minha_lista"><h2>Lista</h2>
<ul><li>...texto do item...</li></ul>
</div>
 

Dica: cabeçalho com imagem de uma linha abaixo do texto, sublinhado-o
– url: imagem de uma linha (tipo 600×12 pixels)
– background-position: define a posição de início de uma imagem de background
– 8px: espaço abaixo do texto para colocar a imagem da linha
#main h2 {
background-image: url(...endereço_imagem....);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 8px;
}
 

Dica: imagem circundada por textos
Observar que a imagem está dentro do parágrado, flutuando à direita:
– 180% espaço entre as linhas do parágrafo
– 12px: espaços verticais entre a tag anterior/posterior e o início/final da tag deste parágrafo
– 8px: espaços à esquerda e à direita (após a figura) entre a tag do parágrado e o início da tela
– 10px: espaço entre o final das linhas do parágrafo e o início da caixa da imagem
– 11px: espaço vertical entre a base da caixa da imagem e a próxima linha por baixo da caixa
– border: borda que circunda a imagem
– 13px: espaço entre a borda e a imagem
p {
font: 1.6em/180% Georgia, "Times New Roman", Times, serif;
margin: 12px 8px;
}
img.figure {
float: right;
margin-left: 10px;
margin-bottom: 11px;
border: 1px solid #666;
padding: 13px;
}
<p><img src="...endereço_imagem..." alt="Desc. imagem" width="200" height="200" class="figure">...texto do parágrafo...</p>
 

Dica: imagem com legenda e circundada por textos
Imagem flutuando à direita, com sua legenda logo abaixo da imagem. A div existente aqui é justamente para adicionar uma legenda.
– 222px: espaço da largura reservada para a imagem
– margin 15px…. -> espaço ao redor da figura: entre os textos e a borda da imagem (obs: considerar a legenda como parte da figura)
– border 1px solid: espessura da linha da borda em torno da imagem (não circunda a legenda)
– padding 10px: espaço entre a linha da borda da imagem e a própria imagem
– border: 2px dashed: espessura da linha de borda em torno da legenda
– padding 5px: espaço entre a linha da borda da legenda e a legenda
– margin 10px 0 0 0 -> espaço vertical de 10px entre a borda da imagem e a borda da legenda, e sem espaços adicionais nas demais margens (isto é, alinhado vericalmente a largura da imagem -> exatamente abaixo da imagem)

.figura {
float: right;
width: 222px;
margin: 15px 10px 5px 10px;
}
.figura img {
border: 1px solid #666;
padding: 10px;
}
.figura p {
font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
color: #5F4E4E;
text-align: center;
background-color: #C9D9EA;
border: 2px dashed #827474;
padding: 5px;
margin: 10px 0 0 0;
}
<div class="figura">
<img src="...endereço_imagem" alt="Desc. imagem" width="200" height="200" /><p>...texto da legenda...</p>
</div>
 

Dica: galeria de fotos
Obter 4 fotos em linha, uma lado da outra. Legenda abaixo de cada foto.
– float: as figuras estarão flutuando à esquerda
– width: espaço reservado para cada foto
– margin: espaço de guarda entre as fotos
– height: propriedade que define uma altura uniforme para cada legenda. Se o texto da legenda for longo, aumentar essa altura
– border: linha de borda que circunda cada foto
– padding 4px: espaço entre a foto e a borda
– background-color: cor do padding.

.figura {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.figura p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
height: 5em;
}
img {
border: 1px solid #666;
padding: 4px;
background-color: #FFF;
}
#gallery .figura p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
text-align: center;
line-height: normal;
margin: 0;
}
<div id="gallery">
<div class="figura">
<img src="...endereço_imagem-1" alt="Desc. imagem" width="200" height="200" />
<p>...texto da legenda da imagem-1 abaixo da imagem-1</p>
</div>
:
:
<div class="figura">
<img src="...endereço_imagem-4" alt="Desc. imagem" width="200" height="200" />
<p>...texto da legenda da imagem-4 abaixo da imagem-4</p>
</div>
</div>
OBS: em vez de usar a propriedade float para as figuras, poderia ser utilizado display: inline-block. E isso poderia ser combinado com a propriedade vertical-align para fazer com que as partes de cima das fotografias fiquem alinhadas. Alguma coisa assim:
.figure {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 10px 10px 10px;
}
 

Dicas HTML – Margens, preenchimento e bordas

PARTE-1: antes de mais nada

Vamos conhecer um pouco mais sobre….. caixas, bordas, cores, plano de fundo, preenchimentos, margens, espaços em branco….. ou seja, inserir decorações na página web.

Devemos lembrar:
– qualquer tag é uma caixa com alguma coisa dentro dela (texto, imagem ou outras tags);
– ao redor da da caixa, estão diferentes propriedades (preenchimento, borda, cor do plano de fundo, margem,…).

– padding (preenchimento): é o espaço entre o conteúdo e a borda do conteúdo. Ou seja, é o espaço que circunda o conteúdo do elemento, dentro de uma borda definida.
– borders (bordas): linha que contorna cada lado da caixa. A propriedade border permite especificar o estilo, largura e a cor do elemento border.
– background-color (cor do plano de fundo): preenche o espaço dentro da borda. O que inclui o conteúdo e a área de padding;
– margin (margem): é o que serpara uma tag da outra. Está além do padding e da borda.

Vamos as dicas.
 

PARTE-2: dicas
 

Dica: calculando a largura de uma caixa
– a largura de 120px se refere ao conteúdo.
– deve-se considerar os dois preenchimentos (esquerdo e direito), as duas bordas e as duas margens.
– assim, a largura total do elemento na página web ocupada tela do navegador será de 120+10+10+3+3+5+5=156px
#main{
width: 120px;
padding: 10px;
border-width: 3px;
margin: 5px;
}
 

Dica: padding
Ver exemplos de padding.
Dica: borders
Ver exemplos de borders.
 

Dica: background-color
Ver exemplos:
exemplo 1 de cor de plano de fundo.
exemplo 2 de cor de plano de fundo
 

Dica: margin
Ver exemplos de margin.
 

Dica: controlando o estouro de conteúdos na caixa (propriedade overflow)
– suponha um texto longo que estoura a caixa projetada para este conteúdo. A propriedade overflow aceita quatro palavras chaves:
* visible: default. O estouro não é cortado. O conteúdo é renderizado fora da caixa do elemento.
* hidden: o estouro é cortado e o restante do conteúdo ficará invisível.
* scroll: o estouro é cortado e uma barra de rolagem é adicionada para ver o restante do conteúdo.
* auto: semelhante ao scroll, mas adiciona barras de rolagem apenas quando necessário.

#meu_overflow {
background: #3DA030;
color: red;
width: 50%;
height: 100px;
overflow: hidden;
}
<div id="meu_overflow">....conteúdo extenso...</div>
 

Dica: formatando cada parágrado
– 20px: espaço abaixo do parágrafo (espaço entre parágrafos).
– color: cor da letra do texto
#main p {
font: 14px Tahoma, Geneva, sans-serif;
color: #323A3F;
margin-bottom: 20px;
}
 

Dicas HTML – Seletores e formatação de texto

PARTE-1: antes de mais nada
 

Dica: DOCTYPE
Comece a construção de sua página HTML definindo o tipo do documento HTML.
A Declaração Doctype deve ser a primeira linha de código em um documento HTML, além dos comentários, que podem vir antes dela, se necessário. Para documentos HTML5 modernos, a declaração de doctype deve ser a seguinte:

<!DOCTYPE html>
<html>

 

Dica: navegador IE seguir padrões
Adicionar uma tag META a uma página web instruindo ao navegador IE a usar os padrões:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 

Dica: elimine estilos default dos navegadores (que variam entre um navegador e outro)
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
 

Dica: definir alguns estilos básicos para toda a página
– por exemplo, a figura de background poderia ser uma pequena barra de 65×140 pixels, que vai ser colocada na parte de cima da página.
– font-seze de 62,5% => equivaleria a um tamanho de 10px
body {
color: #002D4B;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
background: #E1EEFD url(...endereço_imagem....) repeat-x;
}
 

Dica: centralizar a página na tela
– “margin 0 auto” colocam 0 pixel de espaço acima e abaixo e define as margens esquerda e direita como auto, o que centraliza a página (de 800px de largura) no meio da janela do navegador.
.meu_estilo {
margin: 0 auto;
width: 800px;
}

Poderia ser alcançado este resultado também desta forma:
#main {
margin: 0 auto;
width: 800px;
}
 

Dica: centralizar a página, e circundar a mesma por uma borda
– background-color: cor #FDF8AB amarela clara como plano de fundo da página (ocupará toda tela do navegador). Cor #FFF branca como plano de fundo da tag body. A cor branca cobrirá a cor amarela na área definida para os conteúdos de body.
– border: borda que cincunda todos os conteúdos dentro da tag body
– margin-top: espaço a partir do canto superior da janela do navegador até o início dos conteúdos da tag body
– margin-left/right auto: centraliza a página (a área dos conteúdos pertencentes a tag body).
– padding: espaço de guarda para impedir que os conteúdos dentro da tag body toquem a borda.

html {
background-color: #FDF8AB;
}
body {
background-color: #FFF;
border: 3px solid #85A110;
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
 

PARTE-2: seletores e formatação de texto
 

Dica: formatação de texto
Através de exemplos:
tipo da fonte -> font-family: Helvetica;
cor do texto -> color: #138745;
tamanho da fonte -> font-size: 1em;
estilo da fonte -> font-style: italic;
negrito -> font-wight: bold;
maiúsculas -> text-transform: uppercase;
decoração -> text-decoration: underline;
espaçamento letras -> letter-spacing: 10px;
espaçamento palavras -> word-spacing: 2px;
espaçamento entre linhas -> line-height: 1.5;
alinhamento -> text-align: center;
recuo primeira linha -> text-ident: 25px;
controlando margens entre parágrafos -> margin-top:0; margin-bottom:0;
primeira letra -> p:firs-letter { font-weight: bold; color: red; }
primeira linha -> .minha_classe:first-line { text-transform: uppercase; }
estilizar lista -> list-style-type: square;
 

Dica: espaço entre cada letras
– 50px como tamanho da fonte
– nome das fontes
– 1.5px de espaçamento entre as letras
– cor da fonte
– transformar para letras maiúsculas
h2 {
font-size: 50px;
font-family: "Times New Roman", serif;
letter-spacing: 1.5px;
color: #28AF22;
text-transform: uppercase;
}
 

Dica: seletor h2, inserindo uma linha horizontal vermelha abaixo ao longo da página
Espessura da linha: 2px.
h2 {
font-size: 2.2em;
border-bottom: 2px red solid;
}
 

Dica: barra vertical do lado esquerdo precedendo o texto
– margin-left: distância da margem esquerda até a barra (de 50px)
– padding-left: distância da barra até o texto (de 20px). A propriedade padding adiciona espaço dentro da caixa, afastando da linha da borda o conteúdo que está dentro do seletor p.
– border_left: espessura da barra (de 25px)
– cor da barra: #BD8100
p {
margin-left: 50px;
padding-left: 20px;
border-left: solid 25px #BD8100;
}

Dica: seletores h1,h2 e h3, inserindo uma linha horizontal verde acima ao longo da página
– espessura da linha: 2px;
– distância do texto header para a linha superior: 10px.
– distância do texto header da borda esquerda: 100px.
h1, h2, h3 {
border-top: 2px solid #00A13F;
padding-top: 10px;
padding-left: 100px;
}
 

Dica: inserindo linhas horizontais acima e abaixo de um seletor de cabeçalho
– 54px de tamanho das letras
– nome das fontes
– 2px de espessura da linha, pontilhada
– 7px de espaço entre a linha superior e o texto do cabeçalho h2
– 6px de espaço entre o texto do cabeçalho h2 e a linha inferior
– 10px de espaçamento vertical entre o fim do parágrafo anterior e linha horizontal superior do cabeçalho h2
– 5px de espaçamento vertical entre a linha horizontal inferior do cabeçalho h2 e o início do próximo parágrafo
– overflow: propriedade para que as linhas horizontais não avancem sobre a caixa flutuante que estaria à direita (não visualizada nesta dica por simplicidade).
h2 {
font-size: 54px;
font-family: "Arial Narrow", sans-serif;
color: #F1742F;
border-top: 2px dotted #A1B53A;
border-bottom: 2px dotted #A1B53A;
padding-top: 7px;
padding-bottom: 6px;
margin: 10px 0 5px 0;
overflow: hidden;
}
 

Dica: selector h2, afastado da margem esquerda
h2 {
padding: 0 0 2px 80px;
}
 
Dica: selector h2, com um ícone (pequena imagem) antes do texto
h2 {
padding: 0 0 2px 80px;
background: url(...endereço_imagem...) no-repeat;
}
Obs: a imagem pode ser, por exemplo, de 40×40 pixels
 

Dica: colocar texto entre seletor “p” afastado margem esquerda. Aumentar o espaçamento entre linhas
p {
line-height: 150%;
margin-left: 80px;
}

Dica: um título com linha horizontal em baixo, e um subtítulo embaixo com dois estilos diferentes
– border-bottom: linha horizontal de 1px espessura em baixo do texto do título
– margin-top: distância (de 27px) entre o título e a última linha que antecede o título
– margin: entre outras, recuar mais para o meio da página o subtítulo (em 40px)
– text-transform: imprimir em caixa alta
– margin-left: distância (de 12px) entre a última palavra da linha e o início deste novo texto dentro da tag “strong” embutida no parágrafo
<h2>Meu título em destaque</h2>
<p class="minharef">São Paulo <strong>da redação</strong></p>
#main h2 {
font: bold 3.5em "Hoefler Text", Times, serif;
border-bottom: 1px solid #002C49;
margin-top: 27px;
}
#main .minharef {
color: #999999;
font-size: 1.6em;
margin: 5px 0 20px 40px;
}
#main .minharef strong {
color: #216EAF;
text-transform: uppercase;
margin-left: 12px;
}
 
Dica: textos sobrepostos
Usar a propriedade margin-right com valor negativo, que sobrepõe elementos.
Ver o exemplo:
– margin-right é o afastamento do conteúdo do tag strong do elemento h1. No caso, o “Texto 2” será puxado para cima do “Texto 1”. O “Texto 2” é empurrado 1.30em, o que representa 1,30 vezes o tamanho da fonte definida (de 160px), para cima do texto “Texto 1”.
– line-height: espaçamento entre linhas. Neste exemplo, em termos práticos, adicionará um pequeno espaço abaixo do texto.

#main h1 {
color: #FF6600;
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 4em;
}
#main h1 strong {
font-size: 160px;
color: white;
line-height: 1em;
margin-right: -1.30em;
}
<div id="mais">
<h1><strong>Texto 1</strong>Texto 2</h1>

 

Dica: colocar uma imagem no topo da página e textos abaixo da imagem, sem utilizar DIV
body {
padding-top: 100px;
background-image: url(...endereço_imagem...);
background-repeat: repeat-x;
}
Obs: no caso testei usando uma imagem de 800×133 pixels.

Dica: margem abaixo de um texto estilizado por uma classe
.minha_classe {
margin-bottom: 25px;
}

Dica: seletor de grupo
Basta criar uma lista de seletores separados por vírgulas:
h1, h2, p, .minha-classe, #banner {
color: #556677;
}

Dica: seletores descendentes
Veja os exemplos:
a) li a { font-family: Arial; }
Formatar todos os links (a) que aparecem dentro de um item de lista (li) usando a fonte Arial.

b) h1 jovem { color: red; }
Formatar qualquer tag <jovem> que esteja dentro de uma h1 na cor vermelha.

c) p.bacana a { color: blue; }
Formatar todos os links (a) que sejam descendentes de um parágrafo (p) que tenha a classe bacana aplicada a ele.

Dica: pseudoclasses
Estilos para links: a:link, a:visited, a:hover, a:active, :focus
:focus – destaca um elemento (exemplo: destacar uma caixa de texto para digitação).

Obs: pode-se usar a pseudoclasse :hover em elementos que não sejam links. Exemplos:
p:hover, para criar um efeito especial quando se passa o mouse sobre qualquer parágrado.
.minha-classe:hover, para estilizar tags com a classe minha-classe.
 

Dica: pseudoelementos
:first-letter, :first-line, :before, :after, :first-child
Onde:
:first-letter – permite criar efeito de uma letra maiúscula destacada
:first-line – estilização da primeira linha de um parágrafo
:before – insere texto antes de um elemento
:after – insere texto após um elemento
:first-child – formata o primeiro seletor filho de cada elemento
 

PARTE-3: posicionamento de elementos
 

Dica: posicionando marcadores e números
– o default dos navegadores é “outside”.
– padding-left (e margin-left): se desejar retirar o recuo que os navegadores inserem do lado esquerdo.
– margin-top: distância entre o texto acima e o primeiro item da lista.
ol { padding-left: 1.4em; list-style: decimal outside; }
ul {
padding-left: 1.4em;
list-style: circle inside url("endereço_icon");
padding-left: 0;
margin-left: 0;
margin-top: 40px;
}
 

Dica: um conjunto de itens de uma lista não ordenada, jogados para o lado direito da página (com textos em torno da lista)
– margin: distâncias do conjunto de itens da borda do espaço destinado aos itens
– float: posicionar o conjunto de itens lá para o lado direito da página. Faz com que o texto que vem depois da lista fique em torno do canto esquerdo da lista.
– width: largura do espaço (de 150px) destinado aos itens
– padding-left: distância (de 1.4em) entre o texto que contorna a lista e o espaço destinado aos itens
– margin-bottom: espaço abaixo de cada item (separando um item do outro)
#main ul {
margin: 50px 0 25px 50px;
width: 150px;
float: right;
}
ul {
padding-left: 1.4em;
list-style: square;
}
#main li {
color: #207DAE;
font-size: 1.3em;
margin-bottom: 8px;
}
 
Obs: a ordem com o qual se escreve o HTML tem impacto na apresentação do navegador. Neste caso de elementos flutuantes, o HTML da tag flutuante deve aparecer antes do HTML de qualquer conteúdo que contorne o elemento flutuante.
 
Dica: propriedade clear
A propriedade clear controla o fluxo próximo aos elementos flutuantes. Ou seja, especifica o que deve acontecer com o elemento que está próximo a um elemento flutuante.
– a propriedade clear aceita as seguintes 4 (quatro) opções principais:
* left: o elemento é empurrado para baixo dos elementos flutuantes à esquerda.
* right: o elemento é empurrado abaixo dos elementos flutuantes à direita
* both: o elemento é empurrado abaixo dos elementos flutuantes à esquerda e à direita
* none: default. O elemento não é empurrado abaixo dos elementos flutuantes à esquerda ou à direita.
.rodape {
clear: both;
}
 

Dica: inserindo um rodapé
– 0px: nenhum espaço até a caixa do tag que estão o texto de rodapé e sua borda pontilhada
– border-top: linha (borda) pontilhada acima do texto de rodapé
– uppercase: texto de rodapé em letras maiúsculas
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-transform: uppercase;
color: #666666;
margin-left: 0px;
padding-left: 8px;
border-top: 1px dashed #999;
clear: both;
}
 

Dica: uma caixa com texto e com borda tracejada
Utilizareos a propriedade border que permite desenhar uma caixa ao redor de um elemento:
– borda tracejada de espessura 2px
– cor de background da caixa: amarela
– distância da borda tracejada para a última linha de texto em cima (fora da caixa): 25px
– distãncia da borda tracejada para a próxima linha de texto em baixo (fora da caixa): 35px
– afastamento entre o texto interno e a borda da caixa: 20px
.note {
border: 2px dashed #BD8110;
background-color: #FBF8A9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;
}
 

Dica: colocar todo texto numa div, circundado por uma borda
– centralizar na tela a página (“margin”)
– largura da página 740px
– borda de cor amarela de 4px de espessura, linha sólida
– distância do texto das margens esquerda e direita da borda de 10px
– testado com uma imagem de 760×136 pixels
<div id="main">....texto...</div>
#main {
width: 740px;
margin: 0 auto;
padding: 0 10px;
border: 4px solid yellow;
background: transparent url(....endereço_da_imagem...) no-repeat;
}
 

Dica: criar uma div do lado direito
Teríamos duas DIVs da seguinte forma:
<div id=”main”></div><div id=”sidebar”></div>
O CSS poderia ficar assim:
– a div main flutua na esquerda, e tem largura de 580px
– a div sidebar inicia após 600px da margem esquerda
– os textos dentro da div sidebar tem padding de 15px (afastamento das bordas da própria div sidebar)
#main {
float: left;
width: 580px;
}
#sidebar {
margin-left: 600px;
padding: 15px;
background: #E9F5FE;
}
Obs: o seletor body poderia ter uma propriedade width: 800px, por exemplo.
 
 

Referências:
DOCTYPE – https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/