Cómo usar css para darle forma al html?

Antoniio1

Gamma
Verificación en dos pasos desactivada
Desde
11 Ago 2018
Mensajes
165
Edad
23
Hola, buenas. Hice una estructura con html para mostrar contenido, la hice así:
HTML:
<img src="https://www.google.se/images/google_80wht.gif" alt="Mundo Magico Logo">
<h2>CUIDADOS EVENTUALES</h2>
<p>El cuidado eventual consiste en apoyarse con el cuidado de tus niños por horas, desde 1 hora  de servicio, hasta todas las horas que necesites. El servicio está disponible para apoyarte de lunes a domingo las 24 horas.</p>
<p>Nuestra prioridad es el cuidado y diversión de tu pequeño, por lo cual, te ayudamos con todas las tareas necesarias para lograr un excelente cuidado, desde:</p>
<ul>
    <li>Cuidado de niños de recién nacidos a 10 años.</li>
    <li>Cámara web en vivo (desde el celular).</li>
    <li>Estimulación temprana para bebes.</li>
    <li>Juegos adecuados a la edad.</li>
    <li>Preparación de alimentos.</li>
    <li>Duchas.</li>
    <li>llevarlos a dormir.</li>
    <li>Jugar con ellos .</li>
    <li>Apoyo con tareas escolares.</li>
    <li>Darles medicamentos (si lo necesita) .</li>
</ul>
<p>Para lograr una excelente conexión con los niños,las nanny están capacitadas con las herramientas necesarias para adaptarse a las necesidades de cada niño, como su personalidad, gustos y el entorno que la rodea.</p>
<p>La confianza es algo fundamental, es por eso que te brindamos la experiencia de monitorear tu servicio en vivo desde tu celular, estando atenta de cada detalle y logro de tu hijo, desde donde estés podrás disfrutar de esta experiencia, incluso si viajas! </p>
<p>¡No esperes más, para disfrutar de la experiencia de contar con una persona ideal para tus niños!</p>
Me da este resultado:
prueba.png

Cómo puedo usar css para dejarla así?
eventuales78.jpg

Espero alguien pueda apoyar, gracias de antemano.

Saludos!
 

emanuel12239

Beta
Verificación en dos pasos desactivada
Desde
9 Ago 2019
Mensajes
130
no puede dar la url de la imagen q queres como quede
usa un tabla busca en google table html
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Desde
11 Ago 2018
Mensajes
165
Edad
23
Busqué en google eso y me aparecen tablas en html
 

Pedro Urbina

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
20 Oct 2019
Mensajes
23
Para hacer lo que tu quieres debes simplemente crear los estilos, y el HTML no esta maquetado, es decir te falta delimitar las diferentes secciones. por ejemplo todo lo puede poner dentro de un contenedor <div> luego el h2 que sea otros <div> y el contenido otro.

al <div> del h2 le creas una clase ejemplo .titulo, quedaria algo asi como: <div class=titulo> y te irías a la hoja de estilo y añades la propiendas que se ajusten. esto es para darte una idea. Pero si no sabes nada de CSS lo mejor es busques un curso básico en youtube hay muchos gratis y que te darán las nociones para empezar
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Desde
11 Ago 2018
Mensajes
165
Edad
23
Sí, por ejemplo, hice esta parte:
HTML:
<h2 class="titulo">CUIDADOS EVENTUALES</h2>
Y el css lo dejé así:
h2.png

El resultado del fondo y del titulo debería cambiar pero sigue viéndose así:
h22.png

Yo añado el html desde una bd con esta línea:
HTML:
<p [innerHTML]="product_description.product_description"></p>
 

Adjuntos

spot

Gamma
Verificación en dos pasos desactivada
Desde
17 Jul 2013
Mensajes
391
Pasa la url haber en que puedo ayudar. por inbox o aquí.
 

EspErpENto

Kappa
Verificación en dos pasos desactivada
Desde
16 Feb 2013
Mensajes
2.721
Primero va la clase y luego el elemento.
Prueba con:

.titulo h2{
color: red;
}

Aquí te falta el punto antes de las clases:
.ion-header .ion-title{
text-align: center;
}

y para el body, primero coloca todo el texto entre etiquetas body

El tema de la lista es que debes coger unos bullets.

Suerte y comenta.
 

Arriba