LEARNING HTML-CSS

En este apartado vas a aprender algunas propiedades css que puedes aplicar a tu página html, pero primero aprenderemos la sintaxis de css:

Primero escribimos el elemento (selector) al que le queremos dar estilo seguido de una par de llaves, adentro de las llaves se escribe la propiedad css, dos puntos y el valor de la propiedad que termina con ; de la siguiente forma:

body {
  background-color: blue;
}

Pero espera, no sería bueno poder definir la misma propiedad para varios elementos? bien, eso lo podemos hacer simplemente separando los elementos con una coma(,).

Ahora que conocemos la sintaxis de css estamos listos para conocer algunas de las propiedades más utilizadas:

• font-size: esta propiedad nos permite cambiar el tamaño de un texto. Podemos especificar el tamaño en pixels o ems, por ejemplo si quisiera cambiar el tamaño de los párrafos de mi página:

  p {
    font-size: 20px;
  }




• color: La propiedad color nos ayuda a cambiar el color de la fuente del elemento. el valor puede escribirse con el nombre del color en inglés, con código hexadecimal como: #FF0000 (rojo) o usando rgb que usa los parámetros(red,green,blue): por ejemplo si quisiera cambiar el tamaño de los párrafos de mi página:

  h1 {
    color: purple;
  }




• background-color: Define el color de fondo de nuestro elemento, y se puede especificar con los mismo parámetros que color:

  p, h3 {
    background-color: green; 20px;
  }




• width y height: Definen el ancho y alto de un elemento respectivamente, su valor se puede especificar en px, em ó en porcentaje. por ejemplo si deseo ajustar el tamaño de una imagen:

  img {
    width: 90%;
    height: 100px;
  }

• padding: Define la distancia desde el borde del elemento hasta su contenido:

  table {
    padding: 5px;
  }




• margin: Define la distancia entre un elemento y otro:

  img {
    margin: 25px;
  }

Estas son solo algunas de las muchas propiedades que nos brinda CSS, y recuerda que lo más importante para que te vuelvas un experto es con la práctica, así que busca más información en la web y manos a la obra!

Con css podemos aplicar diferentes propiedades de estilo a todos los elementos que queramos, pero qué pasa si solo quiero agregar una propiedad a un párrafo en especial y no a todos?, o cambiar algo de una imagen y no de todas? ¿Te imaginas que hubiera una solución para esto? espera, si la hay!

Para poder aplicar estilo a un elemento en específico usamos el selector "id", y la forma en que funciona es la siguiente:

1. en nuestro documento html buscamos la etiqueta a la que queremos aplicar estilo.

2. Agregamos id="nombre_que_queramos" adentro de la etiqueta para identificarla.

3. En nuestro css, en lugar de colocar el nombre de la etiqueta escribimos # y el nombre de nuestro id.

por ejemplo:

En el documento HTML:

<p id="prueba">

En el documento CSS:

#prueba {
  color: red;
}

Una de las cosas más importantes que tienes que saber es que el nombre de nuestro selector NO puede empezar con números, NO puede contender espacios en blanco y NO puede tener la letra ñ.

Con esto estarás preparado para aplicar selector a tu página, porque es una buena forma de afectar un elemento HTML específico.

Las clases al igual que los selectores id nos permiten aplicar un estilo en nuestro css a uno o varios elementos específicos de nuestro HTML. Incluso podemos hacer que varios elementos tengan la misma clase y que se vean afectados de la misma manera.

Para agregar una clase:

1. en nuestro documento html buscamos la o las etiquetas a la que queremos aplicar estilo.

2. Agregamos class="nombre_que_queramos" adentro de la etiqueta para identificarla.

3. En este caso, En nuestro documento css en lugar de colocar el nombre de la etiqueta escribimos . y el nombre de nuestra clase.

Observa Cómo:

En el documento HTML:

<h2 class="test">

<li class="test">

En el documento CSS:

.test {
  background-color: orange;
}

Recuerda que los nombres de los selectores tienen restricciones como NO empezar por números, NO incluir la letra ñ y NO contener espacios en blanco; sin embargo, puede sustituir los espacios en blanco por _(guión bajo), y trata de NO usar palabras reservadas o nombres de etiquetas HTML.