CSS - Guia Rápido

Superior styles to HTML - CSS tem uma gama de atributos muito mais ampla do que HTML, então você pode dar uma aparência muito melhor para sua página HTML em comparação com atributos HTML.
Multiple Device Compatibility- As folhas de estilo permitem que o conteúdo seja otimizado para mais de um tipo de dispositivo. Usando o mesmo documento HTML, diferentes versões de um site podem ser apresentadas para dispositivos portáteis, como PDAs e telefones celulares, ou para impressão.
Global web standards- Agora os atributos HTML estão sendo preteridos e é recomendado o uso de CSS. Portanto, é uma boa ideia começar a usar CSS em todas as páginas HTML para torná-las compatíveis com navegadores futuros.

Quem cria e mantém CSS?

CSS é criado e mantido por um grupo de pessoas dentro do W3C chamado CSS Working Group. O CSS Working Group cria documentos chamados especificações. Quando uma especificação é discutida e oficialmente ratificada pelos membros do W3C, ela se torna uma recomendação.

Essas especificações ratificadas são chamadas de recomendações porque o W3C não tem controle sobre a implementação real da linguagem. Empresas e organizações independentes criam esse software.

NOTE - O World Wide Web Consortium, ou W3C é um grupo que faz recomendações sobre como a Internet funciona e como deve evoluir.

Versões CSS

Cascading Style Sheets nível 1 (CSS1) saiu do W3C como uma recomendação em dezembro de 1996. Esta versão descreve a linguagem CSS, bem como um modelo de formatação visual simples para todas as tags HTML.

CSS2 se tornou uma recomendação do W3C em maio de 1998 e se baseia no CSS1. Esta versão adiciona suporte para folhas de estilo específicas de mídia, por exemplo, impressoras e dispositivos aurais, fontes para download, posicionamento de elementos e tabelas.

selector { property: value }

Example - Você pode definir uma borda da mesa da seguinte maneira -

table{ border :1px solid #C00; }

Aqui, a tabela é um seletor e a borda é uma propriedade e o valor dado 1px solid # C00 é o valor dessa propriedade.

Você pode definir seletores de várias maneiras simples com base no seu conforto. Deixe-me colocar esses seletores um por um.

Os Seletores de Tipo

Este é o mesmo seletor que vimos acima. Novamente, mais um exemplo para dar uma cor a todos os títulos de nível 1 -

h1 {
   color: #36CFFF; 
}

Os Seletores Universais

Em vez de selecionar elementos de um tipo específico, o seletor universal simplesmente corresponde ao nome de qualquer tipo de elemento -

* { 
   color: #000000; 
}

Esta regra exibe o conteúdo de cada elemento em nosso documento em preto.

Os Seletores Descendentes

Suponha que você queira aplicar uma regra de estilo a um elemento específico apenas quando ele estiver dentro de um elemento específico. Conforme fornecido no exemplo a seguir, a regra de estilo se aplicará ao elemento <em> apenas quando ele estiver dentro da tag <ul>.

ul em {
   color: #000000; 
}

Os seletores de classe

Você pode definir regras de estilo com base no atributo de classe dos elementos. Todos os elementos que possuem essa classe serão formatados de acordo com a regra definida.

.black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto para cada elemento com o atributo de classe definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo -

h1.black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo de classe definido como preto .

Você pode aplicar mais de um seletor de classe a determinado elemento. Considere o seguinte exemplo -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Os seletores de ID

Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com esse id serão formatados de acordo com a regra definida.

#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto para cada elemento com o atributo id definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo -

h1#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo id definido como preto .

O verdadeiro poder dos seletores de id é quando eles são usados como base para seletores descendentes, por exemplo -

#black h2 {
   color: #000000; 
}

Neste exemplo, todos os cabeçalhos de nível 2 serão exibidos em preto, quando esses cabeçalhos ficarão com tags com o atributo id definido como preto .

Os Seletores Filhos

Você viu os seletores descendentes. Existe mais um tipo de seletor, que é muito semelhante aos descendentes, mas possui funcionalidades diferentes. Considere o seguinte exemplo -

body > p {
   color: #000000; 
}

Esta regra renderizará todos os parágrafos em preto se eles forem filhos diretos do elemento <body>. Outros parágrafos colocados dentro de outros elementos como <div> ou <td> não teriam qualquer efeito nesta regra.

Os Seletores de Atributo

Você também pode aplicar estilos a elementos HTML com atributos específicos. A regra de estilo abaixo corresponderá a todos os elementos de entrada com um atributo de tipo com um valor de texto -

input[type = "text"] {
   color: #000000; 
}

A vantagem desse método é que o elemento <input type = "submit" /> não é afetado e a cor é aplicada apenas aos campos de texto desejados.

Existem as seguintes regras aplicadas ao seletor de atributos.

p[lang]- Seleciona todos os elementos de parágrafo com um atributo lang .
p[lang="fr"]- Seleciona todos os elementos de parágrafo cujo atributo lang tem um valor exatamente "fr".
p[lang~="fr"]- Seleciona todos os elementos de parágrafo cujo atributo lang contém a palavra "fr".
p[lang|="en"]- Seleciona todos os elementos de parágrafo cujo atributo lang contém valores que são exatamente "en" ou começam com "en-".

Regras de múltiplos estilos

Você pode precisar definir várias regras de estilo para um único elemento. Você pode definir essas regras para combinar várias propriedades e valores correspondentes em um único bloco, conforme definido no exemplo a seguir -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Aqui, todos os pares de propriedades e valores são separados por um semicolon (;). Você pode mantê-los em uma única linha ou em várias linhas. Para melhor legibilidade, nós os mantemos em linhas separadas.

Por um tempo, não se preocupe com as propriedades mencionadas no bloco acima. Essas propriedades serão explicadas nos próximos capítulos e você pode encontrar detalhes completos sobre as propriedades nas Referências CSS

Seletores de agrupamento

Você pode aplicar um estilo a vários seletores, se desejar. Basta separar os seletores com uma vírgula, conforme mostrado no exemplo a seguir -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Esta regra de definição de estilo também será aplicável aos elementos h1, h2 e h3. A ordem da lista é irrelevante. Todos os elementos no seletor terão as declarações correspondentes aplicadas a eles.

Você pode combinar os vários seletores de id como mostrado abaixo -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Isso produzirá o seguinte resultado -

Atributos

Os atributos associados aos elementos <style> são -

Atributo	Valor	Descrição
tipo	texto / css	Especifica a linguagem da folha de estilo como um tipo de conteúdo (tipo MIME). Este é um atributo obrigatório.
meios de comunicação	tela tty televisão projeção portátil impressão braille auricular todos	Especifica o dispositivo em que o documento será exibido. O valor padrão é all . Este é um atributo opcional.

CSS Inline - O atributo de estilo

Você pode usar o atributo de estilo de qualquer elemento HTML para definir regras de estilo. Essas regras serão aplicadas apenas a esse elemento. Aqui está a sintaxe genérica -

<element style = "...style rules....">

Atributos

Atributo	Valor	Descrição
estilo	regras de estilo	O valor do atributo style é uma combinação de declarações de estilo separadas por ponto e vírgula (;).

Exemplo

A seguir está o exemplo de CSS embutido com base na sintaxe acima -

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Isso produzirá o seguinte resultado -

CSS externo - o elemento <link>

O elemento <link> pode ser usado para incluir um arquivo de folha de estilo externo em seu documento HTML.

Uma folha de estilo externa é um arquivo de texto separado com .cssextensão. Você define todas as regras de estilo neste arquivo de texto e, em seguida, pode incluir esse arquivo em qualquer documento HTML usando o elemento <link>.

Aqui está a sintaxe genérica de inclusão de arquivo CSS externo -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atributos

Os atributos associados aos elementos <style> são -

Atributo	Valor	Descrição
tipo	texto css	Especifica a linguagem da folha de estilo como um tipo de conteúdo (tipo MIME). Este atributo é obrigatório.
href	URL	Especifica o arquivo de folha de estilo com regras de estilo. Este atributo é obrigatório.
meios de comunicação	tela tty televisão projeção portátil impressão braille auricular todos	Especifica o dispositivo em que o documento será exibido. O valor padrão é all . Este é um atributo opcional.

Exemplo

Considere um arquivo de folha de estilo simples com um nome mystyle.css tendo as seguintes regras -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Agora você pode incluir este arquivo mystyle.css em qualquer documento HTML da seguinte maneira -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

CSS importado - regra @import

@import é usado para importar uma folha de estilo externa de maneira semelhante ao elemento <link>. Aqui está a sintaxe genérica da regra @import.

<head>
   @import "URL";
</head>

Aqui, URL é o URL do arquivo de folha de estilo com regras de estilo. Você também pode usar outra sintaxe -

<head>
   @import url("URL");
</head>

Exemplo

A seguir está o exemplo que mostra como importar um arquivo de folha de estilo para um documento HTML -

<head>
   @import "mystyle.css";
</head>

Substituição de regras CSS

Discutimos quatro maneiras de incluir regras de folha de estilo em um documento HTML. Aqui está a regra para substituir qualquer regra da folha de estilo.

Qualquer folha de estilo embutida tem a maior prioridade. Portanto, ele substituirá qualquer regra definida nas tags <style> ... </style> ou regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida nas marcas <style> ... </style> substituirá as regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida em um arquivo de folha de estilo externo tem a prioridade mais baixa e as regras definidas neste arquivo serão aplicadas apenas quando as duas regras acima não forem aplicáveis.

Lidar com navegadores antigos

Ainda existem muitos navegadores antigos que não suportam CSS. Portanto, devemos ter cuidado ao escrever nosso CSS incorporado em um documento HTML. O snippet a seguir mostra como você pode usar tags de comentário para ocultar CSS de navegadores mais antigos -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Comentários CSS

Muitas vezes, você pode precisar colocar comentários adicionais em seus blocos de folha de estilo. Portanto, é muito fácil comentar qualquer parte na folha de estilo. Você pode simplesmente colocar seus comentários dentro de /*..... este é um comentário na folha de estilo ..... * /.

Você pode usar / * .... * / para comentar blocos de várias linhas de maneira semelhante ao que faz nas linguagens de programação C e C ++.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

%	Define uma medida como uma porcentagem em relação a outro valor, normalmente um elemento envolvente.	p {tamanho da fonte: 16pt; altura da linha: 125%;}
cm	Define uma medida em centímetros.	div {margem inferior: 2cm;}
em	Uma medida relativa da altura de uma fonte em espaços eme. Como uma unidade em é equivalente ao tamanho de uma determinada fonte, se você atribuir uma fonte a 12pt, cada unidade "em" terá 12pt; assim, 2em seria 24pt.	p {espaçamento entre letras: 7em;}
ex	Este valor define uma medida relativa à altura x de uma fonte. A altura x é determinada pela altura da letra x minúscula da fonte.	p {tamanho da fonte: 24pt; altura da linha: 3ex;}
dentro	Define uma medida em polegadas.	p {espaçamento entre palavras: 0,15 pol;}
milímetros	Define uma medida em milímetros.	p {espaçamento entre palavras: 15 mm;}
pc	Define uma medida em picas. Uma pica equivale a 12 pontos; portanto, existem 6 picas por polegada.	p {tamanho da fonte: 20pc;}
pt	Define uma medida em pontos. Um ponto é definido como 1/72 de polegada.	corpo {tamanho da fonte: 18pt;}
px	Define uma medida em pixels da tela.	p {padding: 25px;}

Código Hex	#RRGGBB	p {cor: # FF0000;}
Código Hex Curto	#RGB	p {cor: # 6A7;}
RGB%	rgb (rrr%, ggg%, bbb%)	p {cor: rgb (50%, 50%, 50%);}
RGB Absoluto	rgb (rrr, ggg, bbb)	p {cor: rgb (0,0,255);}
palavra chave	água, preto, etc.	p {cor: azul-petróleo;}

Esses formatos são explicados com mais detalhes nas seções a seguir -

Cores CSS - Códigos hexadecimais

Um hexadecimal é uma representação de 6 dígitos de uma cor. Os primeiros dois dígitos (RR) representam um valor vermelho, os próximos dois são um valor verde (GG) e os últimos são o valor azul (BB).

Um valor hexadecimal pode ser obtido de qualquer software gráfico como Adobe Photoshop, Jasc Paintshop Pro ou mesmo usando o Advanced Paint Brush.

Cada código hexadecimal será precedido por uma cerquilha ou jogo da velha '#'. A seguir estão os exemplos para usar a notação hexadecimal.

Cor	Cor HEX
	# 000000
	# FF0000
	# 00FF00
	# 0000FF
	# FFFF00
	# 00FFFF
	# FF00FF
	# C0C0C0
	#FFFFFF

Cores CSS - Códigos hexadecimais curtos

Esta é uma forma mais curta da notação de seis dígitos. Nesse formato, cada dígito é replicado para chegar a um valor equivalente de seis dígitos. Por exemplo: # 6A7 torna-se # 66AA77.

Um valor hexadecimal pode ser obtido de qualquer software gráfico como Adobe Photoshop, Jasc Paintshop Pro ou mesmo usando o Advanced Paint Brush.

Cada código hexadecimal será precedido por uma cerquilha ou jogo da velha '#'. A seguir estão os exemplos para usar a notação hexadecimal.

Cor	Cor HEX
	# 000
	# F00
	# 0F0
	# 0FF
	# FF0
	# 0FF
	# F0F
	#FFF

Cores CSS - Valores RGB

Este valor de cor é especificado usando o rgb( )propriedade. Essa propriedade assume três valores, um para vermelho, verde e azul. O valor pode ser um número inteiro entre 0 e 255 ou uma porcentagem.

NOTE - Todos os navegadores não suportam a propriedade rgb () de cor, por isso é recomendado não usá-la.

A seguir está o exemplo para mostrar algumas cores usando valores RGB.

Cor	Cor RGB
	rgb (0,0,0)
	rgb (255,0,0)
	rgb (0,255,0)
	rgb (0,0,255)
	rgb (255,255,0)
	rgb (0,255,255)
	rgb (255,0,255)
	rgb (192,192,192)
	rgb (255,255,255)

Códigos de cores de construção

Você pode criar milhões de códigos de cores usando nosso Criador de códigos de cores. Confira nossoHTML Color Code Builder. Para usar esta ferramenta, você precisa de um navegador habilitado para Java.

Cores de segurança do navegador

Aqui está a lista de 216 cores que devem ser as cores mais seguras e independentes do computador. Essas cores variam do código hexa 000000 a FFFFFF. Essas cores são seguras de usar porque garantem que todos os computadores exibam as cores corretamente ao executar uma paleta de 256 cores -

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	Otox	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Set the Background Color

Following is the example which demonstrates how to set the background color for an element.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

This will produce following result −

Set the Background Image

We can set the background image by calling local stored images as shown below −

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

It will produce the following result −

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

The following example which demonstrates how to repeat the background image vertically.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

The following example demonstrates how to repeat the background image horizontally.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

Set the Background Image Position

The following example demonstrates how to set the background image position 100 pixels away from the left side.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

Set the Background Attachment

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

The following example demonstrates how to set the fixed background image.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

It will produce the following result −

The following example demonstrates how to set the scrolling background image.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

It will produce the following result −

Shorthand Property

You can use the background property to set all the background properties at once. For example −

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

Set the Font Family

Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

This will produce following result −

Set the Font Style

Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

This will produce following result −

Set the Font Variant

The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

This will produce following result −

Set the Font Weight

The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

This will produce following result −

Set the Font Size

The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

This will produce following result −

Set the Font Size Adjust

The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

This will produce following result −

Set the Font Stretch

The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.

Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

This will produce following result −

Shorthand Property

You can use the font property to set all the font properties at once. For example −

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

This will produce following result −

The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.

Set the Text Color

The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

It will produce the following result −

Set the Text Direction

The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

It will produce the following result −

Set the Space between Characters

The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

It will produce the following result −

Set the Space between Words

The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

This will produce following result −

Set the Text Indent

The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

It will produce the following result −

Set the Text Alignment

The following example demonstrates how to align a text. Possible values are left, right, center, justify.

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

This will produce following result −

Decorating the Text

The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

This will produce following result −

Set the Text Cases

The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

This will produce following result −

Set the White Space between Text

The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

This will produce following result −

Set the Text Shadow

The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

It will produce the following result −

The Image Border Property

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.

A width of zero pixels means no border.

Here is the example −

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

It will produce the following result −

The Image Height Property

The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is an example −

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

It will produce the following result −

The Image Width Property

The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is an example −

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

It will produce the following result −

The -moz-opacity Property

The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Here is an example −

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

It will produce the following result −

Usually, all these properties are kept in the header part of the HTML document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Now, we will see how to use these properties to give different effects to hyperlinks.

Set the Color of Links

The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

It will produce the following black link −

Set the Color of Visited Links

The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

It will produce the following link. Once you will click this link, it will change its color to green.

Change the Color of Links when Mouse is Over

The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.

Change the Color of Active Links

The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

It will produce the following link. It will change its color to pink when the user clicks it.

Now, we will see how to use these properties with examples.

The border-collapse Property

This property can have two values collapse and separate. The following example uses both the values −

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

It will produce the following result −

The border-spacing Property

The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.

If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −

NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Agora vamos modificar o exemplo anterior e ver o efeito -

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade do lado da legenda

A propriedade caption-side permite que você especifique onde o conteúdo de um elemento <caption> deve ser colocado em relação à tabela. A tabela a seguir lista os valores possíveis.

Esta propriedade pode ter um dos quatro valores superior, inferior, esquerdo ou direito . O exemplo a seguir usa cada valor.

NOTE - Essas propriedades podem não funcionar com o seu navegador IE.

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade de células vazias

A propriedade empty-cells indica se uma célula sem qualquer conteúdo deve ter uma borda exibida.

Esta propriedade pode ter um dos três valores - mostrar, ocultar ou herdar .

Aqui está a propriedade empty-cells usada para ocultar bordas de células vazias no elemento <table>.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade table-layout

A propriedade table-layout deve ajudá-lo a controlar como um navegador deve renderizar ou dispor uma tabela.

Esta propriedade pode ter um dos três valores: fixo, automático ou herdar .

O exemplo a seguir mostra a diferença entre essas propriedades.

NOTE - Esta propriedade não é compatível com muitos navegadores, portanto, não confie nela.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade border-color permite que você altere a cor da borda ao redor de um elemento. Você pode alterar individualmente a cor dos lados inferior, esquerdo, superior e direito da borda de um elemento usando as propriedades -

border-bottom-color muda a cor da borda inferior.
border-top-color muda a cor da borda superior.
border-left-color muda a cor da borda esquerda.
border-right-color muda a cor da borda direita.

O exemplo a seguir mostra o efeito de todas essas propriedades -

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade border-style

A propriedade border-style permite que você selecione um dos seguintes estilos de borda -

none- Sem fronteira. (Equivalente à largura da borda: 0;)
solid - Borda é uma única linha sólida.
dotted - A borda é uma série de pontos.
dashed - Borda é uma série de linhas curtas.
double - A borda é duas linhas sólidas.
groove - A borda parece estar gravada na página.
ridge - A borda parece o oposto do sulco.
inset - Borda faz com que a caixa pareça que está embutida na página.
outset - Borda faz com que a caixa pareça que está saindo da tela.
hidden - O mesmo que nenhum, exceto em termos de resolução de conflito de fronteira para os elementos da tabela.

Você pode alterar individualmente o estilo das bordas inferior, esquerda, superior e direita de um elemento usando as seguintes propriedades -

border-bottom-style muda o estilo da borda inferior.
border-top-style muda o estilo da borda superior.
border-left-style muda o estilo da borda esquerda.
border-right-style muda o estilo da borda direita.

O exemplo a seguir mostra todos esses estilos de borda -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade border-width

A propriedade border-width permite que você defina a largura das bordas de um elemento. O valor desta propriedade pode ser um comprimento em px, pt ou cm ou deve ser definido como fino, médio ou grosso.

Você pode alterar individualmente a largura das bordas inferior, superior, esquerda e direita de um elemento usando as seguintes propriedades -

border-bottom-width altera a largura da borda inferior.
border-top-width altera a largura da borda superior.
border-left-width altera a largura da borda esquerda.
border-right-width altera a largura da borda direita.

O exemplo a seguir mostra todas essas larguras de borda -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Propriedades da borda usando taquigrafia

A propriedade border permite que você especifique a cor, o estilo e a largura das linhas em uma propriedade -

O exemplo a seguir mostra como usar todas as três propriedades em uma única propriedade. Esta é a propriedade usada com mais frequência para definir a borda em torno de qualquer elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

o margin-right especifica a margem direita de um elemento.

Agora, veremos como usar essas propriedades com exemplos.

The Margin Property

A propriedade margin permite que você defina todas as propriedades para as quatro margens em uma declaração. Aqui está a sintaxe para definir a margem em torno de um parágrafo -

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade de margem inferior

A propriedade margin-bottom permite definir a margem inferior de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade do topo da margem

A propriedade margin-top permite definir a margem superior de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade da margem esquerda

A propriedade margin-left permite definir a margem esquerda de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade margin-right

A propriedade margin-right permite definir a margem direita de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Agora, veremos como usar essas propriedades com exemplos.

A propriedade list-style-type

A propriedade list-style-type permite controlar a forma ou o estilo do marcador (também conhecido como marcador) no caso de listas não ordenadas e o estilo dos caracteres de numeração em listas ordenadas.

Aqui estão os valores que podem ser usados para uma lista não ordenada -

Sr. Não.	Valor e descrição
1	none N / D
2	disc (default) Um círculo preenchido
3	circle Um círculo vazio
4	square Um quadrado preenchido

Aqui estão os valores, que podem ser usados para uma lista ordenada -

Valor	Descrição	Exemplo
decimal	Número	1,2,3,4,5
decimal à esquerda	0 antes do número	01, 02, 03, 04, 05
alfa inferior	Caracteres alfanuméricos minúsculos	a, b, c, d, e
alfa superior	Caracteres alfanuméricos maiúsculos	A, B, C, D, E
romano inferior	Números romanos minúsculos	i, ii, iii, iv, v
romano superior	Numerais romanos maiúsculos	I, II, III, IV, V
grego inferior	O marcador é grego inferior	alfa, beta, gama
latim inferior	O marcador é latim inferior	a, b, c, d, e
latim superior	O marcador é latim maiúsculo	A, B, C, D, E
hebraico	O marcador é uma numeração hebraica tradicional
armênio	O marcador é a numeração armênia tradicional
georgiano	O marcador é a numeração tradicional da Geórgia
cjk-ideográfico	O marcador são números ideográficos simples
hiragana	O marcador é hiragana	a, i, u, e, o, ka, ki
katakana	O marcador é katakana	A, I, U, E, O, KA, KI
hiragana-iroha	O marcador é hiragana-iroha	eu, ro, ha, ni, ho, ele, para
katakana-iroha	O marcador é katakana-iroha	I, RO, HA, NI, HO, HE, TO

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade list-style-position

A propriedade list-style-position indica se o marcador deve aparecer dentro ou fora da caixa que contém os marcadores. Pode ter um dos dois valores -

Sr. Não.	Valor e descrição
1	none N / D
2	inside Se o texto for para uma segunda linha, o texto será quebrado abaixo do marcador. Ele também aparecerá recuado para onde o texto teria começado se a lista tivesse um valor de fora.
3	outside Se o texto for para uma segunda linha, o texto será alinhado com o início da primeira linha (à direita do marcador).

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade list-style-image

O list-style-image permite que você especifique uma imagem para que você possa usar seu próprio estilo de marcador. A sintaxe é semelhante à propriedade background-image com as letras url iniciando o valor da propriedade seguido pelo URL entre colchetes. Se não encontrar a imagem fornecida, serão usados marcadores padrão.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade em estilo de lista

O estilo de lista permite que você especifique todas as propriedades da lista em uma única expressão. Essas propriedades podem aparecer em qualquer ordem.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade do marcador-offset

A propriedade marker-offset permite que você especifique a distância entre o marcador e o texto relacionado a esse marcador. Seu valor deve ser um comprimento, conforme mostrado no exemplo a seguir -

Infelizmente, esta propriedade não é compatível com o IE 6 ou Netscape 7.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Isso produzirá o seguinte resultado -

o padding serve como um atalho para as propriedades anteriores.

Agora, veremos como usar essas propriedades com exemplos.

A propriedade padding-bottom

A propriedade padding-bottom define o padding inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>
      
      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade padding-top

A propriedade padding-top define o preenchimento superior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>
      
      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade padding-left

A propriedade padding-left define o padding esquerdo (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>
      
      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade padding-right

A propriedade padding-right define o preenchimento correto (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>
      
      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A Propriedade Padding

A propriedade padding define o preenchimento esquerdo, direito, superior e inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px 
      </p> 
      
      <p style = "padding:10px 2%; border:1px solid black;"> 
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document. 
      </p> 
      
      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will 
         be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

1	auto A forma do cursor depende da área de contexto em que ele está. Por exemplo, um I sobre o texto, uma passagem sobre um link e assim por diante ...
2	crosshair Uma cruz ou sinal de mais
3	default Uma flecha
4	pointer Uma mão apontando (no IE 4, este valor é uma mão)
5	move A barra I
6	e-resize O cursor indica que uma borda de uma caixa deve ser movida para a direita (leste)
7	ne-resize O cursor indica que uma borda de uma caixa deve ser movida para cima e para a direita (norte / leste)
8	nw-resize O cursor indica que uma borda de uma caixa deve ser movida para cima e para a esquerda (norte / oeste)
9	n-resize O cursor indica que uma borda de uma caixa deve ser movida para cima (norte)
10	se-resize O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a direita (sul / leste)
11	sw-resize O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a esquerda (sul / oeste)
12	s-resize O cursor indica que uma borda de uma caixa deve ser movida para baixo (sul)
13	w-resize O cursor indica que uma borda de uma caixa deve ser movida para a esquerda (oeste)
14	text A barra I
15	wait Uma ampulheta
16	help Um ponto de interrogação ou balão, ideal para usar com botões de ajuda
17	<url> A fonte de um arquivo de imagem de cursor

NOTE- Você deve tentar usar apenas esses valores para adicionar informações úteis para os usuários e, em alguns lugares, eles esperariam ver esse cursor. Por exemplo, usar a cruz quando alguém passa o mouse sobre um link pode confundir os visitantes.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

o outline-width propriedade é usada para definir a largura do contorno.
o outline-style propriedade é usada para definir o estilo de linha do contorno.
o outline-color propriedade é usada para definir a cor do contorno.
o outline propriedade é usada para definir todas as três propriedades acima em uma única instrução.

A propriedade de largura do contorno

A propriedade outline-width especifica a largura do contorno a ser adicionado à caixa. Seu valor deve ser um comprimento ou um dos valores thin, medium ou thick, assim como o atributo border-width.

Uma largura de zero pixels significa nenhum contorno.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade de estilo de contorno

A propriedade outline-style especifica o estilo da linha (sólida, pontilhada ou tracejada) que circunda um elemento. Pode assumir um dos seguintes valores -

none- Sem fronteira. (Equivalente à largura do contorno: 0;)
solid - O contorno é uma única linha sólida.
dotted - O contorno é uma série de pontos.
dashed - O esboço é uma série de linhas curtas.
double - O contorno tem duas linhas sólidas.
groove - O contorno parece estar esculpido na página.
ridge - O contorno parece o oposto do sulco.
inset - Contorno faz com que a caixa pareça estar embutida na página.
outset - O contorno faz com que a caixa pareça que está saindo da tela.
hidden - O mesmo que nenhum.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade cor do contorno

A propriedade cor do contorno permite que você especifique a cor do contorno. Seu valor deve ser um nome de cor, uma cor hexadecimal ou um valor RGB, como ocorre com as propriedades de cor e cor da borda.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O esboço da propriedade

A propriedade contorno é uma propriedade abreviada que permite especificar valores para qualquer uma das três propriedades discutidas anteriormente em qualquer ordem, mas em uma única instrução.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

o max-width propriedade é usada para definir a largura máxima que uma caixa pode ter.
o min-width propriedade é usada para definir a largura mínima que uma caixa pode ter.

As propriedades de altura e largura

As propriedades de altura e largura permitem que você defina a altura e a largura das caixas. Eles podem assumir valores de comprimento, porcentagem ou a palavra-chave auto.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade line-height

A propriedade line-height permite aumentar o espaço entre as linhas de texto. O valor da propriedade line-height pode ser um número, um comprimento ou uma porcentagem.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade max-height

A propriedade max-height permite que você especifique a altura máxima de uma caixa. O valor da propriedade max-height pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade min-height

A propriedade min-height permite que você especifique a altura mínima de uma caixa. O valor da propriedade min-height pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade max-width

A propriedade max-width permite que você especifique a largura máxima de uma caixa. O valor da propriedade max-width pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade min-width

A propriedade min-width permite que você especifique a largura mínima de uma caixa. O valor da propriedade min-width pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Isso produzirá o seguinte resultado -

1	visible Permite que o conteúdo ultrapasse as bordas do elemento que o contém.
2	hidden O conteúdo do elemento aninhado é simplesmente cortado na borda do elemento que o contém e nenhuma barra de rolagem fica visível.
3	scroll O tamanho do elemento que o contém não muda, mas as barras de rolagem são adicionadas para permitir que o usuário role para ver o conteúdo.
4	auto O propósito é o mesmo que rolar, mas a barra de rolagem será exibida apenas se o conteúdo transbordar.

Aqui está um exemplo -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

1	visible A caixa e seu conteúdo são mostrados ao usuário.
2	hidden A caixa e seu conteúdo ficam invisíveis, embora ainda afetem o layout da página.
3	collapse Isso é para uso apenas com colunas de tabela dinâmica e efeitos de linha.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p>
         This paragraph should be visible in normal way.
      </p>
   
      <p style = "visibility:hidden;">
         This paragraph should not be visible.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo .

Aqui está o exemplo -

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Posicionamento Absoluto

Um elemento com position: absolute está posicionado nas coordenadas especificadas em relação ao canto superior esquerdo da tela.

Você pode usar dois valores top e left junto com a propriedade position para mover um elemento HTML para qualquer lugar no documento HTML.

Mover para a esquerda - use um valor negativo para a esquerda .
Mover para a direita - use um valor positivo para a esquerda .
Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Posicionamento Fixo

O posicionamento fixo permite que você fixe a posição de um elemento em um ponto específico na página, independentemente da rolagem. As coordenadas especificadas serão relativas à janela do navegador.

Você pode usar dois valores top e left junto com a propriedade position para mover um elemento HTML para qualquer lugar no documento HTML.

Mover para a esquerda - use um valor negativo para a esquerda .
Mover para a direita - use um valor positivo para a esquerda .
Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo .

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>

<body>
   <div style = "background-color:red; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:10px; 
      left:80px; 
      z-index:2">
   </div>
      
   <div style = "background-color:yellow; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:-60px; 
      left:35px; 
      z-index:1;">
   </div>
      
   <div style = "background-color:green; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:-220px; 
      left:120px; 
      z-index:3;">
   </div>
</body>

Isso produzirá o seguinte resultado -

As pseudo classes mais comumente usadas são as seguintes -

Sr. Não.	Valor e descrição
1	:link Use esta classe para adicionar um estilo especial a um link não visitado.
2	:visited Use esta classe para adicionar um estilo especial a um link visitado.
3	:hover Use esta classe para adicionar um estilo especial a um elemento ao passar o mouse sobre ele.
4	:active Use esta classe para adicionar um estilo especial a um elemento ativo.
5	:focus Use esta classe para adicionar um estilo especial a um elemento enquanto o elemento tem o foco.
6	:first-child Use esta classe para adicionar estilo especial a um elemento que é o primeiro filho de algum outro elemento.
7	:lang Use esta classe para especificar um idioma a ser usado em um elemento especificado.

Ao definir pseudo-classes em um bloco <style> ... </style>, os seguintes pontos devem ser observados -

a: hover DEVE vir depois de um: link e a: visitado na definição CSS para ser eficaz.
a: active DEVE vir após a: hover na definição de CSS para ser eficaz.
Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas.
As pseudo classes são diferentes das classes CSS, mas podem ser combinadas.

A pseudo classe: link

O exemplo a seguir demonstra como usar a classe : link para definir a cor do link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

Ele produzirá o seguinte link preto -

A: pseudo classe visitada

A seguir está o exemplo que demonstra como usar a classe : visitado para definir a cor dos links visitados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

Isso produzirá o seguinte link. Depois de clicar neste link, ele mudará sua cor para verde.

A pseudo classe: hover

O exemplo a seguir demonstra como usar a classe : hover para alterar a cor dos links quando colocamos o ponteiro do mouse sobre o link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

Ele produzirá o seguinte link. Agora, passe o mouse sobre este link e verá que ele muda de cor para amarelo.

A: pseudo classe ativa

O exemplo a seguir demonstra como usar a classe : active para alterar a cor dos links ativos. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

Ele produzirá o seguinte link. Quando um usuário clica nele, a cor muda para rosa.

A pseudo classe: focus

O exemplo a seguir demonstra como usar a classe : focus para alterar a cor dos links focados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

Ele produzirá o seguinte link. Quando este link é focalizado, sua cor muda para laranja. A cor muda de volta quando perde o foco.

A: pseudoclasse do primeiro filho

A pseudoclasse: first-child corresponde a um elemento especificado que é o primeiro filho de outro elemento e adiciona um estilo especial a esse elemento que é o primeiro filho de algum outro elemento.

Para fazer: o trabalho do primeiro filho no IE <! DOCTYPE> deve ser declarado no início do documento.

Por exemplo, para indentar o primeiro parágrafo de todos os elementos <div>, você pode usar esta definição -

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

A pseudo classe: lang

A pseudo-classe de idioma: lang , permite construir seletores com base na configuração de idioma para tags específicas.

Esta classe é útil em documentos que devem apelar a vários idiomas que têm convenções diferentes para certas construções de linguagem. Por exemplo, o idioma francês normalmente usa colchetes angulares (<e>) para fins de citação, enquanto o idioma inglês usa aspas ('e').

Em um documento que precisa abordar essa diferença, você pode usar a pseudoclasse: lang para alterar as aspas de maneira adequada. O código a seguir altera a tag <blockquote> apropriadamente para o idioma que está sendo usado -

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

Os seletores: lang serão aplicados a todos os elementos do documento. No entanto, nem todos os elementos usam a propriedade aspas, portanto, o efeito será transparente para a maioria dos elementos.

Isso produzirá o seguinte resultado -

Os pseudo-elementos mais comumente usados são os seguintes -

Sr. Não.	Valor e descrição
1	:first-line Use este elemento para adicionar estilos especiais à primeira linha do texto em um seletor.
2	:first-letter Use este elemento para adicionar um estilo especial à primeira letra do texto em um seletor.
3	:before Use este elemento para inserir algum conteúdo antes de um elemento.
4	:after Use este elemento para inserir algum conteúdo após um elemento.

O: pseudo-elemento de primeira linha

O exemplo a seguir demonstra como usar o elemento : first-line para adicionar efeitos especiais à primeira linha de elementos no documento.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Ele produzirá o seguinte link -

O: pseudo-elemento de primeira letra

O exemplo a seguir demonstra como usar o elemento : first-letter para adicionar efeitos especiais à primeira letra dos elementos no documento.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Ele produzirá o seguinte link preto -

O pseudo-elemento: before

O exemplo a seguir demonstra como usar o elemento : before para adicionar algum conteúdo antes de qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Ele produzirá o seguinte link preto -

O pseudo-elemento: after

O exemplo a seguir demonstra como usar o elemento : after para adicionar algum conteúdo após qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Ele produzirá o seguinte link preto -

A regra @import

A regra @import permite importar estilos de outra folha de estilo. Ele deve aparecer logo no início da folha de estilo antes de qualquer uma das regras e seu valor é um URL.

Pode ser escrito de uma das seguintes maneiras -

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

A importância da regra @import é que ela permite que você desenvolva suas folhas de estilo com uma abordagem modular. Você pode criar várias folhas de estilo e incluí-las sempre que precisar.

A regra @charset

Se você estiver escrevendo seu documento usando um conjunto de caracteres diferente de ASCII ou ISO-8859-1, você pode querer definir a regra @charset no topo de sua folha de estilo para indicar em qual conjunto de caracteres a folha de estilo está escrita.

A regra @charset deve ser escrita logo no início da folha de estilo, sem mesmo um espaço antes dela. O valor é mantido entre aspas e deve ser um dos conjuntos de caracteres padrão. Por exemplo -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

A regra @ font-face

A regra @ font-face é usada para descrever exaustivamente uma face de fonte para uso em um documento. @ font-face também pode ser usado para definir a localização de uma fonte para download, embora isso possa atingir limites específicos de implementação.

Em geral, @ font-face é extremamente complicado e seu uso não é recomendado para ninguém, exceto aqueles que são especialistas em métricas de fontes.

Here is an example −

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

The !important Rule

Cascading Style Sheets cascade. It means that the styles are applied in the same order as they are read by the browser. The first style is applied and then the second and so on.

The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.

For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

So, if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, you should write it as follows −

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Here you have made p { color: #ff0000 !important; } mandatory, now this rule will always apply even you have defined another rule p { color: #000000; }

It will produce the following result −

1	opacity Level of the opacity. 0 is fully transparent, 100 is fully opaque.
2	finishopacity Level of the opacity at the other end of the object.
3	style The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular
4	startX X coordinate for opacity gradient to begin.
5	startY Y coordinate for opacity gradient to begin.
6	finishX X coordinate for opacity gradient to end.
7	finishY Y coordinate for opacity gradient to end.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" />
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Motion Blur

Motion Blur is used to create blurred pictures or text with the direction and strength. The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	add True or false. If true, the image is added to the blurred image; and if false, the image is not added to the blurred image.
2	direction The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left
3	strength The number of pixels the blur will extend. The default is 5 pixels.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

It will produce the following result −

Chroma Filter

Chroma Filter is used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also. The following parameter can be used in this filter −

Sr.No.	Parameter & Description
1	color The color that you'd like to be transparent.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      
      <p>Text Example:</p>
      
      <div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Drop Shadow Effect

Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.

The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	color The color, in #RRGGBB format, of the dropshadow.
2	offX Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
3	offY Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
4	positive If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Flip Effect

Flip effect is used to create a mirror image of the object. The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	FlipH Creates a horizontal mirror image
2	FlipV Creates a vertical mirror image

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
      
      <p>Text Example:</p>
      
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Glow Effect

Glow effect is used to create a glow around the object. If it is a transparent image, then glow is created around the opaque pixels of it. The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	color The color you want the glow to be.
2	strength The intensity of the glow (from 1 to 255).

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Grayscale Effect

Grayscale effect is used to convert the colors of the object to 256 shades of gray. The following parameter is used in this filter −

Sr.No.	Parameter & Description
1	grayscale Converts the colors of the object to 256 shades of gray.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Invert Effect

Invert effect is used to map the colors of the object to their opposite values in the color spectrum, i.e., to create a negative image. The following parameter is used in this filter −

Sr.No.	Parameter & Description
1	Invert Maps the colors of the object to their opposite value in the color spectrum.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">CSS Tutorials</div>
   </body>
</html>

It will produce the following result −

Mask Effect

Mask effect is used to turn transparent pixels to a specified color and makes opaque pixels transparent. The following parameter is used in this filter −

Sr.No.	Parameter & Description
1	color The color that the transparent areas will become.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">CSS Tutorials
      </div>
   </body>
</html>

It will produce the following result −

Shadow Filter

Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that lies in between Dropshadow and Glow. The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	color The color that you want the shadow to be.
2	direction The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
      </div>
   </body>
</html>

It will produce the following result −

Wave Effect

Wave effect is used to give the object a sine wave distortion to make it look wavy. The following parameters can be used in this filter −

Sr.No.	Parameter & Description
1	add A value of 1 adds the original image to the waved image, 0 does not.
2	freq The number of waves.
3	light The strength of the light on the wave (from 0 to 100).
4	phase At what degree the sine wave should start (from 0 to 100).
5	strength The intensity of the wave effect.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
      </div>
   </body>
</html>

It will produce the following result −

X-Ray Effect

X-Ray effect grayscales and flattens the color depth. The following parameter is used in this filter:

Sr.No.	Parameter & Description
1	xray Grayscales and flattens the color depth.

Example

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">CSS Tutorials
      </div>
   </body>
</html>

It will produce the following result −

Given below is an example −

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

The Document Language

In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −

Following is an example −

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

Recognized Media Types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −

Sr.No.	Value & Description
1	all Suitable for all devices.
2	aural Intended for speech synthesizers.
3	braille Intended for braille tactile feedback devices.
4	embossed Intended for paged braille printers.
5	handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
6	print Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
7	projection Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
8	screen Intended primarily for color computer screens.
9	tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
10	tv Intended for television-type devices.

NOTE − Media type names are case-insensitive.

The CSS2 defines a "page box", a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −

The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for layout that occurs between page breaks.
The margin area − It surrounds the page area.

You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.

For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on all sides between the page box edge and the page area −

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page.

Finally, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are printed. You may use one or both of the crop and cross keywords to create crop marks and registration marks, respectively, on the target print page.

Setting Page Size

The size property specifies the size and orientation of a page box. There are four values which can be used for page size −

auto − The page box will be set to the size and orientation of the target sheet.
landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.
portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.
length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.

In the following example, the outer edges of the page box will align with the target. The percentage value on the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

The following example sets the width of the page box to be 8.5 inches and the height to be 11 inches. The page box in this example requires a target sheet size of 8.5" × 11" or larger.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders all the tables in your document on landscape pages −

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

Due to the above rule, while printing, if the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it starts a new page and prints the table on a landscape page.

Left, Right, and First pages

When printing double-sided documents, the page boxes on left and right pages should be different. It can be expressed through two CSS pseudo-classes as follows −

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

You can specify the style for the first page of a document with the :first pseudo-class −

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Controlling Pagination

Unless you specify otherwise, page breaks occur only when the page format changes or when the content overflows the current page box. To otherwise force or suppress page breaks, use the page-break-before, page-break-after, and page-break-inside properties.

Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.

The keyword auto is the default, it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.

Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content. You can achieve this using following rule −

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule −

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

Controlling Widows and Orphans

In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.

The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.

Here is the example to create 4 lines at the bottom and 3 lines at the top of each page −

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>

Medical documentation

When using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).

The CSS properties also allow you to vary the quality of synthesized speech (voice type, frequency, inflection, etc.).

Here is an example −

<html>
   <head>
      <style type = "text/css">
         h1, h2, h3, h4, h5, h6 {
            voice-family: paul;
            stress: 20;
            richness: 90;
            cue-before: url("../audio/pop.au");
         }
         p {
            azimuth:center-right;
         }
      </style>
   </head>

   <body>
   
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
      
   </body>
</html>

It will produce the following result −

It will direct the speech synthesizer to speak headers in a voice (a kind of audio font) called "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL.

Paragraphs with class ‘heidi’ will appear to come from front left (if the sound system is capable of spatial audio), and paragraphs of class ‘peter’ from the right.

Now we will see the various properties related to aural media.

The azimuth property sets, where the sound should come from horizontally.
The elevation property sets, where the sound should come from vertically.
The cue-after specifies a sound to be played after speaking an element's content to delimit it from other.
The cue-before specifies a sound to be played before speaking an element's content to delimit it from other.
The cue is a shorthand for setting cue-before and cue-after.
The pause-after specifies a pause to be observed after speaking an element's content.
The pause-before specifies a pause to be observed before speaking an element's content.
The pause is a shorthand for setting pause-before and pause-after.
The pitch specifies the average pitch (a frequency) of the speaking voice.
The pitch-range specifies variation in average pitch.
The play-during specifies a sound to be played as a background while an element's content is spoken.
The richness specifies the richness, or brightness, of the speaking voice.
The speak specifies whether text will be rendered aurally and if so, in what manner.
The speak-numeral controls how numerals are spoken.
The speak-punctuation specifies how punctuation is spoken.
The speech-rate specifies the speaking rate.
The stress specifies the height of "local peaks" in the intonation contour of a voice.
The voice-family specifies the prioritized list of voice family names.
The volume refers to the median volume of the voice.

A propriedade azimute

A propriedade azimuth define de onde o som deve vir horizontalmente. Os valores possíveis estão listados abaixo -

angle- A posição é descrita em termos de um ângulo dentro do intervalo -360deg a 360deg . O valor 0deg significa diretamente à frente no centro do palco de som. 90deg é para a direita, 180º para trás, e 270deg (ou, de forma equivalente e mais convenientemente, -90deg ) para a esquerda.
left-side- O mesmo que '270deg'. Com 'atrás', '270deg'.
far-left- O mesmo que '300deg'. Com 'atrás', '240deg'.
left- O mesmo que '320deg'. Com 'atrás', '220deg'.
center-left- O mesmo que '340deg'. Com 'atrás', '200deg'.
center- O mesmo que '0deg'. Com 'atrás', '180deg'.
center-right- O mesmo que '20deg'. Com 'atrás', '160deg'.
right- O mesmo que '40deg'. Com 'atrás', '140deg'.
far-right- O mesmo que '60deg'. Com 'atrás', '120deg'.
right-side- O mesmo que '90deg'. Com 'atrás', '90 graus'.
leftwards- Move o som para a esquerda e em relação ao ângulo atual. Mais precisamente, subtrai 20 graus.
rightwards- Move o som para a direita, em relação ao ângulo atual. Mais precisamente, adiciona 20 graus.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1   { azimuth: 30deg }
      td.a { azimuth: far-right }          /*  60deg */
      #12  { azimuth: behind far-right }   /* 120deg */
      p.comment { azimuth: behind }        /* 180deg */
   -->
</style>

A propriedade de elevação

A propriedade de elevação define de onde o som deve vir verticalmente. Os valores possíveis são os seguintes -

angle- Especifica a elevação como um ângulo, entre -90deg e 90deg . 0deg significa no horizonte à frente, o que significa vagamente no nível do ouvinte. 90deg significa diretamente acima da cabeça e -90deg significa diretamente abaixo.
below - O mesmo que '-90deg'.
level - O mesmo que '0deg'.
above - O mesmo que '90deg'.
higher - Adiciona 10 graus à elevação atual.
lower - Subtrai 10 graus da elevação atual.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1   { elevation: above }
      tr.a { elevation: 60deg }
      tr.b { elevation: 30deg }
      tr.c { elevation: level }
   -->
</style>

A propriedade cue-after

A propriedade cue-after especifica um som a ser reproduzido depois de falar o conteúdo de um elemento para separá-lo de outro. Os valores possíveis incluem -

url - O URL de um arquivo de som a ser reproduzido.
none - Nada precisa ser tocado.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      a {cue-after: url("dong.wav");}
      h1 {cue-after: url("pop.au"); }
   -->
</style>

A propriedade cue-before

Esta propriedade especifica um som a ser reproduzido antes de falar o conteúdo de um elemento para separá-lo de outro. Os valores possíveis são -

url - O URL de um arquivo de som a ser reproduzido.
none - Nada precisa ser tocado.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      a {cue-before: url("bell.aiff");}
      h1 {cue-before: url("pop.au"); }
   -->
</style>

A propriedade cue

A propriedade cue é uma abreviatura para definir cue-before e cue-after . Se dois valores são fornecidos, o primeiro valor é cue-before e o segundo é cue-after . Se apenas um valor for fornecido, ele se aplica a ambas as propriedades.

Por exemplo, as duas regras a seguir são equivalentes -

<style type = "text/css">
   <!--
      h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
      h1 {cue: url("pop.au") }
   -->
</style>

A propriedade pause-after

Esta propriedade especifica uma pausa a ser observada após falar o conteúdo de um elemento. Os valores possíveis são -

time - Expressa a pausa em unidades de tempo absoluto (segundos e milissegundos).
percentage- Refere-se ao inverso do valor da propriedade speech-rate . Por exemplo, se a velocidade da fala é de 120 palavras por minuto (ou seja, uma palavra leva meio segundo, ou 500 ms ), uma pausa após de 100% significa uma pausa de 500 ms e uma pausa posterior de 20% significa 100 ms .

A propriedade pause-before

Esta propriedade especifica uma pausa a ser observada antes de falar o conteúdo de um elemento. Os valores possíveis são -

time - Expressa a pausa em unidades de tempo absoluto (segundos e milissegundos).
percentage- Refere-se ao inverso do valor da propriedade speech-rate . Por exemplo, se a velocidade da fala é de 120 palavras por minuto (ou seja, uma palavra leva meio segundo ou 500 ms ), uma pausa antes de 100% significa uma pausa de 500 ms e uma pausa antes de 20% significa 100 ms .

A propriedade pause

Esta propriedade é uma abreviatura para definir a pausa antes e depois da pausa . Se dois valores forem fornecidos, o primeiro valor será pausar antes e o segundo será pausar depois.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      /* pause-before: 20ms; pause-after: 20ms */
      h1 { pause : 20ms }  
	
      /* pause-before: 30ms; pause-after: 40ms */
      h2{ pause : 30ms 40ms }  
	
      /* pause-before: ?; pause-after: 10ms */
      h3 { pause-after : 10ms }
   -->
</style>

A propriedade do pitch

Esta propriedade especifica o tom médio (uma frequência) da voz falada. O tom médio de uma voz depende da família de vozes. Por exemplo, o tom médio para uma voz masculina padrão é cerca de 120 Hz, mas para uma voz feminina, é cerca de 210 Hz. Os valores possíveis são -

frequency - Especifica o tom médio da voz falada em hertz (Hz).
x-low, low, medium, high, x-high - Esses valores não são mapeados para frequências absolutas, pois esses valores dependem da família de vozes.

A propriedade pitch-range

Esta propriedade especifica a variação do tom médio. Os valores possíveis são -

number- Um valor entre '0' e '100'. Uma faixa de pitch de '0' produz uma voz monótona e plana. Uma faixa de tom de 50 produz inflexão normal. Intervalos de pitch maiores que 50 produzem vozes animadas.

A propriedade play-during

Esta propriedade especifica um som a ser reproduzido como fundo enquanto o conteúdo de um elemento é falado. Os valores possíveis podem ser qualquer um dos seguintes -

URI - O som designado por este <uri> é reproduzido como fundo enquanto o conteúdo do elemento é falado.
mix- Quando presente, esta palavra-chave significa que o som herdado da propriedade play-during do elemento pai continua a tocar e o som designado pelo uri é mixado com ele. Se o mix não for especificado, o som de fundo do elemento substitui o do pai.
repeat- Quando presente, esta palavra-chave significa que o som se repetirá se for muito curto para preencher toda a duração do elemento. Caso contrário, o som é reproduzido uma vez e depois pára.
auto - O som do elemento pai continua a tocar.
none - Esta palavra-chave significa que há silêncio.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      blockquote.sad { play-during: url("violins.aiff") }
      blockquote q   { play-during: url("harp.wav") mix }
      span.quiet     { play-during: none }
   -->
</style>

A propriedade da riqueza

Esta propriedade especifica a riqueza ou brilho da voz falada. Os valores possíveis são -

number- Um valor entre '0' e '100'. Quanto maior o valor, mais a voz será transmitida. Um valor mais baixo produzirá uma voz suave e melíflua.

The speak Property

Esta propriedade especifica se o texto será renderizado auditivamente e, em caso afirmativo, de que maneira. Os valores possíveis são -

none - Suprime a renderização auditiva para que o elemento não precise de tempo para renderizar.
normal - Usa regras de pronúncia dependentes do idioma para renderizar um elemento e seus filhos.
spell-out - Soletra o texto uma letra de cada vez.

Observe a diferença entre um elemento cuja propriedade 'volume' tem um valor de 'silêncio' e um elemento cuja propriedade 'fala' tem o valor 'nenhum'. O primeiro leva o mesmo tempo como se tivesse sido falado, incluindo qualquer pausa antes e depois do elemento, mas nenhum som é gerado. Este último não requer tempo e não é processado.

A propriedade speak-numeral

Esta propriedade controla como os numerais são falados. Os valores possíveis são -

digits- Fale o numeral como dígitos individuais. Assim, "237" é falado como "Dois Três Sete".
continuous- Fale o numeral como um número completo. Assim, "237" é falado como "Duzentos e trinta e sete". As representações de palavras dependem do idioma.

A propriedade speak-punctuation

Esta propriedade especifica como a pontuação é falada. Os valores possíveis são -

code - A pontuação, como ponto e vírgula, colchetes e assim por diante, deve ser falada literalmente.
none - A pontuação não deve ser falada, mas apresentada naturalmente como várias pausas.

A propriedade da taxa de fala

Esta propriedade especifica a taxa de fala. Observe que os valores absolutos e relativos de palavras-chave são permitidos. Os valores possíveis são -

number - Especifica a taxa de fala em palavras por minuto.
x-slow - O mesmo que 80 palavras por minuto.
slow - O mesmo que 120 palavras por minuto.
medium - O mesmo que 180 - 200 palavras por minuto.
fast - O mesmo que 300 palavras por minuto.
x-fast - O mesmo que 500 palavras por minuto.
faster - Adiciona 40 palavras por minuto à taxa de fala atual.
slower - Subtrai 40 palavras por minuto da taxa de fala atual.

A propriedade estresse

Esta propriedade especifica a altura dos "picos locais" no contorno de entonação de uma voz. O inglês é um idioma com ênfase, e diferentes partes de uma frase são atribuídas à ênfase primária, secundária ou terciária. Os valores possíveis são -

number- Um valor entre '0' e '100'. O significado dos valores depende do idioma falado. Por exemplo, um nível de '50' para uma voz masculina padrão falante de inglês (tom médio = 122 Hz), falar com entonação e ênfase normais teria um significado diferente de '50' para uma voz italiana.

A propriedade da família de voz

O valor é uma lista priorizada, separada por vírgulas, de sobrenomes de vozes. Pode ter os seguintes valores -

generic-voice- Os valores são famílias de voz. Os valores possíveis são 'masculino', 'feminino' e 'criança'.
specific-voice - Os valores são instâncias específicas (por exemplo, comediante, trinóides, carlos, lani).

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, male }
      p.part.romeo  { voice-family: romeo, male }
      p.part.juliet { voice-family: juliet, female }
   -->
</style>

A propriedade do volume

O volume refere-se ao volume médio da voz. Pode ter os seguintes valores -

numbers- Qualquer número entre '0' e '100'. '0' representa o nível mínimo de volume audível e 100 corresponde ao nível máximo de conforto.
percentage - Esses valores são calculados em relação ao valor herdado e, em seguida, são recortados no intervalo de '0' a '100'.
silent- Nenhum som. O valor '0' não significa o mesmo que 'silencioso'.
x-soft - O mesmo que '0'.
soft - O mesmo que '25'.
medium - O mesmo que '50'.
loud - O mesmo que '75'.
x-loud - O mesmo que '100'.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      P.goat  { volume: x-soft }
   -->
</style>

Parágrafos com classe goat será muito macio.

@media print {
   p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
   p.bodyText {font-size:10pt}
}

Se você estiver definindo sua folha de estilo em um arquivo separado, você também pode usar o atributo de mídia ao vincular a uma folha de estilo externa -

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">

CSS é fundamental para o futuro dos documentos da Web e será suportado pela maioria dos navegadores.
CSS é mais exato do que tabelas, permitindo que seu documento seja visualizado como você deseja, independentemente da janela do navegador.
Manter o controle de tabelas aninhadas pode ser uma verdadeira dor. As regras CSS tendem a ser bem organizadas, facilmente lidas e alteradas.

Finalmente, sugerimos que você use qualquer tecnologia que faça sentido para você e use o que você sabe ou o que apresenta seus documentos da melhor maneira.

CSS também fornece propriedade de layout de tabela para fazer suas tabelas carregarem muito mais rápido. A seguir está um exemplo -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

Você notará mais os benefícios em mesas grandes. Com o HTML tradicional, o navegador teve que calcular cada célula antes de finalmente renderizar a tabela. Quando você define o algoritmo de layout de tabela como fixo , no entanto, ele só precisa examinar a primeira linha antes de renderizar a tabela inteira. Isso significa que sua tabela precisará ter larguras de coluna e alturas de linha fixas.

Layout de coluna de amostra

Aqui estão as etapas para criar um layout de coluna simples usando CSS -

Defina a margem e o preenchimento do documento completo da seguinte forma -

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

Agora, vamos definir uma coluna com a cor amarela e depois, vamos anexar esta regra a um <div> -

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

Até este ponto, teremos um documento com corpo amarelo, então vamos agora definir outra divisão dentro do nível 0 -

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

Agora, vamos aninhar mais uma divisão dentro do nível 1, e vamos mudar apenas a cor de fundo -

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

Finalmente, usaremos a mesma técnica, aninhar uma divisão de nível 3 dentro de nível 2 para obter o layout visual da coluna certa -

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

Preencha o código-fonte da seguinte forma -

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

Da mesma forma, você pode adicionar uma barra de navegação superior ou uma barra de anúncios no topo da página.

Isso produzirá o seguinte resultado -

W3C CSS Validator (World Wide Web Consortium), este validador verifica seu css por upload de arquivo, entrada direta ou usando URI - uma página por vez. Este validador ajuda você a localizar todos os erros em seu CSS. O validador de verificação CSS WDG permite que você valide seu css por entrada direta, upload de arquivo e usando URI. Os erros serão listados por números de linha e coluna, se houver algum. Os erros geralmente vêm com links para explicar o motivo do erro.

Um validador CSS verifica suas folhas de estilo em cascata para certificar-se de que estão em conformidade com os padrões CSS definidos pelo Consórcio W3. Existem alguns validadores que também lhe dirão quais recursos CSS são suportados por quais navegadores (uma vez que nem todos os navegadores são iguais em sua implementação CSS).

Por que validar seu código HTML?

Existem vários motivos pelos quais você deve validar seu código. Mas os principais são -

Ajuda a compatibilidade entre navegadores, plataformas cruzadas e futuras.
Um site de boa qualidade aumenta a visibilidade do mecanismo de pesquisa.
Profissionalismo: Como desenvolvedor web, seu código não deve gerar erros enquanto é visto pelos visitantes.

CSS3 é a colaboração de especificações CSS2 e novas especificações, podemos chamar essa colaboração é module. Alguns dos módulos são mostrados abaixo -

Selectors
Box Model
Backgrounds
Valores de imagem e conteúdo substituído
Efeitos de texto
Transformações 2D
Transformações 3D
Animations
Layout de múltiplas colunas
Interface de usuário

A tabela a seguir mostra os valores possíveis para cantos arredondados da seguinte forma -

Sr. Não.	Valor e descrição
1	border-radius Use este elemento para definir quatro propriedades de raio de fronteira
2	border-top-left-radius Use este elemento para definir a borda do canto superior esquerdo
3	border-top-right-radius Use este elemento para definir a borda do canto superior direito
4	border-bottom-right-radius Use este elemento para definir a borda do canto inferior direito
5	border-bottom-left-radius Use este elemento para definir a borda do canto esquerdo inferior

Exemplo

Esta propriedade pode ter três valores. O exemplo a seguir usa ambos os valores -

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Cada propriedade Corner

Podemos especificar a propriedade de cada canto conforme o exemplo mostrado abaixo -

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
<body>

Isso produzirá o seguinte resultado -

Sr. Não.	Valor e descrição
1	border-image-source Usado para definir o caminho da imagem
2	border-image-slice Usado para cortar a imagem do pensionista
3	border-image-width Usado para definir a largura da imagem do bordo
4	border-image-repeat Usado para definir a imagem da fronteira como arredondada, repetida e esticada

Exemplo

A seguir está o exemplo que demonstra como definir a imagem como uma borda para os elementos.

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id = "borderimg1">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Os valores mais comumente usados são mostrados abaixo -

Sr. Não.	Valor e descrição
1	background Usado para definir todas as propriedades da imagem de fundo em uma seção
2	background-clip Usado para declarar a área de pintura do fundo
3	background-image Usado para especificar a imagem de fundo
4	background-origin Usado para especificar a posição das imagens de fundo
5	background-size Usado para especificar o tamanho das imagens de fundo

Exemplo

A seguir está o exemplo que demonstra as várias imagens de fundo.

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>www.tutorialspoint.com</h1>
         <p>
            Tutorials Point originated from the idea that there exists a class of 
            readers who respond better to online content and prefer to learn new 
            skills at their own pace from the comforts of their drawing rooms. 
            The journey commenced with a single tutorial on HTML in  2006 and elated 
            by the response it generated, we worked our way to adding fresh tutorials 
            to our repository which now proudly flaunts a wealth of tutorials and 
            allied articles on topics ranging from programming languages to web designing 
            to academics and much more..
         </p>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Tamanho do fundo múltiplo

A propriedade de vários planos de fundo é aceita para adicionar tamanhos diferentes para imagens diferentes. Um exemplo de sintaxe é mostrado abaixo -

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

Conforme mostrado acima, um exemplo, cada imagem tem tamanhos específicos como 50px, 130px e tamanho automático.

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}

HSL apoia hue, saturation, lightness.Aqui Enorme é um grau na roda de cores, saturação e luminosidade são valores percentuais entre 0 e 100%. Uma sintaxe de amostra de HSL conforme mostrado abaixo -

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

HSLA apoia hue, saturation, lightness and alpha. O valor alfa especifica a opacidade como mostrado RGBA. Um exemplo de sintaxe de HSLA conforme mostrado abaixo -

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

opacityé uma tinta mais fina que precisa da adição de preto para aumentar a opacidade. Um exemplo de sintaxe de opacidade é mostrado abaixo -

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

O exemplo a seguir mostra a propriedade de cor rgba.

<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>

   <body>
      <p>RGBA colors:</p>
      <p id = "p1">Red</p>
      <p id = "p2">Green</p>
      <p id = "p3">Blue</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir mostra a propriedade de cor HSL.

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>

   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir mostra a propriedade de cor HSLA.

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "d1">Less opacity green</p>
      <p id = "d2">Green</p>
      <p id = "d3">Green</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo a seguir mostra a propriedade Opacity.

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;} 
         #m2 {background-color:rgb(0,255,0);opacity:0.6;} 
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "m1">Red</p>
      <p id = "m2">Green</p>
      <p id = "m3">Blue</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Gradientes lineares

Gradientes lineares são usados para organizar duas ou mais cores em formatos lineares, como de cima para baixo.

De cima para baixo

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Da esquerda para direita

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Diagonal

Diagonal começa no botão superior esquerdo e direito.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Multicor

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>

   <body>
      <div id = "grad2"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Gradientes radiais CSS3

Gradientes radiais aparecem no centro.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

CSS3 Repetir Gradientes Radiais

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Sombra da caixa

Usado para adicionar efeitos de sombra aos elementos, a seguir está o exemplo para adicionar efeitos de sombra ao elemento.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Sr. Não.	Valor e descrição
1	text-align-last Usado para alinhar a última linha do texto
2	text-emphasis Usado para enfatizar o texto e a cor
3	text-overflow usado para determinar como o conteúdo transbordado que não é exibido é sinalizado para os usuários
4	word-break Usado para quebrar a linha com base na palavra
5	word-wrap Usado para quebrar a linha e passar para a próxima linha

Estouro de texto

A propriedade text-overflow determina como o conteúdo transbordado que não é exibido é sinalizado para os usuários. o exemplo de amostra de estouro de texto é mostrado a seguir -

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Quebra de palavras CSS3

Usado para quebrar a linha, o código a seguir mostra o código de exemplo de quebra de palavras.

<html>
   <head>
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
   </head>

   <body>
   
      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Quebra automática de palavras CSS

A quebra de linha é usada para quebrar a linha e quebrar na próxima linha. O código a seguir terá uma sintaxe de amostra -

p {
   word-wrap: break-word;
}

1	TrueType Fonts (TTF) TrueType é um padrão de fonte de contorno desenvolvido pela Apple e Microsoft no final dos anos 1980. Tornou-se as fontes mais comuns para sistemas operacionais Windows e MAC.
2	OpenType Fonts (OTF) OpenType é um formato para fontes de computador escalonáveis e desenvolvido pela Microsoft
3	The Web Open Font Format (WOFF) WOFF é usado para desenvolver página web e desenvolvido no ano de 2009. Agora ele está usando por recomendação W3C.
4	SVG Fonts/Shapes SVG permite fontes SVG na documentação SVG. Também podemos aplicar CSS a SVG com propriedade de face de fonte.
5	Embedded OpenType Fonts (EOT) EOT é usado para desenvolver as páginas da web e foi incorporado em páginas da web, portanto, não há necessidade de permitir fontes de terceiros

O código a seguir mostra o código de amostra da face da fonte -

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Descrição das fontes

A lista a seguir contém todas as descrições de fontes que são colocadas na regra @ font-face -

Sr. Não.	Valor e descrição
1	font-family Usado para definir o nome da fonte
2	src Usado para definir o URL
3	font-stretch Usado para localizar, como a fonte deve ser esticada
4	font-style Usado para definir o estilo das fontes
5	font-weight Usado para definir a espessura da fonte (negrito)

1	matrix(n,n,n,n,n,n) Usado para definir transformações de matriz com seis valores
2	translate(x,y) Usado para transformar o elemento junto com os eixos xey
3	translateX(n) Usado para transformar o elemento junto com o eixo x
4	translateY(n) Usado para transformar o elemento junto com o eixo y
5	scale(x,y) Usado para alterar a largura e altura do elemento
6	scaleX(n) Usado para alterar a largura do elemento
7	scaleY(n) Usado para alterar a altura do elemento
8	rotate(angle) Usado para girar o elemento com base em um ângulo
9	skewX(angle) Usado para definir as transformações de inclinação junto com o eixo x
10	skewY(angle) Usado para definir as transformações de inclinação junto com o eixo y

Os exemplos a seguir são mostrados a amostra de todas as propriedades acima.

Girar 20 graus

Rotação da caixa com ângulo de 20 graus conforme mostrado abaixo -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Girar -20 graus

Rotação da caixa com ângulo de -20 graus conforme mostrado abaixo -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Inclinar eixo X

Rotação da caixa com inclinação do eixo x conforme mostrado abaixo -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Eixo Y inclinado

Rotação da caixa com inclinação do eixo y conforme mostrado abaixo -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Transformação de matriz

A rotação da caixa com transformações de matriz conforme mostrado abaixo

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Matrix se transforma em outra direção.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

1	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Usado para transformar o elemento usando 16 valores de matriz
2	translate3d(x,y,z) Usado para transformar o elemento usando os eixos x, y e z
3	translateX(x) Usado para transformar o elemento usando o eixo x
4	translateY(y) Usado para transformar o elemento usando o eixo y
5	translateZ(z) Usado para transformar o elemento usando o eixo y
6	scaleX(x) Usado para dimensionar transforma o elemento usando o eixo x
7	scaleY(y) Usado para dimensionar transforma o elemento usando o eixo y
8	scaleY(y) Usado para transformar o elemento usando o eixo z
9	rotateX(angle) Usado para girar transforma o elemento usando o eixo x
10	rotateY(angle) Usado para girar transforma o elemento usando o eixo y
11	rotateZ(angle) Usado para girar transforma o elemento usando o eixo z

Transformações 3D do eixo X

O exemplo a seguir mostra as transformações 3D do eixo x.

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 
            
            /* Safari */
            transform: rotateX(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Transformações 3D do eixo Y

O exemplo a seguir mostra as transformações 3D do eixo y -

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Transformações 3D do eixo Z

O exemplo a seguir mostra as transformações 3D do eixo Z -

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo acima mostra a altura, largura, cor, nome e duração da animação com a sintaxe de quadros-chave.

Movendo a animação para a esquerda

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -

Movendo a animação para a esquerda com frames-chave

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      
      <p>This is an example of animation left with an extra keyframe 
         to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -

1	column-count Usado para contar o número de colunas que o elemento deve ser dividido.
2	column-fill Usado para decidir como preencher as colunas.
3	column-gap Usado para decidir a lacuna entre as colunas.
4	column-rule Usado para especificar o número de regras.
5	rule-color Usado para especificar a cor da regra da coluna.
6	rule-style Usado para especificar a regra de estilo para a coluna.
7	rule-width Usado para especificar a largura.
8	column-span Usado para especificar a extensão entre as colunas.

Exemplo

O exemplo abaixo mostra a organização do texto como uma nova estrutura do papel.

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class 
         of readers who respond better to online content and prefer to learn 
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated 
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Por suponha, se o usuário deseja fazer o texto como um novo papel sem linha, podemos fazer isso removendo a sintaxe de estilo conforme mostrado abaixo -

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

Isso produzirá o seguinte resultado -

1	appearance Usado para permitir que o usuário crie elementos como elementos da interface do usuário.
2	box-sizing Permite aos usuários fixar elementos na área de forma clara.
3	icon Usado para fornecer o ícone na área.
4	resize Usado para redimensionar elementos que estão na área.
5	outline-offset Usado para desenhar atrás do contorno.
6	nav-down Usado para mover para baixo quando você pressiona o botão de seta para baixo no teclado.
7	nav-left Usado para mover para a esquerda quando você pressiona o botão de seta para a esquerda no teclado.
8	nav-right Usado para mover para a direita quando você pressiona o botão de seta para a direita no teclado.
9	nav-up Usado para mover para cima quando você pressiona o botão de seta para cima no teclado.

Exemplo de propriedade de redimensionamento

A propriedade Resize tem três valores comuns, conforme mostrado abaixo -

horizontal
vertical
both

Uso de both valor na propriedade resize na interface do usuário css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Deslocamento de contorno CSS3

Linha externa significa desenhar uma linha ao redor do elemento fora da borda.

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

A imagem acima tem a mesma largura e altura de dois elementos, mas o resultado é diferente, porque o segundo elemento está incluído na propriedade de preenchimento.

Propriedade de dimensionamento da caixa CSS3

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

A amostra acima tem a mesma altura e largura com box-sizing:border-box. aqui o resultado é mostrado abaixo.

Isso produzirá o seguinte resultado -

Os elementos acima têm a mesma altura e largura com tamanho de caixa: caixa de borda, então o resultado é sempre o mesmo para ambos os elementos, conforme mostrado acima.

<html>
   <head>
      <style>
         body {
            font: 600 14px/24px "Open Sans", 
               "HelveticaNeue-Light", 
               "Helvetica Neue Light", 
               "Helvetica Neue", 
               Helvetica, Arial, 
               "Lucida Grande", 
               Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   </head>
   
   <body>
   
      <h1>100% Wide Container</h1>
      
      <div class = "container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>75% Wide Container</h1>
      
      <div class = "container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>50% Wide Container</h1>
      
      <div class = "container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Consultas de mídia

As consultas de mídia são para regras de estilo diferentes para dispositivos de diferentes tamanhos, como celulares, desktops, etc.

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>

   <body>
      <p>
         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Web design responsivo de bootstrap

Bootstrap é a estrutura de design web mais popular baseada em HTML, CSS e Java script e ajuda você a projetar páginas da web de forma responsiva para todos os dispositivos.

<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body {
            color:green;
         }
      </style>
   </head>

   <body>
   
      <div class = "container">
      
         <div class = "jumbotron">
            <h1>Tutorials point</h1> 
            <p>
               Tutorials Point originated from the idea that there exists a class 
               of readers who respond better to online content and prefer to learn 
               new skills at their own pace from the comforts of their drawing rooms.
            </p> 
         </div>
      
         <div class = "row">
            <div class = "col-md-4">
               <h2>Android</h2>
               <p>
                  Android is an open source and Linux-based operating system for mobile 
                  devices such as smartphones and tablet computers. Android was developed 
                  by the Open Handset Alliance, led by Google, and other companies.
               </p>
         </div>
         
         <div class = "col-md-4">
            <h2>CSS</h2>
            <p>
               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            </p>
         </div>
      
         <div class = "col-md-4">
            <h2>Java</h2>
            <p>
               Java is a high-level programming language originally developed by Sun 
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.
            </p>
         </div>
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -