Sistema de cadastro parte 2(1/2) - Colocando Div, id, class

 No post anterior aprendemos a fazer um formulário em html, se não viu, aqui o link:

https://coderprice.blogspot.com/2021/08/sistema-de-cadastro-parte-1-criando-um.html

Agora vamos melhorar o design do formulário usando CSS, é nele que vamos centralizar o formulário, colocar cor, aumentar a fonte e entre outras formas de melhorar ele.

Antes de ir para o css, primeiro vamos criar umas coisinhas no html, primeiro vamos colocar uma tag "<div>" encima do formulário, div serve para agrupar elementos para colocar estilo e vamos colocar o atributo chamado "id", o atributo "id" é um nome que você coloca em um elemento e serve para o css achar o elemento que você quer editar, você pode colocar qualquer nome, mas irei colocar o nome da id vai ser "registerForm"

<div id="registerForm">

e vou criar outra div dentro da div "registerForm", com a id "formTitle", assim:

<div id="formTitle"></div>

E depois você vai adicionar um atributo chamado "class" nos inputs com o nome "inputField", o atributo "class" é parecido com "id", só que class você pode colocar o mesmo nome em vários objetos

*Por exemplo: eu quero criar 3 "<marquee>" e quero colocar a cor dos 3 de vermelho, você usa a class e não id

<input class="inputField" type="text" placeholder="Digite o seu login">

<input class="inputField" type="password" placeholder="Digite o sua senha">

<input class="inputField" type="email" placeholder="Digite seu email">

e no botão vou colocar o atributo "class" chamado "inputButton"

<input class="inputButton" type="submit" value="Criar conta">

Vai ficar assim:

E vamos salvar e pronto, você acabou de fazer 50% da segunda parte e no próximo vamos colocar vamos colocar os atributos nos elementos e colocar o design na página