¿Qué es Css? (Cascading Style Sheets)
CSS es un lenguaje que se encarga de definir cómo se verá una página web, aplicar animación y diseño responsivo, es decir, que se adapte a las distintas pantallas.
Por un lado, HTML se ocupa de la estructura y el contenido de la página; mientras que CSS se encarga de su apariencia visual, aplicando estilos como colores, tipografía, márgenes, bordes, alineación y no solo define cómo se ve una página web, sino que también juega un papel crucial en la interacción y adaptabilidad de las interfaces, mejorando la experiencia del usuario.
Enlazar en html con la hoja de estilos de css:
<link rel="stylesheet" href="styles.css">
Esta porción de código se debe colocar dentro de la etiqueta <head> </head>
Se compone por dos atributos:
rel="stylesheet"
El atributo rel (abreviatura de "relationship", o relación en inglés) indica que el archivo que estás enlazando es una hoja de estilo (CSS).
href="styles.css"
El atributo href (abreviatura de "hyperlink reference") especifica la ubicación del archivo que estás enlazando, el archivo CSS se llama styles.css.
¿Dónde se ubica?
Se ubica dentro del head, por ejemplo debajo del title.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi web de recetas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
¿Cómo escribir todo eso?
No es necesario acordarse cada detalle ya que tenemos el emmet link:css
¿El nombre del archivo debe ser style.css?
No necesariamente, pero es el nombre predeterminado; cuando nuestro sitio crezca posiblemente necesitemos separar los estilos en más de un archivo (por cuestión de orden) y podremos enlazarlos al mismo html con nombres diversos.
Selectores desde la hoja de estilo:
La hora de estilos tiene una escritura diferente al html, en su forma más básica se utilza un selector, llaves de apertura y cierre.
Seleccionar todo los elementos:
*{
}
Seleccionar por atributo identificador:
Siendo el id un atributo de valor único para una etiqueta.
#id{
#id{
}
Seleccionar por atributo clase:
Siendo la clase un atributo cuyo valor es compartido para varias etiquetas.
.clase{
}
Seleccionar por etiqueta:
Para las etiquetas que ya hamos visto (p, img, h1 a h6, body, div, section, article...)
div{
}
Selectores hay muchos más, pero este es un buen comienzo. En los próximos encuentros podremos ver más selectores.
Aclaración: los nombre de clases e id distinguen mayúsculas y minúsculas; es decir, no podemos poner en el html id="Grupo" y en css intentar seleccionar #grupo{}
| HTML | CSS | |
| ID | Se añade el atributo id="nombre" a una etiquerta, ejemplo a un div <div id="grupo"> <p>Este es un párrafo</p> </div> | Se selecciona el id mediante # |
| Clase | <div class="grupo"> <p>Este es un párrafo</p> </div> | .grupo{ background-color: rgb(245, 20, 20); color: rgb(255, 255, 255); } |
Propiedades:
Color de letra:
color: rgb(255, 255, 255);
Color de fondo:
background-color: rgb(245, 20, 20);
Texto centrado:
text-align: center;
text-align: center;
Resultado:
________________________________________________
Agrupando contenido con estas 3 etiquetas en el html:
Antes de continuar veamos etiquetas útiles para el html que agrupan el contenido a las cuales les podemos aplicar estilos.
* Por si no queda del todo claro; estas etiquetas van en el html y no en la hoja de estilos, pero las seleccionaremos desde la hoja de estilos más adelante.
_________
Section:Emmet: section
Etiqueta: <section></section>
Significado semántico: tiene.
Uso: se utiliza para dividir el contenido en secciones temáticas, que forman parte del sitio.
En mis propias palabras: es un grupo que tiene un tema específico, pero que ese tema es parte inseparable del sitio web.
Preguntas clave:
- ¿El contenido está relacionado con un tema específico dentro de una página?
- ¿Este contenido forma parte de un grupo mayor y no tiene sentido por sí solo fuera del contexto de la página?
- ¿La división del contenido tiene una relación estructural con otras partes de la página (como una cabecera, un pie de página, etc.)?
Ejemplo: una sección de noticias de deportes en una página web de noticias.
_________
Div:
Emmet: div
Etiqueta<div></div>
Significado semántico: no tiene.
Uso: agrupar elementos sin ninguna connotación semántica, es decir, es útil en casos donde no se requiere una estructura semántica explícita, y solo se necesita un contenedor para estructurar el contenido visualmente.
En mis propias palabras: es un grupo para aplicar css.
Preguntas clave:
_________
Article:
Emmet: article
Preguntas clave:
- ¿El propósito del contenedor es principalmente de diseño o para aplicar estilos CSS?
- ¿Este contenido no pertenece a un tema específico o no debe ser tratado como una unidad autónoma?
- ¿Necesito un contenedor genérico sin ningún significado semántico explícito?
Ejemplo: un contenedor para organizar varias imágenes en una galería.
Article:
Emmet: article
Etiqueta: <article></article>
Significado semántico: tiene y representa un contenido autónomo.
Uso: es ideal para contenidos independientes, como artículos o noticias.
En mis propias palabras: es un grupo cuyo contenido funcionaría de forma independiente en otro sitio web.
Preguntas clave:
- ¿Este contenido es autónomo y tiene sentido por sí mismo?
- ¿Este contenido puede ser distribuido, indexado o reutilizado por otros sistemas (RSS, motores de búsqueda, etc.)?
- ¿Este contenido representa una unidad de información que podría ser compartida de manera aislada?
Ejemplo: una noticia de última hora o un artículo sobre un tema específico.
________________________________________________
Modelo de Cajas: (Box-Model)
Todo en html es representado como una caja.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Aclaración:
box-sizing: border-box significa que la medida de la caja incluye además de su contenido, el margen y el padding. El tamaño de la caja no se expande si agregas padding o borde.
box-sizing: content-box: el tamaño de la caja se expande al agregar padding o borde.
________________________________________________
Práctico:
