Resumen de CSS



CONCEPTOS BÁSICOS DE CSS (HOJA DE ESTILOS EN CASCADA)


Supongo que te habrás encontrado en más de una ocasión con el problema de que ciertos elementos de tu página web aparecen en un color que no deseas, en un tamaño o tipo de letra diferente al que esperabas o incluso alineados hacia donde no deberían.
La razón de estos cambios se debe a la hoja de estilos en cascada, o más comúnmente conocido, CSS. 
Aquí un repaso por lo más primordial para que entiendas qué es una hoja de estilos, cómo está estructurada y cómo puedes aplicar cambios que te interesen en la misma.

¿Qué es CSS?

  • CSS significa Cascading Style Sheets (Hoja de Estilos en Cascada).
  • El lenguaje CSS describe cómo se mostrarán los elementos HTML en la pantalla.
  • El lenguaje CSS ahorra mucho trabajo, ya que permite controlar el diseño de varias páginas web a la vez.
  • Todas las hojas de estilo externas se almacenan en archivos CSS.

¿Por qué usar CSS?

El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla .
El lenguaje CSS facilita mucho las cosas
La intención del lenguaje HTML no es contener etiquetas para dar formato a una página web, sino describir el contenido, como por ejemplo aquí:
<h1> Esto es un encabezado </h1>

<p> Esto es un parrafo . </p>
Pero si queremos que ese encabezado o párrafo tenga un color o un tipo de fuente concreto, deberíamos añadir estilos a cada una de las páginas que los contenga. Para ahorrar este costoso trabajo, el World Wide Web Consortium (W3C) decidió crear el lenguaje CSS.
Ahorro de trabajo
Las definiciones de estilo normalmente se guardan en archivos .css externos. De esta manera, con una hoja de estilos externa puedes cambiar el aspecto de un sitio web por completo simplemente cambiando un archivo.

Tres formas de insertar CSS

Hay tres maneras de insertar una hoja de estilo:
  • Hoja de estilos externa
  • Hoja de estilos interna
  • Estilo en línea
Hoja de estilos externa
Con una hoja de estilos externa, puedes cambiar el aspecto de un sitio web completo cambiando un sólo archivo.
Para ello cada página debe incluir una referencia al archivo de hoja de estilos externa dentro del elemento <link> que se encuentra dentro de la sección <head>:
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head>
Una hoja de estilo externa se puede escribir desde cualquier editor de texto, debe ser guardado con la extensión .css y no puede contener ninguna etiqueta HTML .
Hoja de estilos interna
Una hoja de estilo interna se puede usar en una sólo página con un estilo único. Los estilos internos se definen dentro del elemento <style> dentro de la propia página HTML:
<head>
<style>
body {
    background-color: #FFFFFF;
}

h1 {
    color: #000000;
    text-align: center;
} 
</style>
</head>
Estilos en línea
Un estilo en línea se puede utilizar aplicándolo al estilo de un solo elemento. Para ello tienes que añadir el atributo de estilo al elemento en cuestión, pudiendo contener cualquier propiedad CSS, como por ejemplo la siguiente:
<h1 style="color:red;margin-left:30px;">Esto es un estilo en linea</h1>

Orden en cascada

Supongo que si estás utilizando los tres tipos de CSS te preguntarás cuál prevalece, ¿no? Pues como bien indica su nombre siguen un orden en cascada con esta prioridad:
  1. Estilo en línea (dentro de un elemento HTML )
  2. Hojas de estilo externas e internas (en la sección de cabecera )
  3. Las que viene por defecto en el navegador
Por lo tanto, un estilo en línea (dentro de un elemento HTML específico) tiene la prioridad más alta, lo que significa que va a anular los estilos definidos dentro de la etiqueta <head>, aquellos recogidos en una hoja de estilos externa (archivo.css) o incluso los que trae por defecto el navegador .

Sintaxis CSS

Un conjunto de reglas CSS consta de un selector y de un bloque de declaración:
El selector hace referencia al elemento HTML al que le queremos aplicar el estilo, mientras que el bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves .
En el siguiente ejemplo todos los elementos de párrafo tendrán el texto azul y centrado:
p {
color: blue;
text-align: center;
}

Los selectores CSS

Los selectores CSS se utilizan para “encontrar” (o seleccionar) elementos HTML en función del nombre del elemento, del id , de la clase, del atributo, etc.
El selector de elementos
El selector de elementos elige elementos en función del nombre de los mismos. Por ejemplo, podríamos seleccionar todos los elementos <h2> en una página, alinearlos a la izquierda y ponerlos en color rojo de la siguiente manera:
h2 {
text-align: left;
color: red;
}
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico, esto quiere decir que será único dentro de una página.
Para ello debes utilizar el símbolo de la almohadilla (#) delante del atributo id. Si por ejemplo tenemos un id=parrafo1 que queremos centrar y poner en color azul, la regla de estilo sería la siguiente:
#parrafo1 {
text-align: center;
color: blue;
}
El selector de clase
El selector de clase elige los elementos con un atributo de clase específico. Para ello tienes que escribir un punto (.) delante del nombre de la clase .
Por ejemplo, podemos decidir que aquellos atributos con clase “newsletter” estén centrados y sean rojos:
.newsletter {
text-align: center;
color: red;
}
Otro caso posible sería que quisieras añadir la clase “newsletter” sólo a los elementos de párrafo, entonces quedaría de la siguiente forma:
p.newsletter {
text-align: center;
color: red;
}
¿Y si quieres que tus elementos HTML hagan referencia a más de una clase? Pues también es posible 
<p class="newsletter centrado">Este parrafo tiene en cuenta la clase newsletter y centrado</p>
La agrupación de selectores
Si tienes varios elementos a los que quieres aplicarles los mismos estilos también se puede hacer. Para ello tienes que separar cada selector con una coma como en el siguiente ejemplo:
h1, h2, p {
text-align: center;
color: red;
}


Comentarios CSS

Los comentarios se utilizan para explicar el código, de manera que si en un futuro quieres editarlo sea más sencillo entenderlo. Para que éstos sean ignorados por los navegadores tiene que ir entre estos símbolos: al inicio /* y al final  */.
h2 {
color: blue;
/* Esto es un comentario */
text-align: center;
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Tipos de listas en HTML

Imagen
Listas HTML  (no ordenadas) y (ordenadas) El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas. Las listas no ordenadas , las listas ordenadas y las listas de descripción. ( la veremos más adelante) Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada   Los elementos de las listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el elemento <li>. Ul es el acrónimo de unordered list , lista no ordenada. En una lista no ordenada, el orden de aparición de los elementos no es importante. Cada elemento de la lista se define con <li> , que es el acrónimo de list item. Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos. En el siguiente ejemplo, vemos el código HTML que produce como resultado la lista no ordenada que figura a continuación       El estilo de u...
Leer más

Enlaces, hipervínculos e imágenes

Imagen
Enlaces, links, hipervínculos Definición y Uso La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del vínculo. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado es subrayada y púrpura Un vínculo activo es subrayada y rojo Enlaces hipervínculos HTML  enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento. Al mover el ratón sobre un enlace, el puntero del ratón se convertirá en una pequeña mano. Nota:  Un enlace no tiene que ser un texto.  Puede ser una imagen o cualquier otro elemento HTML. video Vínculo a un link externo <a> Vínculo a una imágen  <img src> Abrir un enlace en una nueva ventana del navegador  ...
Leer más

Tablas en HTML

Imagen
Creación de Tablas Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular. Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabl...
Leer más