ej3-anadir-estilos.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test jquery</title>
  <style>
  div {
    color: #fff;
    padding: 10px;
    width: 190px;
    text-align: center;
    background-color: #333;
  }
  .estilohover {
    background-color: green;
  }
  .grande{
    font-size: 2em;
  }
  </style>
</head>
<body>
  <h1>Añadir estilos</h1>
  <p>
    Esto es un párrafo
  </p>

  <button id="brojo">Poner en Rojo</button> <button id="bverde">Poner en verde con fondo amarillo</button> <button id="baumentar">Aumentar la fuente</button>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#brojo').click(function() {
        $('p').css('color', 'red');
      });
      $('#bverde').click(function() {
        $('p').css({
          'color': 'green',
          'background-color': 'yellow'
        });
      });
      $('#baumentar').click(function() {
        console.log($('p').css('font-size'));
        var fuente = parseInt($('p').css('font-size'));
        fuente += 1;
        $('p').css('font-size', fuente + 'px');
      });
    });
  </script>
</body>
</html>