input

hur ändrar man utseende och storlek på input rutorna?

Det gör du med CSS:
https://www.w3schools.com/css/default.asp

jag hitta fan inget där!

Konstigt att du inte hittar något på den sidan eftersom den innehåller all CSS-kod som ingår i CSS-standarden. :q

input.ruta{
	font-family: Verdana, Tahoma, Sans-Serif;
	font-size: 10px;
	color: #333;
	background: #FFF;
	border-left: 1px solid #888;
	border-top: 1px solid #888;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
	width: 90px;
}

<input type="text" class="ruta">

input.ruta{
font-family: Verdana, Tahoma, Sans-Serif;
font-size: 10px;
color: #333;
background: #FFF;
border-left: 1px solid #888;
border-top: 1px solid #888;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
width: 90px;
}

<input type="text" class="ruta">

fuknar inte i textarea. varför?

För att det inte är ett <input>-element.

Enkelt och grejt. Ta bort input. om du vill att klassen ska kunna appliceras på fler element.

Så här kan du också göra:

input.ruta, textarea.ruta{ 
 font-family: Verdana, Tahoma, Sans-Serif; 
 font-size: 10px; 
 color: #333; 
 background: #FFF; 
 border-left: 1px solid #888; 
 border-top: 1px solid #888; 
 border-right: 1px solid #888; 
 border-bottom: 1px solid #888; 
 width: 90px; 
}