Iniciação ao CSS: text-transform

A propriedade text-transform é utilizada para determinar como um pedaço de texto será capitalizado. Para isso possui três valores: 

capitalize - Que faz com que a primeira letra de cada palavra fique capitalizada (letra grande)

uppercase -Faz com que todo o texto fique em "letras grandes", como se fosse escrito com o Caps Lock ativado

lowercase - Todo o texto fica em "letras pequenas"

Imagem produzida pelo autor

Iniciação ao CSS: text-decoration

A propriedade "text-decoration" específica como o o texto será decorado. Para tal, possui 6 valores que vou numerar e indicar a sua funcionalidade:

none - O valor padrão, ou seja, o texto fica normal

inherit - Herda o valor desta propriedade do seu elemento "pai"

overline - Desenha uma linha vertical em baixo do texto

underline - Desenha uma linha horizontal em baixo do texto (fica sublinhado)

line-through - Desenha uma linha horizontal em cima do texto (fica rasurado)

blink -  Faz o texto piscar

Imagem produzida pelo autor

Iniciação ao CSS: color

A propriedade "color" permite alterar a cor de um determinado pedaço de texto. Os valores que podem ser associados a esta propriedade são os nomes típicos de cores em inglês como: "red", "green", "blue"... Ou também valores hexadecimais: #FFFFFF (branco) e #000000 (preto)... Por último podem também ser usados valor RGB (Vermelho, Verde e Azul): rgb(255, 255, 255) (preto) ou rgb(0,0,0) (branco).

Imagem produzida pelo autor

Iniciação ao CSS: font-style

Neste post vou mostrar-vos a propriedade "font-style" que permite, como o nome indica, alterar o estilo do vosso texto. Esta propriedade tem três valores: normal, italic e oblique. Sendo que podemos colocar o texto no seu estado inicial usando "font-style: initial;". A principal utilização desta propriedade é para colocar o texto em itálico.

Na imagem acima podem ver a aplicação daquilo que já foi explicado.

Imagem:

• Print do seguinte site: https://www.sololearn.com/Play/CSS

Iniciação ao CSS: font-size

No post anterior, que podem ver clicando aqui, falei-vos da propriedade "font-family" que permite alterar o tipo de letra dentro da vossa página. Hoje vou falar-vos da propriedade "font-size" que permite alterar o tamanho da letra. Este propriedade é muito simples, possuindo apenas três tipos de unidades: pixels (px), percentagem (%) e ems (em), que é uma unidade relativa, calcula-se dividindo os pixels por 16. Para além disso podemos usar keywords como: small, medium, large e x-large. Estas são principalmente úteis quando não queremos dar ao utilizador a possibilidade de aumentar a letra, pois esta mantém-se sempre relativa ao tamanho da página e do Browser.

Imagem:

• URL

Iniciação ao CSS: font-family

Neste post vou apresentar-vos uma das maneiras de edição de texto com CSS. Esta é a font-family, que é utilizada para alterar a fonte do texto (mais conhecido como tipo de letra). No CSS existem font families e generic families, sendo que as primeiras são tipos específicos de letra, enquanto que a segunda são grupos que contêm tipos de letra similares. A seguir coloco uma tabela de exemplo:

Para trocar a fonte de um determinado pedaço de texto da vossa página Web basta colocar a propriedade "font-family:" seguida do valor, que é o nome do tipo de letra que queremos. Tudo dentro de um determinado elemento, claro. 

Imagem:

• URL

Iniciação ao CSS: comentários

No CSS, tal como em outras linguagens de programação, existem comentários. Estes são extremamente importantes, sendo uma peça crucial de qualquer código. O mais interessante? Não alteram nada no mesmo. A única função dos comentários é apenas deixar uma breve descrição do nosso raciocínio ou da funcionalidade de determinada linha ou conjuntos da mesma. Desta maneira, alguém que venha editar o nosso código, pode mais facilmente entender o que escrevemos. Para além disso, pode ser muito útil para nós próprios.

Ao contrário da maioria das linguagens de programação, o CSS tem apenas um tipo de comentário (que serve tanto para comentários de linha única, ou comentários de várias linhas).

Print do autor.

Iniciação ao CSS: onde colocar o código

O código do CSS pode ser colocado na sua página de 3 formas diferentes:

• Em linha (inline) - no atributo style, dentro da tag que queremos acreditar.

• Folha de estilos interna - na tag style, dentro do head.

• Folha de estilos externa - no ficheiro separado meuestilo.css (o ficheiro pode ter um nome qualquer)

Iniciação ao CSS: sintaxe

O Seletor indica o elemento HTML que pretendemos formatar. Entre chavetas temos as declarações (uma ou mais declarações) separadas por ponto e vírgula. Cada declaração inclui o nome da propriedade CSS e o seu respetivo valor, separados por dois pontos (:).

Neste caso nós estamos a colocar um cabeçalho (h1) com a cor azul e um tamanho de letra de 12px.

imagem:

• URL