Como criar um banner com código CSS

Um banner com folhas de estilo em cascata (CSS) é um cabeçalho feito de estilos CSS em vez de uma imagem digital inserida na sua página. O banner geralmente mostra o título e o slogan do seu site e, com CSS, não apenas esse texto é estilizado, mas você também pode criar e formatar a caixa que contém o texto. Use o editor de texto do seu computador para inserir o código CSS e criar um banner na página desejada.

Passo 1

Abra o documento da sua página da web no seu editor de texto. Coloque o cursor antes da tag de fechamento e digite o seguinte código CSS:

Etapa 2

Digite “#banner {}” entre os elementos de estilo para criar uma regra para criar seu banner. Digite “height :;” e “width :;” e escreva o valor em pixels (px) após cada um para especificar as medidas que você preferir. Por exemplo:

banner {altura: 350 px; largura: 600px; }

Etapa 3

Digite “tamanho da fonte :;” e “família de fontes :;” para criar os atributos para formatar o texto do seu cabeçalho. Digite um valor em pixels após o tamanho da fonte e digite dois ou três nomes após a família de fontes para especificar o tipo de escrita de sua preferência. Por exemplo:

banner {tamanho da fonte: 32 px; família de fontes: “Times New Roman”, Georgia, Serif; }

Etapa 4

Digite “estilo de borda :;” e escreva um valor de tamanho de pixel, um estilo de linha e um valor de cor hexadecimal para criar a borda do seu banner. Em seguida, escreva “background-color :;” E o valor da cor que você deseja. Por exemplo:

banner {estilo da borda: 4px pontilhado # f0f0f0; }

Etapa 5

Digite “padding :;” e um valor em pixels para especificar a quantidade de espaço entre o conteúdo e a borda do banner. O código CSS completo deve se parecer com este exemplo:

banner {

altura: 350px; largura: 600px; tamanho da fonte: 32px; família de fontes: “Times New Roman”, Georgia, Serif; estilo de borda: 4px pontilhado # f0f0f0; preenchimento: 15px; }

Etapa 6

Escreve “

“em qualquer lugar dentro da tag em que você deseja que o cabeçalho apareça. Digite o texto do seu banner, como o título do seu site entre as tags div, desta forma:

Digite o texto do seu banner aqui.

Etapa 7

Salve seu documento

Referências

 

Você pode estar interessado:

Deixe um comentário