0

Estoy haciendo una página sencilla con una API de newsApi. Aplico estilos de bootstrap cuyos archivos están descargado y posteriormente aplico mis propios estilos, pero no veo ningun cambio.Especificamente intento cambiar el flex direction column que da la clase card por el flex direction row que daría la clase article. En teoría con colocar el link stylesheet de la hoja propia después del de bootstrap ya debería darle preferencia, pero aún asi no funciona.

Código del html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="/ccss/a.css">
    <title>Document</title>
</head>
<body>
    <div id="news">
        
    </div>
    
</body>
<script src="a.js"></script>

</html> 

Código del css:

.article{
    display: flex;
    flex-direction: row;
    margin-top: 100px;
}


.article img{
    width: 400px;
    height: 150px;
}

.article h2{
    font-size: 1.5em;
}

Código del JavaScript que crea los elementos:

let body=document.querySelectorAll("body")[0]
let articleDiv=document.createElement("div")
articleDiv.setAttribute("id","news")
fetch("https://newsapi.org/v2/everything?q=DGT&apiKey=MIAPI(no sé si la deberia ocultar por si acaso sí)")
  .then(response => response.json())
  .then(data => {
    data.articles.forEach(article => {
      let articleItem=document.createElement("div")
      articleItem.setAttribute("class","card article")
      let articleImg=document.createElement("img")
      articleImg.setAttribute("src",article.urlToImage)
      let articleContent=document.createElement("div")
      articleContent.setAttribute("class","articleContent")
      let articleHeader=document.createElement("h2")
      articleHeader.textContent=article.title
      let articleText=document.createElement("p")
      articleText.setAttribute("class","lead")
      articleText.textContent=article.description
      let articleButton=document.createElement("button")
      articleButton.setAttribute("class","btn btn-primary")
      articleButton.textContent="Ver más"
      articleItem.appendChild(articleImg)
        articleContent.appendChild(articleHeader)
        articleContent.appendChild(articleText)
        articleContent.appendChild(articleButton)
      articleItem.appendChild(articleContent)
      articleItem.style.marginTop="5px"
      articleDiv.appendChild(articleItem)
    });
    body.appendChild(articleDiv)
  })
  .catch(error => {
    console.error(error);
  });
4
  • Usa !important Ejemplo. display: flex !important
    – javdromero
    el 3 feb. 2023 a las 16:49
  • Puedes crear un ejemplo mínimo verificable en la pregunta misma insertando el código como snippet (con el botón que indica <>). De hacerlo, no olvides importar la librería de bootstrap. Y por cierto, está bien que ocultes el API Key :)
    – padaleiana
    el 3 feb. 2023 a las 16:53
  • @padaleiana el problema es que empleo 2 css, el propio y el de bootstrap y no sabría como hacerlo ya que solo deja insertar 1 css
    – Redox
    el 3 feb. 2023 a las 17:06
  • Es que tenés que añadir bootstrap como librería externa (no agregar tu archivo de bootstrap). Para ello tenés que insertar un enlace del CDN (en la documentación misma hay un enlace; coloqué la del 4.6 porque no sé qué versión estás utilizando)
    – padaleiana
    el 3 feb. 2023 a las 17:12

2 respuestas 2

0

Recuerda que CSS se aplica según la jerarquía de importancia de estilos -Aquí lo listo de mayor a menor relevancia

  • !important
  • #id Estilos en linea
  • .clases (pseudo clases o atributos)
  • <elementos /> (o psoudoelementos)
  • *selector universal

Entonces si quieres forzar a un estilo puedes usar !important, pero no es buena práctica abusar de esta opción.

2
  • Claro. Eso se llama especificidad.
    – padaleiana
    el 3 feb. 2023 a las 17:07
  • Eso me comentó un usuario, pero aún no funciona
    – Redox
    el 3 feb. 2023 a las 17:07
0

Me parece que el problema no está en el CSS, sino en la forma de importar:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="/ccss/a.css">

Presta atención a las rutas, parece que ambas rutas están apuntando a diferentes lugares. Uno es CSS y el otro es CCSS

2
  • Tendría que haberlo comentado ya que es verdad que puede dar lugar a confusión, las rutas están bien, se llaman así para separar el css del bootstrap del custom css(ccss), el problema ya está solucionado y precisamente era por las rutas aunque no de esa manera. Aún así muchas gracias por responder
    – Redox
    el 4 feb. 2023 a las 17:01
  • @Redox lectura altamente recomendada: es.meta.stackoverflow.com/a/4433/822 saludos.
    – fredyfx
    el 5 feb. 2023 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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