Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com
Mostrando postagens com marcador Fontes. Mostrar todas as postagens
Mostrando postagens com marcador Fontes. Mostrar todas as postagens

Vídeo Aula (Tutorial de CSS) - Fontes em CSS

Nesta excelente vídeo aula da Universidade XTI, vamos ver uma lição sobre a estilização de fontes em CSS, através da propriedade font e suas variações, para complementar os tutoriais que estudamos aqui em nosso Curso de HTML e CSS.

Ler Tutorial

Fonte maiúscula e minúscula em CSS - text-transform: uppercase, lowercase e capitalize

Neste simples e curto Tutorial de CSS, vamos ensinar a formatar qualquer texto de um site, definindo que as fontes fiquem maiúsculas (uppercase), minúsculas (lowercase) e capitalização de palavras (deixar a primeira letra em maiúscula e as demais minúsculas, capitalize), através do atributo text-transform do CSS.

Maiúsculo, Minúsculo e Capitalizado - O atributo text-transform

Como fazer para deixar um texto totalmente em fontes cujas letras são maiúsculas?
Ora, só escrever com a tecla Caps Lock ativada que não tem erro.

E se você pegou um texto em minúsculo da internet ou tinha escrito anteriormente em minúsculo?
Como fazer para deixar maiúsculo?
Ok, diversos programas de edição de textos como o Microsoft Office fornecem essa opção.

Mas e se você quiser, por exemplo, deixar todos os textos das tags H1 em maiúsculo?
Vai copiar e colar todas estas tags de cabeçalho no Word?

E se você for contratado por um portal grande, com dezenas de milhares de páginas, e como sua primeira tarefa eles te mandam colocar todas as tags de cabeçalho em maiúsculo e o último parágrafo de cada artigo capitalizado (a primeira letra, de cada palavra, em maiúscula).

E aí, o que você faz?
Pode fazer no Word? Claro que pode, mas iria ter um trabalho gigantesco, quase que humanamente impossível.

Mas relaxe, você estudou pelo Curso HTML Progressivo e domina a arte da estilização de sites com CSS, e vai aprender agora como fazer de uma maneira muito simples, rápida e extremamente eficaz e poderosa, usando o atributo "text-transform".




Fonte Maiúscula em CSS - text-transform: uppercase

Sem mais delongas, vamos aprender como deixar qualquer texto com letras maiúsculas, usando a propriedade text-transform do CSS.

Para fazer isso, usamos a propriedade "text-transform" e o valor "uppercase" (maiúscula, em inglês).
Assim, a sintaxe é:

text-transform: uppercase;

Por exemplo, para que uma tag de cabeçalho H2 seja exibida toda em maiúscula, podemos usar o seguinte código em uma folha de estilos CSS:

h2 {
 text-transform: uppercase;
}

Vejamos outros exemplos de código, que contém uma frase minúscula, mas por ter usado o text-transform com o uppercase, o resultado no site vai ser a frase maiúscula:

<div style="text-transform: uppercase;>apostila html progressivo</div>

Resultado:
APOSTILA HTML PROGRESSIVO



Fonte Minúscula em CSS - text-transform: lowercase;

Sem segredos, para deixarmos um determinado texto com todas as suas letras minúsculas, usamos a propriedade "text-transform" com a seguinte sintaxe:

text-transform: lowercase;

Assim no caso da uppercase, o lowercase faz com que o texto fique em minúsculo, não importando a maneira que você escreva.

Fonte Capitalizada em CSS - text-transform: capitalize;

Existem, basicamente, três maneiras de exibir uma fonte: em minúsculo, maiúsculo ou capitalizado.
Um texto capitalizado é aquele em que todas as primeiras letras, de cada palavra, estão em maiúsculo e o restante minúsculo.

Por exemplo:
O Html Progressivo É Uma Apostila Online De Html E Css.

Assim, a sintaxe para esta propriedade CSS é:

text-transform: capitalize;

Este tipo de formatação de texto é muito comum em Marketing, por exemplo, pois um título que contém a primeira letra de cada palavra em maiúscula costuma chamar bastante atenção.
Se você notar as ofertas que aparecem em redes sociais ou no seu e-mail, vai notar o uso da formatação de textos capitalizados.

Por exemplo o seguinte código:

<div style="text-transform: capitalize">embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto</div>

Cujo resultado é o seguinte texto, capitalizado pelo CSS:
embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto

Ou seja, se um dia precisar colocar seu texto em maiúsculo, minúsculo ou capitalizar, não precisa quebrar a cabeça com o Word, afinal você é um webmaster, cria sites e sabe HTML&CSS, então use a propriedade text-transform para transformar seus textos.
Ler Tutorial

Fontes em CSS: A propriedade font-family - Tutorial

Neste tutorial de CSS sobre formatação de texto, vamos aprender como escolher as fontes de um site, família de fontes, bem como aprender sobre as fontes mono espaçadas (monospace), serif, sans-serif, cursivas e outras características de uma font em CSS.


Ler Tutorial

Negrito em CSS - A propriedade font-weight (bold, bolder, lighter, normal e 100-900)

Neste Tutorial de CSS de nossa apostila, vamos falar sobre mais um assunto que se refere as fontes e formatação de textos, que é aparentemente simples (e realmente é), o negrito, através da propriedade font-weight do CSS.

Vamos ver toda a flexibilidade e diferenciação que o CSS nos traz em relação ao HTML solo e puro.


Curso de HTML e CSS com certificado
Obter meu certificado!

Como usar o negrito em CSS: font-weight

Quando estudamos esse assunto, de deixar um texto em negrito, no HTML, aprendemos simplesmente que devemos usar a tag <b></b> e está tudo resolvido.

Porém, no HTML você teria que ir em cada lugar que quer usar o negrito, de cada página, e aplicar as tags. Obviamente que isso é um trabalho sobrenatural se você vai criar seu site inteiro na mão, e mais ainda se ele for um site com muitas páginas e seções.

A solução, para variar, é usar CSS para definir onde irá aplicar o negrito.
Isso é feito usando a propriedade font-weight

Porém, o sentido de negrito em CSS vai bem além daquele que vimos em nosso curso de HTML, pois agora podemos definir o grau de negrito que queremos.

Ou seja, o CSS nos permite definir a espessura, o grau ou peso (weight) de negrito que queremos aplicar em uma fonte.
Inclusive nos permitindo deixar mais espesso ou mais fina a fonte, tudo fica de acordo com sua vontade.

Essas possibilidades de negrito com a propriedade font-weight podem não parecer tão úteis para a maioria das pessoas, mas mostram todo o poder e versatilidade do CSS.

Para grandes revistas e jornais que migraram do papel para a web, foi uma baita mão na roda, pois antes ficávamos preso com o padrão de negrito de cada navegador, no HTML, e muitas vezes a espessura e grau do negrito não eram o desejado por webdesigners nem era igual ao usado no papel.




Como deixar a fonte em negrito em CSS: font-weight: bold

Vamos estudar o primeiro valor da propriedade "font-weight", que é o "bold".

O bold equivale a nossa famosa tag <b>, para simplesmente negritar um trecho.
A sintaxe é:

font-weight: bold;

O negrito serve, basicamente, para destacar um trecho de um texto.
Por exemplo, para fazer a seguinte frase em negrito:

"O CSS é uma linguagem de estilo realmente importante na criação de sites."

Podemos usar o seguinte trecho de código, diretamente na tag <span>:
"O CSS é uma linguagem de estilo <span style="font-weight: bold">realmente</span> importante na criação de sites."

Ou em uma folha de estilos
.negrito {
 font-weight: bold;
}

Para isso, basta nomear os locais de seu site que você quer negritar, por exemplo:
<p>O CSS é uma linguagem de estilo <span class="negrito">realmente</span> importante na criação de sites.</p>


Deixando o texto ainda mais em negrito em CSS: font-weight: bolder

O CSS nos permite ainda usar um valor chamado "bolder" para você deixar seu negrito ("bold") ainda mais realçado do que era antes, a sintaxe de uso é:

font-weight: bolder;

Ou seja, não significa que vai ficar mais espesso, mais grosso.

Vai ficar mais do que era antes.

Porém, isso depende totalmente do da família de fonte que seu navegador esteja usando (font-family), e isso pode variar de acordo com seu sistema operacional (cada sistema define um tom de negrito usado nos programas, como nos navegadores).

Quando estudamos, ainda neste tutorial de CSS sobre os valores numéricos da font-weight iremos entender melhor este conceito de bolder.

.MaisNegrito {
 font-weight: bolder;
}

Tirando o negrito de uma fonte em CSS: fonte-weight: lighter
No HTML tínhamos duas opções: ou usa negrito, ou não usa.
Já no CSS, você pode usar negrito, deixar mais negrito ainda, menos, normal e até deixar o oposto, bem fino (veremos isso em detalhe ao fim do tutorial, quando estudarmos os valores do atributo font-weight).

Assim, se estiver usando um determinado tom de negrito, e usar o valor "bolder", vai subir no tom de negrito e deixar a fonte mais espessa.

E para deixar mais fina, menos 'negrita', do que ela era antes ?
Use o valor "lighter":

font-weight: ligther;

Na folha de estilo:

.MenosNegrito {
 font-weight: lighter;
}

Poderoso esse, CSS, não?
Espere até ver último próximo tópico deste tutorial.

Deixando a fonte normal em relação ao negrito: font-weight: normal

Este valor, "normal", é bem comum em diversos tipos de propriedades no CSS, como no tutorial sobre itálico com o font-style, este valor serve para explicitar que não usaremos as propriedades de negrito, e sim a espessura normal, comum e padrão do navegador.

A sintaxe para fixar o negrito em normal é:

font-weight: normal;

Na verdade, todo texto tem seu nível de negrito, o que o "normal" vez não é tirar o negrito, e sim colocar no valor padrão do seu browser.
É muito usado caso esteja escrevendo em um texto, class ou ID que está em um nível diferente de negrito e queria que a fonte volte ao seu valor normal de boldness.

Como definir o grau de negrito em CSS: 100, 200, 300, 400, 500, 600, 700, 800 e 900

O negrito da tag <b>, do valores "bold", "bolder", "normal" e "lighter" são apenas uma maneira mais simples de definir o grau de negrito de uma fonte.

Um jeito mais específico e poderoso de definir o tanto de negrito, ou a espessura de uma fonte, que o CSS nos fornece é através de valores numéricos, que vão de 100 até 900, variando de 100 em 100, onde 100 é o valor com menos negrito (quase invisível) e o valor 900 é o com mais grau de negrito, mais grosso.

Assim, os possíveis valores são:
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Dependendo do seu browser, os valores que já estudamos nada mais são que esses valores numéricos:
normal = 400
bold = 700

Se você usar "bolder", ele sobe 100, e se usar "lighter" ele desce 100 nessa faixa de valores.
Assim, para ver toda a faixa de valores de seu browser:

<div style="font-weight:100">font-weight: 100</div>
<div style="font-weight:200">font-weight: 200</div>
<div style="font-weight:300">font-weight: 300</div>
<div style="font-weight:400">font-weight: 400</div>
<div style="font-weight:500">font-weight: 500</div>
<div style="font-weight:600">font-weight: 600</div>
<div style="font-weight:700">font-weight: 700</div>
<div style="font-weight:800">font-weight: 800</div>
<div style="font-weight:900">font-weight: 900</div>
Ler Tutorial

Tutorial de CSS - Formatação de Textos

Neste tutorial inicial desta seção sobre Formatação de Textos em CSS, vamos explicar melhor o que é formatar um texto, como isso pode ser feito, a importância e propriedades que iremos estudar em nossa apostila de CSS.


CSS , Textos e A Nova Web

A internet está se tornando cada dia mais visual e auditiva, é bem comum vermos vídeos, assistir programas de televisão, futebol ao vivo, conversar com amigos via hangout, ver um show de sua banda favorita, filmes, seriados e outras coisas mais interativas.

Outro fator que ajudou bastante esse crescimento das mídias foi o fato da banda de internet no Brasil ter aumentado consideravelmente e os preços terem caído. Hoje em dia, até pessoas mais humildes têm acesso as redes sociais através de celulares.

Porém, embora esta mudança esteja ocorrendo, uma coisa nunca mudou e nunca vai mudar: os textos.
Antigamente, na década de 90, imagem era luxo, praticamente toda a rede era texto.
Os textos ainda continuam, mas surgiram novas mídias.

Sempre existirá textos em sites de notícias, pessoas que preferem ler e escrever nas redes sociais, instruções para preencher um formulário, campos de login e senha, fóruns de discussão, livros em pdf, tutoriais de programação, códigos de programação etc etc.

Podemos ficar aqui durante longos parágrafos falando sobre a importância dos textos e do seu uso, mas seria perder tempo, basta olhar os sites que acessa e ver a importância deles.
E se eles estão presentes em sites, é necessário saber estilizar e formatar textos através de CSS.



CSS em Textos

Qual a última vez que leu um texto sem formatação?
Um site inteiro com a mesma cor, fonte, tamanho, sem parágrafos, divisões, tags de cabeçalhos ?

Imagine um livro inteiro, sem divisão de capítulo, espaçamento de parágrafos, com títulos e rodapé com fonte de mesmo tamanho do texto comum.
É atrativo, é interessante, te motiva a ler?

Ora, um site toda igual, sem divisões lógicas e de design, é igualmente desestimulante.
Usar cor vermelha para notícias, verde para a seção de esportes e laranja para a seção de fofoca não é estética, é design, é marketing. Atrai, chama atenção, faz as pessoas passarem mais tempo em seu site.

Estilizar textos não é estética, ter senso e conhecimentos em fontes, cores e tamanho.é obrigatório, não é à toa que iremos disponibilizar diversos tutoriais de CSS sobre textos.

Lembre-se que fizemos a formatação de textos em HTML, porém, somente com HTML você precisa estilizar cada texto, cada cabeçalho e cada região de seu site.
O que é algo quase que humanamente impossível de se fazer em grandes portais nos dias de hoje.

Mas como vimos na seção sobre Tutorial Básico de CSS, podemos selecionar, identificar e estilizar tags, divisões, identificadores e praticamente qualquer região de qualquer página de um site.
Com um simples código podemos definir a fonte de todas as páginas, a cor de cada título, como se comporta os links quando passamos o mouse e outras infinidades de estilos e efeitos, tudo graças ao CSS.

Com apenas uma folha de estilos você diz como será a seção de moda de seu site, a cor que cada título vai ter, a fonte, o que acontece com o link ao ser clicado, como é o menu lateral com as notícias de esporte, pode colocar uma fonte em itálico em todas as citações de famosos ou políticos e o que mais sua criatividade (e estudo em CSS) permitir.

Tutorial de CSS sobre Formatação de Textos

Agora que já está bem ciente da importância da formatação de textos com CSS, vamos mostrar o que iremos aprender com estes tutoriais sobre o assunto em nossa apostila de CSS.

É importante que você estude, entenda bem e pratique todos os exemplos e exercícios que iremos apresentar, pois estilização de textos com CSS é algo de extrema importância para qualquer pessoa que queria aprender a criar sites.

Dentre outros assuntos, iremos estudar sobre:
  • Como aplicar itálico, negrito e sublinhado em textos
  • Cores em fontes (color), em hexadecimal, RGB e por nome da cor
  • Definir tamanho da fonte (font-size), em pixels, porcentagem, palavras (small, larg etc) e ems
  • Família de fonte (font-family), como Arial, Times New Roman, Sans-serif, Helvetica etc
  • Fontes monoespaçadas
  • Fontes decoradas (text-decoration)
  • Fontes maiúsculas e minúsculas (text-transform, font-variant)
  • Alinhamento (text-align), margem (margin-) e indentação (text-indent)
  • Espaçamento entre letras e palavras (word-spacing e letter-spacing)
  • Espaçamento entre linhas de um texto (line-height)
  • Listas (list-style-type, list-style-position e list-style-image)
Ou seja, temos bastante estudo pela frente, muitos tutoriais de CSS para aprender :)
Ler Tutorial

A < font > tag e seus atributos - Como alterar a fonte, tamanho e cor de textos em um site HTML

Neste tutorial de nosso Curso de HTML, vamos aprender a usar a tag <font>, que serve para definir várias características das fontes que vamos usar para criar nossos sites.

Apostila de HTML online e gratuita com certificado para iniciantes
Aprenda a fazer diversos efeitos nos textos de seu site
Essas características são parâmetros que nos permitem controlar o tipo de fonte, cor, tamanho e uma série de outras características que vão nos auxiliar na hora de apresentar um conteúdo em texto para os leitores de nossos websites.
Ler Tutorial

Tutoriais de HTML e CSS