Style sheet css does not work

0

Hi, I have a problem with the css style sheet that having boostrap the changes I put in the css sheet does not do anything.

<head>
  <title>Pruebas Javascript</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script language="JavaScript" src="funciones.js"></script>
  <LINK REL="stylesheet" TYPE="text/css" href="estilos.css">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">

</head>

<body>

  <div align="center">
    <h1>Formulario</h1>
    <form class="form-horizontal">
      Escribe tu <label>nombre </label> <input id="nombre" type="text" name="nombre" required> <br><br> Escribe tus <label>apellidos </label> <input id="apellidos" type="text" name="apellidos" required><br><br> Escribe tu <label>edad </label><input id="edad"
        type="text" name="edad" required><br><br>
      <label>Sexo</label><br> Masculino <input type="radio" name="sexo" value="Masculino"> Femenino <input type="radio" name="sexo" value="Femenino"><br><br>

      <div name="aficiones">
        <input type="checkbox" name="aficion" value="1"> Tenis <br>
        <input type="checkbox" name="aficion" value="2"> Futbol <br>
        <input type="checkbox" name="aficion" value="3"> Baloncesto <br>
        <input type="checkbox" name="aficion" value="4"> Motociclismo
      </div>
      <input type="submit" id="boton" name="boton" value='Aceptar' class="btn btn-primary" onclick="mostrar()">
    </form>
  </div>

</body>
    
asked by Ruben 19.07.2017 в 09:34
source

2 answers

3

I tell you what I usually do:

Bootstrap tends to eat your own styles, so do not try to style html elements ( <h1><div> ...) or bootstrap classes themselves, unless you want to modify all <h1> and give them another style . For this, enter your style sheet bootstrap.css and edit the property that modifies the.

(Viewing your code, you are using bootstrap from bootstrapcdn.com - Download bootstrap and upload it to your site to be able to edit it to your liking)

Add your own classes in the element to be modified and, if necessary, enter the !important in front of it.

All this try it before in the browser style editor that you use to know which bootstrap property is crushing yours.

    
answered by 19.07.2017 в 12:29
0

You could give relevance or authority to your style sheet that you want as "main" by placing:

<head>
  <title>Pruebas Javascript</title>
  (Primero la hoja con relevancia)<LINK REL="stylesheet" TYPE="text/css" href="estilos.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script language="JavaScript" src="funciones.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">

</head>

Or generate a bootstrap style sheet link

    
answered by 24.07.2017 в 08:08