Skip to content

CSS

Jump to bottom
Camino-S edited this page Dec 8, 2022 · 5 revisions

Qué es:

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS describe como debe ser dibujado el elemento estructurado en la pantalla.

Conectar HTML y CSS

  • <link rel="stylesheet" href="">
  • <style></style>
  • atributo "style"
  • @import url()

Sintáxis

La sintaxis CSS está compuesta por 6 elementos:

  1. Regla CSS: Es todo el bloque CSS que modifique un elemento en específico.
  2. Selector: Indica a que elemento HTML se le aplicaran los estilos.
  3. Propiedades: Indican en que aspecto serán modificados los estilos.
  4. Valores: son aquellos que serán asignados a las propiedades del elemento HTML.
  5. Declaraciones: Es el conjunto de propiedad y valor, separado con un ; de la siguiente declaración.
.selector {
	propiedad1 : valor;
	propiedad2 : valor;
	propiedad3 : valor;
}

Espacios, indentaciones y saltos de línea no son parte de la sintaxis de CSS.

  1. Comentarios en CSS. Sirven para documentar nuestro código CSS. Los comentarios son ignorados al momento de renderizar nuestros estilos.

Su sintaxis básica es la siguiente:

/* Esto es un comentario. Será ignorado al momento de renderizar estilos */

/* Los estilos se van a aplicar a los párrafos del documento */
p { 
   color : green; /* el texto se va a escribir en color verde */
   background: silver; /* el fondo del párrafo va a ser color plata */
}

Variables CSS o custom propierties

Las variables en el mundo de la programación es una forma de guardar datos en la memoria y poder hacer uso de los mismos a través de su nombre.

:root{
	--colorfondo: red; /*Declarar la variable*/
}

h1 {
	background: var(--colorfondo) /*Utilizar la variable*/
}

Selectores

1. Estilos del navegador

2. Selectores

  • Tipos
  • Case sensitive

4. Selectores simples: etiqueta

Su finalidad es "normalizar" o sobrescribir los estilos predeterminados de cada navegador.

Seleccionan las etiquetas de los documentos HTML, como podrían ser h1, p, span, div, entre otros. Por ejemplo:

h1{...}
span{...}
div{...}
ul{...}

Con este tipo de selector, se seleccionaran absolutamente todas las etiquetas HTML de ese tipo.

5. Selectores simples: clases

A diferencia de los selectores de etiqueta, permiten seleccionar exclusivamente a un elemento al cual se le aplicarán los estilos.

Este tipo de selector se indica de un . seguido por el nombre de la clase. Por ejemplo:

.title{
	color: blue;
	font-size: 3em;
}

.description{
	color: red;
}

**Recomendaciones: **

  • No pueden comenzar con números
  • Pueden comenzar con - o _
  • Pueden incluir :, por ejemplo: title:first
  • Puedes usar emojis

6. Selectores simples: Id = Identificador

Seleccionan elementos en el HTML tomando como referencia al atributo id. Estos atributos son únicos, por lo cual los estilos aplicados a ellos también lo son.

Este tipo de selector se indica de un # seguido por el nombre del identificador. Por ejemplo:

#main-title{
	background: pink;
}

¿Por qué no usar selector Id?

  • Son utilizadas por HTML para crear anclas.
  • Son selectores para trabajar elementos del DOM con JavaScript.
  • Tienen una alta especificidad, lo que complica si quieres cambiar el estilo.

Clone this wiki locally