10 ejemplos simples de código CSS que puedes aprender en 10 minutos

¿Necesitas ayuda con CSS? Pruebe estos ejemplos básicos de código CSS y aplíquelos a sus propias páginas web.

Una vez que comience a aprender HTML, es posible que le interese agregar más impacto visual a sus páginas web. CSS es la mejor manera. Con CSS, puede aplicar cambios a toda la página sin tener que depender de los estilos en línea.

A continuación se muestran algunos ejemplos simples de CSS que le muestran cómo realizar algunos cambios de estilo básicos en una página web.

1. Código CSS básico para formato de párrafo básico

Diseñar con CSS significa que no tiene que especificar estilos cada vez que crea un elemento. Puedes decir "todos los tacones deben tener este estilo en particular" y listo.

Suponga que desea que cada párrafo (p, una de esas etiquetas HTML que todos deberían conocer) sea un poco más grande de lo habitual. Y con texto gris oscuro, no negro.

Atados juntos: Hoja de trucos HTML

El código CSS para esto es:

p { font-size: 120%; color: dimgray; }

¡fácil! Ahora, cuando el navegador muestra el párrafo, el texto hereda el tamaño (normalmente 120 %) y el color ("gris oscuro").

Si tiene curiosidad acerca de qué colores de texto sin formato están disponibles, consulte esto de Mozilla Lista de colores CSS.

2. Ejemplo de CSS para cambiar mayúsculas y minúsculas

¿Quiere crear nombres para párrafos que deban usar versalitas? Un ejemplo de CSS sería:

p.smallcaps { font-variant: small-caps; }

Para hacer que los párrafos estén completamente en minúsculas, use un marcado HTML ligeramente diferente. Se parece a esto:

pYour paragraph here./p

Agregar un punto y un nombre de clase a un elemento indica el subtipo de ese elemento, que está definido por la clase. Puede hacer esto con texto, imágenes, enlaces y cualquier otra cosa.

Si desea cambiar un conjunto de texto a un caso específico, use el siguiente ejemplo de código CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

El último escribe en mayúscula la primera letra de cada oración.

3. CSS simple para cambiar el color del enlace

Los cambios de estilo no se limitan a los párrafos. Se pueden asignar cuatro colores diferentes a un enlace: color predeterminado, color de acceso, color flotante y color activo (el color que aparece cuando hace clic en él). Use este código CSS de muestra:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Para los enlaces, cada "a" va seguida de dos puntos, no de un punto.

Cada una de estas declaraciones cambia el color del enlace en un contexto específico. No es necesario cambiar la categoría del enlace para cambiar el color.

4. Utilice este ejemplo de CSS para eliminar el subrayado de los enlaces

Si bien el texto subrayado indica claramente un enlace, a veces se ve mejor sin el subrayado. Esto se hace a través de la propiedad "decoración de texto". Este ejemplo de CSS muestra cómo eliminar el subrayado de un enlace:

a { text-decoration: none; }

Cualquier cosa marcada con un enlace ("a") no permanecerá subrayada. ¿Quieres subrayarlo cuando el usuario pasa el mouse sobre él? Solo agrega:

a:hover { text-decoration: underline; }

También puede agregar esta decoración de texto a los enlaces activos para asegurarse de que el subrayado no desaparezca cuando se haga clic en el enlace.

5. Usa el código CSS para crear botones de enlace

¿Te gustaría llamar más la atención sobre tus enlaces? Los botones de enlace son una excelente manera de hacer esto. Se necesitan algunas líneas más para esto:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Expliquemos este ejemplo de código CSS.

La inclusión de los cuatro estados de enlace garantiza que el botón no desaparezca cuando el usuario mueva el mouse o haga clic en él. También puede establecer varios parámetros para los enlaces activos y flotantes, p. B. Cambiar el botón o el color del texto.

El color de fondo se establece con background-color y el color del texto con color. El relleno define el tamaño del cuadro: el texto ocupa 10 píxeles verticalmente y 25 píxeles horizontalmente.

La alineación del texto garantiza que el texto aparezca en el centro del botón y no a los lados. Como en el ejemplo anterior, la decoración del texto elimina el subrayado.

El código CSS "display: inline-block" es un poco complicado. En resumen, puede usarlo para establecer la altura y el ancho de un objeto. También asegura que una nueva línea comienza cuando se pega.

6. Código de ejemplo CSS para crear un cuadro de texto

Un párrafo simple no es muy emocionante. Si desea que los elementos de la página se destaquen, es posible que deba agregar bordes. He aquí cómo hacerlo con una simple cadena de código CSS:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Éste es muy simple. Crea un borde púrpura sólido de 5 px de ancho alrededor de todos los párrafos importantes de la clase. Para que un párrafo herede estas propiedades, simplemente declárelo así:

pYour important paragraph here./p

Esto funciona independientemente del tamaño del párrafo.

Puede aplicar muchos estilos de marco diferentes; intente punteado o doble en lugar de sólido. Mientras tanto, el ancho puede ser "fino", "medio" o "grueso". El código CSS puede incluso definir el grosor de cada cuadro individualmente, así:

border-width: 5px 8px 3px 9px;

Esto da como resultado un borde superior de 5 píxeles, un borde derecho de 8 píxeles, un borde inferior de 3 píxeles y un borde izquierdo de 9 píxeles.

7. Elementos centrales con código CSS simple

Para una tarea común, usar código CSS para centrar un elemento es bastante contradictorio. Pero una vez que lo hayas hecho varias veces, se vuelve mucho más fácil. Tienes diferentes maneras de enfocar las cosas.

Para elementos de bloque (generalmente imágenes), use el atributo de borde:

.center { display: block; margin: auto; }

Esto garantiza que el elemento aparezca como un bloque y que los márgenes de cada lado se establezcan automáticamente. Incluso puede agregar "margen: automático" a la etiqueta img si desea centrar todas las imágenes en una página específica:

img { margin: auto; }

Para ver por qué funciona, consulte Modelo de caja CSS explicado en W3C.

Pero, ¿y si quieres centrar el texto con CSS? Usa este ejemplo de CSS:

.centertext { text-align: center; }

¿Desea utilizar la clase centertext para centrar el texto en un párrafo? Simplemente agregue la clase a la etiqueta p:

pThis text will be centered./p

8. Ejemplo de CSS para personalizar el relleno

El relleno de un elemento especifica cuánto espacio debe haber en cada lado. Por ejemplo, si agrega 25 píxeles de relleno en la parte inferior de la imagen, el siguiente texto se desplazará 25 píxeles hacia abajo. Se pueden rellenar muchos elementos, no solo imágenes.

Suponga que desea que cada imagen ocupe 20 píxeles a la izquierda y a la derecha y 40 píxeles en la parte superior e inferior. La ejecución más básica del código CSS es:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Sin embargo, hay una declaración CSS más corta que muestra toda esta información en una línea:

img { padding: 40px 25px 40px 25px; }

Esto establece el relleno superior, derecho, inferior e izquierdo en los números correctos. Como solo se usan dos valores (40 y 25), puedes hacerlo más corto:

img { padding: 40px 25px }

Si solo usa dos valores, el primer valor se establecerá hacia arriba y hacia abajo, mientras que el segundo valor se establecerá hacia la izquierda y hacia la derecha.

9. Marque las filas de la tabla con codificación CSS

El código CSS hace que la tabla se vea mucho mejor que la cuadrícula predeterminada. Es fácil agregar colores, ajustar bordes y hacer que sus hojas de cálculo respondan a las pantallas de los dispositivos móviles. Este sencillo ejemplo de CSS le muestra cómo resaltar las filas de la tabla cuando pasa el mouse sobre ellas.

tr:hover { background-color: #ddd; }

Si ahora mueve el mouse sobre una celda de la tabla, la línea cambia de color. Para ver más cosas geniales que puedes hacer, consulta Hermosas tablas CSS en páginas W3C.

10. Ejemplo de CSS para convertir imágenes entre transparentes y opacas

El código CSS también puede ayudarte a hacer cosas geniales con las imágenes. Aquí hay un ejemplo de CSS que muestra imágenes por debajo de la opacidad total, haciéndolas parecer ligeramente "blancas". Cuando pasa el cursor sobre las imágenes, son completamente opacas:

img { opacity: 0.webp; filter: alpha(opacity=50); }

La propiedad Filter funciona igual que Opacity, pero Internet Explorer 8 y versiones anteriores no reconocieron la medida de opacidad. Para navegadores más antiguos, es mejor incluirlo.

Ahora que las imágenes son ligeramente transparentes, puede hacerlas completamente opacas al pasar el mouse:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 ejemplos de CSS con código fuente

Estos ejemplos de código CSS deberían brindarle una mejor comprensión de cómo funciona CSS. Plantilla CSS Puede ayudar, pero comprender los elementos originales es crucial.

Echa un vistazo a estos 10 ejemplos de código CSS simples:

1. formato de párrafo simple
2. Cambiar caso
3. Cambiar el color del enlace
4. Quitar enlace subrayado
5. Crear un botón de enlace
6. Crear un cuadro de texto
7. Centrar el elemento de alineación
8. Ajustar acolchado
9. Resaltar fila de tabla
10. Hacer la imagen opaca

Si los mira de nuevo, notará varios patrones que se pueden aplicar al código futuro. Entonces sabes que realmente has comenzado a convertirte en un gurú de CSS. Pero recordarlo puede ser difícil. Puede marcar esta página para referencia futura.