TEMA 1. INTRODUCCIÓN A CSS

ÍNDICE

• ¿Qué es CSS?
• Ventajas
• Sintaxis CSS
• Cómo usar CSS
  • Entre líneas
  • Internamente
  • Externamente
• Tipos de selectores
  • Selector universal (*)
  • Selector de etiqueta HTML
  • Selector descendente
  • Selector de hijos
  • Selector de atributos
  • Selector id
  • Selector class
• E

Una página web es realmente un documento de texto, en él se escribe código HTML que es el contenido de una web ((imágenes, párrafos, títulos, subtítulos, etc), y en qué orden)). Por otro lado, existe el código CSS, que unido al código HTML permite darle letra, tamaño, colores, bordes, márgenes,… (y otras características visuales) a un documento web.

La idea original detrás de CSS es la de separar el contenido de su representación visual, de modo que cambiar el diseño no implique modificar el contenido (y viceversa).

¿Qué es CSS?

CSS por sus siglas en inglés (Cascading Style Sheets) significa «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc…) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma automática y masiva.

Se le denomina estilos en cascada porque se lee, procesa y aplica el código desde arriba hacia abajo (siguiendo un patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad (código que se contradice), se siguen una serie de normas para resolver dicha ambigüedad.

Vamos a explicarlo con un ejemplo sencillo:

Imagina que cada bloque representa un documento HTML en tu sitio web. Ahora, en lugar de pintar cada bloque de manera individual, usamos una caja especial que contiene todos los colores, patrones y diseños. Esta caja especial se llama CSS (Hojas de estilo en cascada). Cuando conectamos esta caja con los bloques, ¡todos adoptan automáticamente el estilo de la caja CSS!

Esto significa que si queremos cambiar el color de todos los bloques o hacer que todos tengan el mismo patrón, solo tenemos que cambiar la caja CSS. Y lo mejor es que la caja CSS se lee de arriba hacia abajo, como si leyéramos un libro.

Así que, piensa en el documento HTML como la estructura de tu casa, y el CSS como la pintura, el diseño y los detalles que hacen que tu casa sea única y hermosa. Y aunque tengamos muchos documentos HTML (bloques), solo necesitamos un solo documento CSS (caja) que controla cómo se ven todos esos bloques.

Ventajas

Ventajas de usar CSS:

1. Separación de Estructura y Presentación: CSS permite separar el contenido HTML de su presentación visual. Esto mantiene el código HTML limpio y organizado, mientras que los estilos se definen en un archivo CSS aparte. Esta separación mejora la legibilidad del código, simplifica el mantenimiento y facilita la actualización de estilos.
2. Consistencia y Mantenibilidad: Al utilizar CSS, puedes aplicar estilos de manera consistente en un sitio web o aplicación. Los estilos se definen una vez y se aplican a varios elementos en las páginas, asegurando una apariencia visual cohesiva en todo el proyecto. Esta consistencia facilita la actualización de la apariencia visual del sitio.
3. Eficiencia en el Rendimiento: CSS permite cargar estilos externos desde un archivo separado. Esto permite que los navegadores almacenen en caché los estilos y los apliquen en múltiples páginas del sitio, mejorando el rendimiento al reducir la cantidad de datos transferidos entre el servidor y el cliente.
4. Flexibilidad y Control: CSS ofrece una amplia gama de propiedades y selectores, brindando un control preciso sobre el estilo de los elementos HTML. Permite modificar fácilmente colores, fuentes, márgenes, tamaños, diseños, etc. Esta flexibilidad permite personalizar y adaptar el sitio web a diferentes dispositivos y tamaños de pantalla.

¿No lo has entendido? Veamos con el ejemplo de la casa:

Imagina que estás construyendo una casa. El HTML sería como los ladrillos y el cemento, la estructura sólida de la casa. Pero, ¿cómo la haces lucir genial por fuera? Aquí es donde entra CSS, que sería como la pintura, los colores y el diseño de tu casa.

1. Orden y organización: CSS ayuda a mantener las cosas ordenadas. Imagina si cada vez que queremos cambiar el color de las paredes, tuviéramos que rehacer la estructura de la casa. Con CSS, mantenemos los colores separados de la estructura, como tener un cuaderno especial para los diseños y colores, dejando los ladrillos intactos.
2. Consistencia y facilidad: Con CSS, una vez que decides cómo se ve una parte de la casa, eso se aplica a todo de manera consistente. Si cambias de opinión sobre el color de las ventanas, solo tienes que modificar una vez el diseño, y automáticamente todas las ventanas cambian. Es como tener una fórmula mágica que hace que todo se vea igual de bonito.
3. Más rápido y eficiente: ¿Sabes cómo algunas pinturas se secan más rápido que otras? Bueno, con CSS, usamos un tipo de pintura que el navegador guarda para no tener que pintar cada parte de la casa cada vez que alguien la visita. Esto hace que la casa se vea bien más rápido.
4. Personalización y control: Con CSS, puedes cambiar el color, la forma o el tamaño de cualquier parte de la casa cuando quieras. Es como tener superpoderes de diseño. Puedes hacer que tu casa luzca increíble en cualquier dispositivo, ya sea en una pantalla grande como una tele o en una más pequeña, como la pantalla de un teléfono.

Así que, HTML construye la casa y CSS le da el toque especial para que sea única y bonita, ¡es como tener una varita mágica para diseñar casas geniales!

Sintaxis CSS

La sintaxis de CSS es un poco distinta a HTML (hacer un listado del contenido de la página) CSS utiliza las REGLAS asignadas a elementos HTML, un documento HTML completo o varios de ellos. Estas son procesadas por el navegador web cuando carga el archivo HTML.

Una regla se compone de un selector (nombre del elemento sobre el que se va a aplicar el estilo) y, entre llaves y separados por punto y coma, las declaraciones o estilos que vamos a aplicar sobre ese elemento, como por ejemplo tipo de letra, tamaño, color, bordes… Cada declaración está formada por una propiedad y un valor (o valores) asociado a esa propiedad.

Veamos un ejemplo de regla CSS:

Con esta regla decimos que todos los encabezados H1 van a ser de color aguamarina

El selector es H1, la propiedad es el color y el valor que va a tomar es aguamarina

Otro ejemplo:

Con esta regla decimos que todos los párrafos van a tener una fuente Arial y color azul

Veamos un ejemplo completo, con la parte HTML, el CSS y cómo lo visualizaríamos:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    
    <link rel="stylesheet" type="text/css" href="estilo1.css">
   
</head>
<body>
    <h1> ENCABEZADO H1</h1>
    <P>Esto es un párrafo</P>  
</body>
</html>

CSS

h1 {color:aquamarine}
p{font-family: Arial, Helvetica, sans-serif;color:blue}

Cómo usar CSS

Existen tres formas bastante conocidas de emplear CSS para maquetar una página HTML
y son las siguientes:

Entre líneas

Se especifica el CSS directamente en el documento HTML de la siguiente manera (Intentaremos evitar esta forma):

<p style="color:red; font-family: Verdana, Geneva, Tahoma, sans-serif;">Este es un párrafo.</p> 

Internamente

Se especifican los estilos CSS directamente en el archivo HTML, se define dentro del HEAD

<head>
  <style>
  p { color:pink;font-family: 'Courier New', Courier, monospace; }
  body { background-color: black; }
   </style>
</head>

Externamente

Esta es sin duda la forma más recomendable de aplicar estilos a documentos HTML, consiste en crear un documento CSS aparte y guardarlo con la extensión .CSS, por ejemplo: midocumento.css
1. En el documento CSS se encuentra todo el código CSS que determinarn el estilo de todos los elementos HTML apuntados.
2. Desde un documento HTML llamaremos al documento CSS para que se haga presente y aplique los estilos que hemos escrito en dicho documento CSS. Dentro del HEAD del HTML añadimos la invocación:

<head>
    <link rel="stylesheet" type="text/css" href="midocumento.css">
</head>

Aprendizaje activo: Para el siguiente código en HTML incluir para el selector p un estilo con la propiedad color con valor igual a green y la propiedad font-weight con valor igual a bold. Probar incluyendo el estilo CSS internamente y entre líneas.

<!DOCTYPE html>
<html>
    <head>
    <title>Mi página</title>
</head>
    <body>
        <p>Esto es un párrafo de color ____________ y _________</p>
</body>
</html>

Tipos de selectores

Entre los tipos de selectores, tenemos los siguientes:

Selector universal ( * )

* {  margin: 0; }

En este caso se va a aplicar un margen de tamaño 0 a todos los elementos html de nuestra página.

Selector de etiqueta HTML

h1 {  color: blue; }
p {  color: pink;  }
h1,p {  color: yellow; }

En el primer caso se establece que el color de letra de todos los títulos de la página estará en color azul. En el segundo caso se establece que el color de texto de todos los párrafos estará en color rosa. En el tercer caso se establece que el color del texto de todos los títulos y de los párrafos de la página, serán amarillos.

Selector descendente

Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>. Ejemplo:

p span { color: green; }

En este caso se aplicará un color verde a los textos de todos los elementos <span> que se encuentren dentro de una etiqueta de párrafo <p>, como en el siguiente ejemplo:

 <p><span>Este es un texto dentro de un span</span></p>

Veamos un ejemplo :

<!--Corpus-->
<!DOCTYPE html>
<html>
    <head>
    <title>Mi página</title>
    <style>
        h1 {  color: blue; }
        p {  color: pink;  }
        p span { color: green; }

     </style>
    </head>
    <body>
        <h1>Esto es un encabezado h1</h1>
        <p>Esto es un párrafo</p>
        <p><div><span>Este es un texto dentro de un span</span></div></p>
</body>
</html>

Selector de hijos

Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el «signo de mayor que» (>). Ejemplo:

p > span { color: blue; }

En este caso se aplicará un color azul al texto de todos los elementos que se encuentran contenidos directamente dentro de un elemento de párrafo, es decir que no existen contenedores intermedios, como en el siguiente ejemplo:

<!--Corpus-->
<!DOCTYPE html>
<html>
    <head>
    <title>Mi página</title>
    <style>
        h1 {  color: blue; }
        p {  color: pink;  }
        p > span { color: blue; }

     </style>
    </head>
    <body>
        <h1>Esto es un encabezado h1</h1>
        <p>Esto es un párrafo</p>
        <p><span>Este es un texto dentro de un span</span></p>
</body>
</html>

Selector de atributos

Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

input[type="text"] {  
    width:150px;
}

<input type="text" name="estrato" value="1">

Selector id

El selector id se utiliza para definir estilos sobre un elemento, el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo numeral (#).

#idelemento{
    text-align: center;
    color: red;
}

<p id="idelemento"> Esto es un párrafo </p>

Selector class

Con el selector class se puede definir el mismo estilo para diferentes elementos HTML que posean el mismo valor en este atributo. El valor del selector class debe ir antepuesto por un punto (.)

.elemento{
    text-align: center;
    color: red;
}

<p class="elemento"> Esto es un párrafo </p>

TEST PARA PRACTICAR