INICIO HTML CSS

CSS

¿Que es CSS?

CSS son las siglas de Cascading Style Sheets (En español Hoja de estilo en cascada).

• CSS describe como los elementos de HTML se van a mostrar en la pantalla.

• CSS es my importante ya que este nos permite definir el estiló de nuestra pagina, incluyendo el diseño, la distribución y las variaciones en la pantalla para diferentes dispositivos y tamaños de pantalla.

Ejemplo:

              
    body {
      background-color: lightblue;
          }
                    
    h1 {
      color: white;
      text-align: center;
    }
                    
    p {
      font-family: verdana;
      font-size: 20px;
    }
              
            

CSS ahorra mucho trabajo y resuelve muchos problemas

• HTML fue creado para describir el contenido de una pagina web, nunca tubo como fin obtener etiquetas para el formato de la pagina web. A partir de HTML 3.2 cuando se agregaron etiquetas como <font> y atributos de color, el trabajo de los desarrolladores era muy incomodo ya que se debia de especificar los colores y fuentes en cada una de las paginas. Para resolver este problema, el World Wide Web Consortium (W3C) creo CSS, haciendo que en los archivos HTML no se vea el estilo y que el los archivos .css se defina toda la apariencia de la pagina y los elementos.

Sintaxis

• CSS consiste de un selector y un bloque de declaración.

Ejemplo:

Explicación del Ejemplo:

h1 es un selector en CSS que se refiere al elemento de HTML <h1>.

color es una propiedad que determina el color que este caso es azul por que tiene el valor blue.

font-size es una propiedad que determina el tamaño de la fuente que este caso es 12 px ya que tiene el valor 12px.

Selector

Los selectores de CSS se utilizan para seleccionar el elemento de html que se le desea dar un estilo.

Existen 5 categorías de los selectores de CSS:

• Selectores simples: selecciona elementos basado en el nombre, id o clase.

  p { color: red; }

• Selectores combinadores: selecciona elementos basados en un relación especifica entre si.

  div p { color: red; }

• Selectores de pseudoclases: selecciona un elemento basado en un estado.

  a:hover { color: red; }

• Selectores de pseudoelementos: selecciona y le da estilo a una parte del elemento.

  p::first-line { color: red; }

• Selector de atributos: selecciona elementos basado en un atributo o en un valor.

  a[target] { color: red; }

Selector de elementos:

El selector de elementos selecciona un elemento de HTML basado en su nombre.

Ejemplo:

          
    p {
      color: red;
      font-size: 20px;
    }
          
        

• Ahora todos los elementos <p> serán de color rojo y con un tamaño de fuente de 20px.

Selector de id:

El selector de id utiliza el atributo id de un elemento de HTML para seleccionar un elemento específico. El id de un elemento es único dentro de una pagina, por lo que el selector de id se usa para seleccionar un elemento que es único.

Ejemplo:

          
    #ejemploid {
      color: red;
      font-size: 20px;
    }
          
        

• Para seleccionar un elemento con un id especifico se utiliza el carácter numeral (#) seguido por el id del elemento (ejemploid).

• Ahora el elemento de HTML con id="ejemploid" serán de color rojo y con un tamaño de fuente de 20px.