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.
div {
background-color: lightblue;
}
Fuentes
font-family: Define la fuente del texto.
p {
font-family: Arial, sans-serif;
}
font-size: Define el tamaño de la fuente.
h1 {
font-size: 24px;
}
font-weight: Define el grosor de la fuente.
strong {
font-weight: bold;
}
Texto
text-align: Alinea el texto horizontalmente.
h2 {
text-align: center;
}
text-decoration: Añade decoraciones al texto, como subrayado.
a {
text-decoration: none;
}
text-transform: Controla la capitalización del texto.
p.uppercase {
text-transform: uppercase;
}
Márgenes y Rellenos
margin: Establece el espacio exterior alrededor de un elemento.
div {
margin: 20px;
}
padding: Establece el espacio interior dentro de un elemento.
div {
padding: 10px;
}
Bordes
border: Define el borde de un elemento.
p {
border: 1px solid black;
}
border-radius: Define los bordes redondeados.
img {
border-radius: 50%;
}
Dimensiones
width: Establece el ancho de un elemento.
img {
width: 100px;
}
height: Establece la altura de un elemento.
img {
height: 100px;
}
Display y Visibilidad
display: Controla cómo se muestra un elemento.
.block {
display: block;
}
.inline {
display: inline;
}
.none {
display: none;
}
visibility: Controla si un elemento es visible o no.
.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.
-
Selectores: Selectores CSS y propiedades básicas
-
Texto, Colores y Fondos: Estilización de Texto, Colores y Fondos
-
Más sobre propiedades: MDN - Referencia de propiedades CSS