Introducción
CSS, o Cascading Style Sheets, es un lenguaje de hojas de estilo utilizado para describir la presentación de documentos HTML y XML. En otras palabras, CSS nos permite controlar cómo se ve nuestro sitio web. Con CSS, podemos cambiar colores, fuentes, tamaños, diseños y mucho más.
Selección de elementos
Antes de comenzar a escribir estilos CSS, es importante saber cómo seleccionar los elementos HTML que deseamos afectar. Hay varias formas de seleccionar elementos en CSS, pero las más comunes son:
- Por tipo de elemento:
p,h1,div, etc. - Por clase:
.mi-clase - Por ID:
#mi-id - Por atributo:
[atributo="valor"]
Propiedades CSS
Las propiedades CSS se utilizan para cambiar la apariencia de los elementos seleccionados. Algunas de las propiedades CSS más comunes son:
color: establece el color del texto.font-family: establece la fuente utilizada para el texto.font-size: establece el tamaño de la fuente.background-color: establece el color de fondo del elemento.padding: establece el espacio entre el contenido del elemento y su borde.margin: establece el espacio entre el elemento y otros elementos.border: establece el borde del elemento.
Hay muchas más propiedades CSS, pero estas son algunas de las más importantes.
Sintaxis CSS
La sintaxis de CSS es bastante sencilla. Primero seleccionamos el elemento que queremos afectar y luego escribimos las propiedades que deseamos aplicar. Por ejemplo:
cssp {
color: red;
font-family: Arial;
font-size: 18px;
}
En este ejemplo, estamos seleccionando todos los elementos p y cambiando su color a rojo, su fuente a Arial y su tamaño a 18 píxeles.
Hojas de estilo externas
Es común colocar los estilos CSS en un archivo separado, en lugar de ponerlos directamente en el documento HTML. Para hacer esto, creamos un archivo CSS separado y lo enlazamos en el documento HTML usando la etiqueta link. Por ejemplo:
html<head>
<link rel="stylesheet" href="estilos.css">
</head>
En este ejemplo, estamos enlazando un archivo CSS llamado estilos.css.
Resumen
CSS es un lenguaje de hojas de estilo que nos permite controlar la apariencia de nuestros sitios web. Podemos seleccionar elementos HTML y aplicar propiedades CSS para cambiar su color, fuente, tamaño, diseño y mucho más. Es importante recordar que podemos escribir nuestros estilos directamente en el documento HTML o en un archivo CSS separado enlazado al documento HTML.
Ejemplos Prácticos
Cambiar el color del texto
cssp {
color: blue;
}
En este ejemplo, estamos seleccionando todos los elementos p y cambiando su color de texto a azul.
Cambiar el tamaño de la fuente
cssh1 {
font-size: 36px;
}
En este ejemplo, estamos seleccionando todos los elementos h1 y cambiando su tamaño de fuente a 36 píxeles.
Cambiar el color de fondo
cssbody {
background-color: #f2f2f2;
}
En este ejemplo, estamos seleccionando el elemento body y cambiando su color de fondo a un gris claro.
Agregar bordes
cssimg {
border: 2px solid black;
}
En este ejemplo, estamos seleccionando todos los elementos img y agregando un borde de 2 píxeles de ancho, sólido y negro alrededor de cada imagen.
Cambiar el margen
cssdiv {
margin: 20px;
}
En este ejemplo, estamos seleccionando todos los elementos div y agregando un margen de 20 píxeles alrededor de cada uno.
Aplicar estilos a una clase
css.mi-clase {
color: green;
font-size: 24px;
}
En este ejemplo, estamos seleccionando todos los elementos que tienen la clase mi-clase y cambiando su color de texto a verde y su tamaño de fuente a 24 píxeles.
Aplicar estilos a un ID
css#mi-id {
background-color: yellow;
}
En este ejemplo, estamos seleccionando el elemento que tiene el ID mi-id y cambiando su color de fondo a amarillo. Es importante recordar que los IDs deben ser únicos en todo el documento HTML.
Si quieres conocer mas de HTML mira el curso básico y el curso avanzado de HTML.
También tienes mas información en la documentación oficial aquí.
