Agora sim é a parte do css, vamos agora colocar os atributos no elemento que colocamos a div e class.
Para fazer isso, primeiro temos que inserir o css na página html e existe duas formas de fazer isso
primeiro é escrevendo o código css dentro da tag "<head>" do html, usando a tag "<style>", assim:
<head>
<style>
--Codigo css--
</style>
</head>
e a outra é importando o arquivo .css dentro do head usando o a tag "<link>", com atributos "rel", "type" e "href"
A tag "<link>" serve para linkar um arquivo no html.
O atributo "rel" especifica a relação entre arquivo html para o arquivo linkado, no caso vai ser "stylesheet".
O "type" especifica o tipo do documento que tá linkando, no caso o tipo é "text/css".
E href é o local onde está o arquivo que vai ser linkado, no caso vai ser o arquivo css.
</head>
<link rel="stylesheet" type="text/css" href="arquivo.css" />
</head>
No caso vamos fazer da segunda opção para ficar mais bonito o código
Então vai ficar assim:
Agora, você vai criar um arquivo .css, no Notepad++, vá em file > New
vai abrir uma nova aba, onde você vai colocar o estilo nos campos
Primeiro vamos entender como funciona o css, primeiro você colocar o elemento ou classe ou a id que do elemento que você quer atribuir o estilo, no caso vai ser 2 classes e duas ids e colocar os atributos entre as chaves({})
elemento
{
atributos
}
Quando você quer manipular todos os elementos que a mesma tag, você só precisa colocar o nome do elemento
div
{
atributos
}
Quando você quer manipular um elemento com atributo "class", você coloca o nome da "tag"+ nome que você colocou na classe ou coloca só um .nome que você colocou na classe
div.MinhaClasse
{
atributos
}
ou
.MinhaClasse
{
atributos
}
E quando quer manipular o elemento com atributo id, você só precisa colocar "#" antes do nome que você colocou a id
#MinhaID
{
atributos
}
Dito isso, então vamos manipular as duas classes que colocamos nos inputs tanto os campos e tanto no botão
Primeiro você vai colocar o nome da classe ".inputField", que foi o nome dos campos de login, senha e email. E o ".inputButton" para manipular o botão
.inputField
{
display:block;
margin-top:8px;
margin-left:1px;
width:98%;
height:40px;
}
.inputButton
{
display:block;
margin-top:18px;
width:100%;
height:50px;
}
O atributo display:block; serve para criar um bloco, margin-top serve para manipular o elemento para cima ou para baixo, margin-left serve para manipular o elemento para o lado esquerdo ou direito, width serve para especificar a largura do elemento e height serve para especificar a altura do elemento.
Depois você vai manipular as 2 ids que são as duas divs, primeiro que é register form e outro vai ser para colocar um titulo do formulário
#registerForm
{
width:500px;
height:280px;
margin-left:30%;
background-color:#000022;
}
#formTitle
{
width:100%;
height:50px;
background-color:#0000ff;
text-align: center;
font-size:30px;
padding-top: 10px;
}
O atributo "background-color" coloca a cor no elemento, com "#" no inicio e o valor em hexadecimal, quer dizer que ele vai de 00 até FF e é parecido com rgb, ou seja (Red:00 - Green:00 - Blue: 22), você pode colocar o nome da cor ali também, "text-align: center;" vai alinhar o qualquer texto que estiver no elemento para o centro, "font-size:30px;" vai colocar o tamanho da fonte para 30px, "padding-top: 10px;" cria um espaço entre o conteúdo e a borda
Depois é só salvar o arquivo e colocar .css no final
linkar "<link rel="stylesheet" type="text/css" href="arquivo.css" />" no html
e escrever "Faça seu cadastro" na div no "formTitle"
<div id="formTitle">Faça seu cadastro</div>
pronto você acabou de fazer a parte 2, você acabou de colocar estilo no html
deu certinho aqui poque
ResponderExcluir