3

estoy estudiando de manera autodidacta html y css y he visto por muchos lugares y foros que es una buena practica poner html solo lo que sea texto y en css lo que este relacionado a los estilos. Mi duda surge al incluir en mi html un mapa de google maps. Al tratar de centrarlo he intentado de todo y lo único que me funcionó fue esto, pero me parece que no es una buena practica y quisiera saber si es que debo seguir buscando otra manera

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <style>
    #ubication_user{
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <iframe id="ubication_user"src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12582.929266252795!2d-57.54196415!3d-37.9600358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2sar!4v1609132929089!5m2!1ses!2sar" ></iframe>
  </body>
</html>
5
  • 1
    La pregunta es basada en opiniones y eso generaría su cierre, por otro lado yo por ejemplo te recomendaría crea una hoja de estilos por separado coloca ahi tu css y después solo invocala
    – user128299
    Commented el 28 dic. 2020 a las 6:14
  • Por otra parte, si de buenas prácticas se trata, recomendaría reservar los atributos id para JavaScript y de preferencia usar las clases para el estilo. De esta manera, si mañana decidieras incluir otros <iframe> con los mismos estilos, te ahorrarías trabajo. Commented el 28 dic. 2020 a las 6:39
  • Mientras mas grande sea el proyecto mejor organizado debería de estar para que tu o tu equipo puedan acceder y entender todo el código, por ahí va la programación orientada a objetos que se suele usar para organizarlo.
    – Ange Reyna
    Commented el 28 dic. 2020 a las 6:56
  • Como te han dicho, esto son opiniones. Por ej, yo tengo la mía: es muy buena si te dedicas a desarrollo de electrónica y quieres que tu sistema tenga una miniweb para administrar, pero solo puedes usar un archivo para almacenar la página. En ese caso, el CSS debe estar todo incrustado en el archivo html. Si te orientas a programación web, lo correcto se puede considerar el separarlo en casa y html...
    – Jakala
    Commented el 28 dic. 2020 a las 10:56
  • Te recomendaría crear un css aparte e relacionarlo con tu html. De esta manera te funcionará mejor y te cogerá bien las características añadidas en el css.
    – painmad
    Commented el 28 dic. 2020 a las 12:21

1 respuesta 1

2

Hay varias formas de usar css. Te cito las más usadas:

  • Importando un archivo css

    <link rel="stylesheet" href="assets/css/theme.css" />
    
  • En la etiqueta <head>

    <head>
        <style>
            body {margin:0}
        <style>
    </head>
    
  • Directamente en el elemento deseado

    <p style="color:red">Texto rojo<p>
    

La forma más usada o el standard con el que se suele usar css es la primera opción que consiente tener un código más ordenado y legible y debido a esto también cabe destacar que muchas personas y empresas consideran que incluir estilos dentro de la página html sea poco profesional.

"Al tratar de centrarlo he intentado de todo y lo único que me funcionó fue esto"

A veces puede pasar que un estilo sobrescriba a otro, por ejemplo si se coloca un estilo en el head y otro en el elemento este último sobrescribirá al primero como se puede apreciar en el siguiente ejemplo en el cual el texto será de color rojo:

<html>
  <head>
    <style>
      .texto {color:black} 
    </style>
  </head>
  <body>
    <p class="texto" style="color:red">Texto</p>
  </body>
</html>

Aún así esta regla cuenta con una excepción. En caso de que sea necesario inferir una propiedad a un elemento o etiqueta que podría llegar a ser sobrescrita más adelante podemos declarar que esta propiedad es importante y que no deseamos que sea sobrescrita, esto se hace utilizando !important. De manera que si lo usamos dentro del <style> del ejemplo anterior el texto ahora sería de color negro como podemos apreciar a continuación:

    <html>
      <head>
        <style>
          .texto {color:black !important} 
        </style>
      </head>
      <body>
        <p class="texto" style="color:red">Texto</p>
      </body>
    </html>

En conclusión: Si pones todo el estilo en un archivo css y alguna propiedad parece no tener efecto, puedes añadir !important para solucionarlo. Aunque tampoco es una buena práctica añadir !important en todo en caso de que más adelante sea necesario cambiar una propiedad y también para no aumentar innecesariamente tamaño del css.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.