Agregar CSS a tu HTML

Existen diferentes formas de agregar reglas de CSS a nuestras páginas, y una de ellas es incluir las reglas en el mismo documento:
<style type="text/css">
 .boton{
  color: white;
  border: 2px solid #879aa8;
  background: #434d54;
 }
</style>

Todo lo anterior debe ir dentro del encabezado, es decir, dentro de las etiquetas head, de esta forma:
<html>
 <head>
  <title>El titulo</title>
  <style type="text/css">
   .boton{
    color: white;
    border: 2px solid #879aa8;
    background: #434d54;
   }
  </style>
 </head>
<body>
</body>
</html>

Ahora para aplicar esa regla a uno o varios elementos HTML, utilizaremos la palabra reservada class, la cual tendrá como argumento el nombre de la clase que en nuestro caso es boton (sin el punto inicial). De esta forma, nuestro código quedaría mas o menos así:

<html>
 <head>
  <title>El titulo</title>
  <style type="text/css">
   .boton{
    color: white;
    border: 2px solid #879aa8;
    background: #434d54;
   }
  </style>
 </head>
<body>
<input type="button" value="PUSH" class="boton" />
</body>
</html>

Otra manera es agregando las reglas CSS en un archivo (.css) y enlazarlo con la siguiente linea de código:
<link rel="stylesheet" href="URL" type="text/css" media="screen" />

No hay comentarios:

Publicar un comentario en la entrada