Style

• O atributo style permite adicionar formatação CSS nos elementos de HTML5.
• É possível especificar fonte, cores, tamanho, etc.
• A sintaxe de style é propriedade: valor.
• propriedade é uma propriedade do CSS e valor é um valor do CSS.

Algumas propriedades do atributo style:

background-color

• Altera a cor do background.
• Ao aplicar a mudança na tag body, é possível mudar o background de toda a página. Nesse exemplo modificamos o background da página para a cor powderblue.
• Também é possível utilizar em tags de texto como títulos e parágrafos, mudando o background apenas na linha onde estão inseridos.

Exemplo de alteração do background de um texto para yellow.

color

• Altera a cor da fonte.
• Ao aplicar a mudança na tag body, é possível mudar a cor da fonte em toda a página. Nesse exemplo modificamos para a cor brown.
• Também é possível utilizar em tags de texto como títulos e parágrafos, mudando apenas a cor da fonte naquela tag.

Exemplo de alteração da cor da fonte para green.

font-family

• Altera a fonte.
• Ao aplicar a mudança na tag body é possível mudar a fonte do texto de toda a página. Nesse exemplo modificamos para a fonte courier.
• Também é possível utilizar em tags de texto como títulos e parágrafos, mudando apenas a fonte naquela tag.

Exemplo de alteração da fonte de um texto para verdana.

font-size

• Altera o tamanho da fonte.
• Ao aplicar a mudança na tag body é possível mudar o tamanho da fonte de toda a página. Nesse exemplo modificamos para 75% do tamanho.
• Também é possível utilizar em tags de texto como títulos e parágrafos, mudando apenas o tamanho da fonte naquela tag.

Exemplo de alteração do tamanho da fonte para 150%.

text-align

• Altera o alinhamento.
• Ao aplicar a mudança na tag body, é possível mudar o alinhamento de toda a página. Nesse exemplo modificamos para justify.
• Também é possível utilizar em tags de texto como títulos e parágrafos, mudando apenas o alinhamento naquela tag.

Exemplo de alteração do alinhamento para center.

Exemplo de alteração do alinhamento para left.

Exemplo de alteração do alinhamento para right.

Exemplo de alteração do alinhamento para justify.

border

• Adiciona uma borda no texto.
• É possível alterar o tamanho da borda em pixels e a sua cor.

Esse texto possui uma borda.

Representação de cores

• Além de representar as cores por nomes, é possível utilizar os seguintes padrões: RGB, HEX, HSL, RGBA, HSLA.
• Os padrões RGBA e HSLA adicionam Alpha Channel e permitem alterar a transparência da cor especificada.

Cor de background especificada em RGB.

Cor de background especificada em HEX.

Cor de background especificada em HSL.

Cor de background especificada em RGBA.

Cor de background especificada em HSLA.

<- Voltar