Hola, necesito ayuda con HTML!

Español HTML-CSS
1

resulta que estoy haciendo el primer trabajo oficial que pide realizar una encuesta , la verdad lo vengo trabajando bien teniendo en cuenta que soy muy nuevo, ahora mi duda es como hago para juntar el circulito a las palabras? por que queda feo el radio digamos,
image

y mi segunda pregunta es , yo para cambiar alguna propiedad tengo que usar
label { pero esto me utiliza todos los labels que use, como podria hacer de un label en especifico sin modificar todos?
Muhcas gracias !

2

Tienes tu codigo para para ver lo de los radio button?

No entiendo tu segunda pregunta ,te refieres a que quieres modificar un label especifico, pero se modifican todos?

<p class="parrafo">
<<p class="parrafo  recomendaciones">>

Aqui hay 2 elementos <p > conla clase “parrafo” si en css intento modificar la clase “parrafo” se modifican los dos, asi que al segundo le añadi una clase extra “recomendaciones” para poder modificar solo ese parrafo ese parrafo.

3

hola francisco, gracias por tomarte el tiempo. te dejo el codigo (se que es medio desastre) a ver si puedo resolver lo del circulito para que quede alineado

<html>
  <form id="survey-form">
  <meta charset="utf-8" />
  <style>
    fieldset{

  border-bottom: 3px solid #3b3b4f;
}
      
    }
  </style>
  <style>
   label, input, select , textarea{
width: 100%;
margin-top: 10px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
    }
  <style>
    form {     
    } 
    body {
      background-image: url(https://debmedia.com/blog/wp-content/uploads/2020/04/Encuestas-de-Satisfacci%C3%B3n.jpg)
    }
    </style>
    <header> 
  <link rel="stylesheet" href="styles.css">
  <h1 id="title"/>
  <style>
    h1 {   
font-family: Courier New;
margin: 1em auto;
text-align: center;
font-size: 35px;
    }
    p {
      font-family: Tahoma;
      text-align: center;
      margin: 1em auto;
      font-size: 19px;
    }
    </style>
  freeCodeCamp Survey Form</h1>
  <p id="description"/>
  Thank you for taking the time to help us improve the platform
  <fieldset>
  <style>
    label {
    display: block;
    </style>
    
<p>Personal information</p>
  <label id="name-label">name
  <input id="name" required placeholder="Enter your name" type="text" </label>
  <label id="email-label">email
  <input id="email" required placeholder="Enter your email" type="email"  </label>
  <label id="number-label">number
  <input id="number" required placeholder="Enter your number" type="number" min="1" max="100" </label></p>
  </fieldset>
  <fieldset>
  <p>Which option best describes your current role?</p>
  <select id="dropdown">
  <option value="value1">Student</option>
  <option value="value2">Full Time Job</option>
  </select>
  </fieldset>
  <fieldset>
  <p>Would you recommend freeCodeCamp to a friend?</p>
  <label> Definitely <input type="radio" id="radio1" name="encuesta" value="radio"></label>
  <label> Not Sure<input type="radio" id="radio2" name="encuesta" value="radio"></label>
  </fieldset>
  <fieldset> <p>What would you like to see improved? (Check all that apply)</p>
  <label> Front-end Projects </label> <input type="checkbox" value="checkbox1">
  <label> City Meetups</label> <input type="checkbox" value="checkbox2"> </fieldset>
  <p>Any comments or suggestions?</p>
  <textarea rows="3" placeholder="Enter your comments" cols="30"></textarea>
  </fieldset>
  <input id="submit" type="submit">
    </form>

en cuanto al otro tema, si yo tengo 2 p y quiero modificar el style de 1 sola, como haria?
si al momento de usar <style y luego la letra p , me modificaria todas las p

4

Hola @javierfugnitto1 ,

En primer lugar, le aconsejaría que use siempre los estilos en un archivo separado, ya que es confuso cuando ambos están en el mismo archivo.

Luego, para resolver lo del circulito, puede darle a ambos botones de radio alguna clase, por ejemplo, inline, y darles un ancho de unset. Esto eliminará la regla anterior que establece todos los elementos de entrada en ancho: 100%.

.inline {
   width: unset;
}

Como lo hiciste en este paso:

O puede usar un selector de atributos, que selecciona un elemento en funciĂłn del valor de atributo dado :

input[type="radio"] {
   width: unset;
}

Como lo hiciste en este paso:

Espero que esto ayude!

1 Like