Saltar al contenido principal

Las propiedades básicas de CSS

Las propiedades básicas de CSS

Las propiedades básicas de CSS definen cómo se debe presentar un elemento en una página web. Algunas de las más comunes son color, font-size, background-color, margin, padding y float. Estas propiedades permiten controlar la apariencia visual de los elementos HTML, mejorando la experiencia del usuario y la estética del sitio web.

Propiedades más comunes​

Las propiedades básicas de CSS son fundamentales para definir el estilo y la presentación de los elementos en una página web. Aquí te mostramos algunas de las más comunes:

color: Define el color del texto de un elemento. Puedes usar nombres de colores, valores hexadecimales o RGB.

p {
  color: red;
}

font-size: Define el tamaño de la fuente.

h1 {
  font-size: 32px;
}

background-color: Define el color de fondo de un elemento.

div {
  background-color: lightgray;
}

Posicionamiento con float​

La propiedad float se utiliza para posicionar un elemento a la izquierda o derecha de su contenedor, permitiendo que otros elementos fluyan alrededor de él. Es útil para crear diseños de columnas o para alinear imágenes con texto.

La propiedad CSS flotante coloca un elemento en el lado izquierdo o derecho de su contenedor, lo que permite que el texto y los elementos en línea se ajusten a su alrededor. El elemento se elimina del flujo normal de la página, aunque sigue siendo parte del flujo (a diferencia del posicionamiento absoluto).

div {
  /* Valores */
  float: left;
  float: right;
  float: none;
  float: inline-start;
  float: inline-end;

  /* Values Globales */
  float: inherit;
  float: initial;
  float: revert;
  float: revert-layer;
  float: unset;
}

Fondo (Background)​

La propiedad background-color establece el color de fondo de un elemento.

CSS
div {
  background-color: lightblue;
}

Fuentes​

font-family: Define la fuente del texto.

CSS
p {
  font-family: Arial, sans-serif;
}

font-size: Define el tamaño de la fuente.

CSS
h1 {
  font-size: 24px;
}

font-weight: Define el grosor de la fuente.

CSS
strong {
  font-weight: bold;
}

Texto​

text-align: Alinea el texto horizontalmente.

CSS
h2 {
  text-align: center;
}

text-decoration: Añade decoraciones al texto, como subrayado.

CSS
a {
  text-decoration: none;
}

text-transform: Controla la capitalización del texto.

CSS
p.uppercase {
  text-transform: uppercase;
}

Márgenes y Rellenos​

margin: Establece el espacio exterior alrededor de un elemento.

CSS
div {
  margin: 20px;
}

padding: Establece el espacio interior dentro de un elemento.

CSS
div {
  padding: 10px;
}

Bordes​

border: Define el borde de un elemento.

CSS
p {
  border: 1px solid black;
}

border-radius: Define los bordes redondeados.

CSS
img {
  border-radius: 50%;
}

Dimensiones​

width: Establece el ancho de un elemento.

CSS
img {
  width: 100px;
}

height: Establece la altura de un elemento.

CSS
img {
  height: 100px;
}

Display y Visibilidad​

display: Controla cómo se muestra un elemento.

CSS
.block {
  display: block;
}

.inline {
  display: inline;
}

.none {
  display: none;
}

visibility: Controla si un elemento es visible o no.

CSS
.invisible {
  visibility: hidden;
}

Resumen​

Las propiedades básicas de CSS son esenciales para definir el estilo y la presentación de los elementos en una página web. Con estas propiedades, puedes controlar el color, tamaño, fondo, márgenes, rellenos y bordes de los elementos HTML, mejorando la experiencia del usuario y la estética del sitio web.

Recursos
Ejercicios

💻 Mete mano al código con estos desafíos simples: