Ejercicio N°3

PRIMERO LEAN EL EJERCICIO EN SU TOTALIDAD!
TRATEMOS DE ENTENDER LOS PASOS Y PORQUE LOS HACEMOS,
NO LO USEN COMO UN TUTORIAL HACIENDO PASO A PASO!!

En este ejercicio vamos a comenzar a darle algunas propiedades a nuestros elementos.

Comenzamos con un repaso:

Antes que nada, crearemos un nuevo archivo html, el cual guardaremos, con el nombre ej3_estilos.html, dentro de nuestra carpeta raíz (creada en el ejercicio anterior).

Ahora vamos a generar un archivo css donde guardaremos los diferentes selectores y sus propiedades. El archivo css lo creamos desde el panel Diseñador de CSS, en la sección de Fuentes, hacemos clic en el signo + y elegimos la opción Crear un nuevo archivo css, en la ventana emergente seleccionamos Examinar y elegimos donde lo guardaremos (en nuestra carpeta raíz) y su nombre mis-estilos.css.

Ahora podemos ver como el nuevo archivo css se ha vinculado desde nuestro archivo html, siempre entre las etiquetas <head></head> y también nos aparece una pestaña para trabajar en el archivo css o en código html.

Ahora estamos listos para crear nuestro selectores, que serán guardados en el archivo css.

Trabajaremos con tres tipos de selectores básicos:
los mismos los podemos crear tipeando en nuestro archivo css o utilizando el panel Diseñador de css en la sección de Selectores y el signo +

– Selector de etiqueta: le dará propiedades a todos los elementos que compartan esa etiqueta, por ejemplo si usamos el selector h1, aplicara estilos a todos los textos que tengamos dentro de etiquetas <h1>.

– Selector por clase: en este caso se antepone un punto al nombre del selector, por ejemplo .titulo o .fondo y este tipo de selectores se le puede aplicar a varios elementos a elección indicando la clase dentro de la etiqueta de apertura, por ejemplo <h1 class=”titulo”> o <div class=”fondo”>, cabe destacar que podemos aplicar varias clases a un mismo elemento, por lo que es muy importante que nuestras clases no tengan espacios en sus nombre, por ejemplo: <div class=”titulo fondo”> aplicara las propiedades que indiquemos en las clases .titulo y .fondo a nuestro div.

– Selector por ID: este selector se aplica solamente a un único elemento! y al crear el selector anteponemos el #, por ejemplo #contenedor y también se aplica indicando el id en la etiqueta de apertura, <div id=”contenedor”>.

(otro detalle importante es que los nombres de los selectores no pueden iniciar con números)

Luego resta indicar las propiedades y valores que deseamos en nuestros selectores, pero es muy importante estar atentos y ser cuidadosos para no cometer errores! Luego del nombre del selector tendremos un corchete de apertura, luego la propiedad, dos puntos seguido por el valor que finaliza con punto y coma y despues de indicar todas las propiedades y valores del selector, cerramos con el corchete de cierre.

Poco a poco iremos aprendiendo las propiedades mas utilizadas y directamente las tipearemos en el código css, mientras tanto podemos utilizar el panel Diseñador de css para elegir las propiedades e indicar sus valores, es importante tener des tildada la opción Mostrar conjunto, de lo contrario, solo mostrara las propiedades ya utilizadas.

No olviden de pegarle una buena leída a la entrada de Propiedades CSS >

Ahora el ejercicio!

Vamos a crear los siguientes elementos en html:

– 3 títulos con diferentes etiquetas <h>
– 2 párrafos con la etiqueta <p>
– 3 divs utilizando la etiqueta <div>

Ahora vamos a darles propiedades con diferentes selectores

Primero los títulos:
– mediante tres selectores de etiqueta vamos a darles a cada uno diferentes colores de texto.
– utilizando tres clases distintas le daremos un fondo de color a cada titulo.
– utilizando una sola clase, vamos a darles un padding en pixeles y centrar los textos.

Seguimos con los párrafos:
– mediante un selector de etiqueta vamos a elegir la fuente tipográfica y el tamaño para ambos.
– utilizando distintas clases indicaremos diferentes colores y variables de peso para cada párrafo.
– aplicando selectores de ID vamos a modificar la altura de línea en un párrafo y centrar otro.

Por ultimo a los divs:
– utilizando distintas clases indicaremos diferentes colores, anchos y altos para cada div.
– mediante una única clase le indicaremos a dos de los div que tengan solo dos esquinas redondeadas.
– con un selector de etiqueta le daremos a todos los divs margen de 20px.
– aplicando selectores de ID vamos a darle un borde a uno de los div.

El gran final!

Del mismo modo que hicimos en el ejercicio 2, a nuestro antiguo archivo index.html le agregarnos un texto o una imagen que vincule a nuestro archivo del ejercicio 3 y subiremos todos los archivos al servidor para podes visualizarlo.

No olvides que en Dw el archivo de estilos y el html se guardan por separado o utilizando la opción “Archivo/Guardar todo”.

Les dejo el video del ejercicio: