Como criar um Simple CSS Stylesheet usando o bloco de notas

ThiTeaches você como usar o aplicativo Windows `NotEpad para armazenar informações para uma página da Web escrita em HTML e CSS. HTML é a linguagem de programação usada para criar sua página web, enquanto o CSS é o idioma que determina a cor, fonte e assim por diante dos elementos HTML na página da Web.

Passos

Parte 1 de 3:

Criando uma página HTML

1. Notepad aberto. Abrir Começar

, digitar bloco de anotações, e clique no azul Bloco de anotações App no topo da janela inicial.

Criar um Simple CSS Stylesheet usando o bloco de notas 2

2. Indique o tipo de documento. Modelo no bloco de notas e pressione ↵ ENTER para iniciar uma nova linha.

Imagem intitulada Criar um Simple CSS Stylesheet usando o bloco de notas Passo 3

3. Adicione a tag HTML. Digite e pressione ↵ Enter.

Criar um Simple CSS Stylesheet usando o bloco de notas 4

4. Digite a tag do corpo. Digite e pressione ↵ Enter. Agora você pode começar a inserir as informações da sua página da web.

Criar um Simple CSS Stylesheet usando o bloco de notas 5

5. Adicione um cabeçalho. Digitar TEXTO, Certificando-se de substituir "TEXTO" com o seu cabeçalho de página preferido e pressione ↵ Enter.

Por exemplo, para criar um cabeçalho de página que diz "Receber!", você digitaria Receber! no bloco de notas.

Criar um Simple CSS Stylesheet usando o bloco de notas 6

6. Adicione o texto abaixo do cabeçalho. Digitar TEXTO, Certificando-se de substituir "TEXTO" Com sua mensagem preferida e pressione ↵ Enter.

Por exemplo, para adicionar texto que diz "Eu sou uma iguana", você entrava Eu sou uma iguana no bloco de notas.

Criar um Simple CSS Stylesheet usando o bloco de notas 7

7. Adicione mais cabeçalhos e parágrafos. Cada cabeçalho e parágrafo subseqüente deve ter um número ascendente aplicado a ele - por exemplo, seu segundo cabeçalho terá tags ao redor, e o segundo parágrafo terá tags.

Certifique-se de que você continue a pressionar ↵ Enter após cada linha de código.

Criar um Simple CSS Stylesheet usando o bloco de notas 8

8. Feche o corpo e tags html. Depois de inserir sua última linha de código, digite em sua própria linha e pressione ↵ Enter e digite em . Seu documento agora está pronto para ser estilizado com CSS.

Parte 2 de 3:

Adicionando CSS

1. Entender como o CSS funciona. Você usa CSS para alterar a aparência de um elemento HTML (E.G., um parágrafo). CSS é normalmente escrito no seguinte formato de linha por linha:

tag de elemento { (por exemplo, p {)
Modificador: Propriedade- (por exemplo, Tamanho da fonte: 20px-)
Modificador: Propriedade- (por exemplo, cor preta-)
}

Criar um Simple CSS Stylesheet usando o bloco de notas 10

2. Coloque um espaço entre o e tags. Estes devem estar perto do topo da página.

Criar um Simple CSS Stylesheet usando o bloco de notas 11

3. Digite uma tag de cabeça. Digite e pressione ↵ Enter.

Criar um Simple CSS Stylesheet usando o bloco de notas Etapa 12

4. Adicione uma tag de estilo. Digite e pressione ↵ Enter.

Criar um Simple CSS Stylesheet usando o bloco de notas 13

5. Altere a cor de fundo da sua página da web. Para fazer isso:

Digitar corpo { e pressione ↵ Enter.

Digitar fundo-cor: lightblue- e pressione ↵ Enter.

Você pode usar qualquer cor suportada aqui, bem como "luz" ou "Sombrio" modificadores.

Digite} e pressione ↵ Enter.

Criar um Simple CSS Stylesheet usando o bloco de notas 14

6. Estilo seu primeiro cabeçalho. Digitar h1 { e pressione ↵ ENTER, adicione um modificador e pressione ↵ ENTER e digite} e pressione ↵ ENTER. Você pode adicionar vários modificadores a um elemento, desde que cada modificador esteja em sua própria linha. Os modificadores comuns incluem o seguinte:

Tamanho do texto - Digitar Tamanho da fonte: 30px- Para definir seu texto como fonte de 30 pontos. Substitua qualquer número que você deseja usar.

Cor do texto - Digitar cor preta- Para fazer texto preto. Substitua qualquer cor que você deseja usar.

Alinhamento de texto - Digitar Alinhamento de texto: centro- Para centrar o texto. Você também pode digitar deixou ou direito Para alinhar o texto apropriadamente.

Fonte usada - Digitar Fonte-família: Times New Roman- Para definir sua fonte como Times New Roman. Você também pode usar fontes como Verdana ou Geórgia.

Criar um Simple CSS Stylesheet usando o bloco de notas 15

7. Estilo seu primeiro parágrafo. Digitar p1 { e pressione ↵ ENTER, adicione um modificador e pressione ↵ ENTER e digite} e pressione ↵ ENTER.

Os modificadores que você pode usar aqui são idênticos aos usados para o cabeçalho.

Criar um Simple CSS Stylesheet usando o Notepad Step 16

8. Estilo o resto do seu documento. Você pode estilizar qualquer elemento referenciando seu texto de tag e colocando um suporte encaracolado aberto ({), adicionando modificadores e, em seguida, fechando o suporte (}).

Criar um Simple CSS Stylesheet usando o Notepad Step 17

9. Feche o estilo e tags de cabeça. Em uma nova linha abaixo do seu último texto, digite e pressione ↵ Enter e digite e pressione ↵ ENTER. Sua folha CSS está concluída, o que significa que agora você pode revisar e salvá-lo.

Parte 3 de 3:

Salvando o documento

1. Revise sua folha de estilo CSS. Seu documento CSS varia ligeiramente, mas deve parecer algo assim:

corpo {
fundo-cor: lightblue-
}
h1 {
Tamanho da fonte: 45px-
}
p1 {
cor preta-
}
Oi!
Eu sou uma iguana

Criar um Simple CSS Stylesheet usando o Notepad Step 19

2. Clique Arquivo. Está no canto superior esquerdo da janela do bloco de notas. Um menu suspenso aparecerá.

Criar um Simple CSS Stylesheet usando o Notepad Step 20

3. Clique Salvar como…. Você verá isso perto da parte inferior do menu suspenso. Clicar nele solicita uma janela para abrir.

Criar um Simple CSS Stylesheet usando o bloco de notas 21

4. Selecione um local de economia. Clique em uma pasta (E.G., Área de Trabalho) no lado esquerdo da janela.

Criar um Simple CSS Stylesheet usando o bloco de notas 22

5. Clique no "Salvar como tipo" caixa suspensa. Um menu suspenso aparecerá.

Imagem intitulada Criar um Simple CSS Stylesheet usando o bloco de notas 23

6. Clique Todos os arquivos. Está no menu suspenso.

Imagem intitulada Criar um Simple CSS Stylesheet usando o bloco de notas 24

7. Nomeie seu arquivo com um ".html" extensão. No "Nome do arquivo" Campo de texto, digite seu nome de documento preferido (E.G., "Meu CSS") seguido pela .html.

Por exemplo, se você nomeou seu arquivo "Meu CSS", você digita Meu CSS.html no campo.

Se você usar um programa que possa ser executado ".css" Arquivos, você pode usar .css em vez de .html aqui.

Criar um Simple CSS Stylesheet usando o bloco de notas

8. Clique Salve . Está no lado inferior direito do "Salvar como" janela. Isso salvará sua folha CSS em um formato executável, o que significa que você pode abri-lo em seu navegador preferido ou editor HTML, em vez de no bloco de notas.

Pontas

Ao codificar em HTML ou CSS, ele realmente não importa quantos espaços são entre linhas de código - você pode pressionar ↵ Digite várias vezes após cada linha sem alterar a função do programa.

Tente recuar partes diferentes do seu estilo CSS para facilitar a descoberta de elementos. Por exemplo, você pode recuar o código de cabeçalho uma vez e o código do parágrafo duas vezes.