ricardojob/estilo.css

## estilo.css
.estilo {
    border: 2px solid;
    color: blue;
    border-radius: 15px;
    padding: 100px;
}

.campo {
    padding: 0px;
    color: red;
}

#rodape{
    background-color: #009999;
    border: 2px solid;
    border-radius: 15px;
    padding: 100px;
}
#central {
    width: 120px;
    margin: 0 auto;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}

/* Set gray background color and 100% height */
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
}

/* Set black background color, white text and some padding */
footer {
    background-color: #555;
    color: white;
    padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height:auto;}
}

## exemplo.html
<html>
    <head>
            <link href="./resources/css/estilo.css" rel="stylesheet" type="text/css"/>
            <link href="./resources/css/style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            function somar() {
                var primeiro = document.getElementById("primeiro").value;
                var segundo = document.getElementById("segundo").value;
                var soma = parseInt(primeiro) + parseInt(segundo);
                document.getElementById("resultado").value =soma
            }
        </script>
    </head>
    <body>
        <input id="primeiro" type="number" class="estilo"/>
        <input id="segundo" type="number" class="campo"/>
        <input id="botao" type="button" value="+" onclick="somar()"/>
        <input id="resultado" type="text"/>
    </body>
</html>
	.estilo {
	border: 2px solid;
	color: blue;
	border-radius: 15px;
	padding: 100px;
	}

	.campo {
	padding: 0px;
	color: red;
	}

	#rodape{
	background-color: #009999;
	border: 2px solid;
	border-radius: 15px;
	padding: 100px;
	}
	#central {
	width: 120px;
	margin: 0 auto;
	}
	/* Remove the navbar's default margin-bottom and rounded borders */
	.navbar {
	margin-bottom: 0;
	border-radius: 0;
	}

	/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
	.row.content {height: 450px}

	/* Set gray background color and 100% height */
	.sidenav {
	padding-top: 20px;
	background-color: #f1f1f1;
	height: 100%;
	}

	/* Set black background color, white text and some padding */
	footer {
	background-color: #555;
	color: white;
	padding: 15px;
	}

	/* On small screens, set height to 'auto' for sidenav and grid */
	@media screen and (max-width: 767px) {
	.sidenav {
	height: auto;
	padding: 15px;
	}
	.row.content {height:auto;}
	}
	<html>
	<head>
	<link href="./resources/css/estilo.css" rel="stylesheet" type="text/css"/>
	<link href="./resources/css/style.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript">
	function somar() {
	var primeiro = document.getElementById("primeiro").value;
	var segundo = document.getElementById("segundo").value;
	var soma = parseInt(primeiro) + parseInt(segundo);
	document.getElementById("resultado").value =soma
	}
	</script>
	</head>
	<body>
	<input id="primeiro" type="number" class="estilo"/>
	<input id="segundo" type="number" class="campo"/>
	<input id="botao" type="button" value="+" onclick="somar()"/>
	<input id="resultado" type="text"/>
	</body>
	</html>