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.

Ejercicios

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