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

Una vez que haya empezado a utilizar HTML 17 Ejemplos de códigos HTML simples que puede aprender en 10 minutos 17 Ejemplos de códigos HTML simples que puede aprender en 10 minutos Si conoce las siguientes 17 etiquetas HTML (y las pocas que las acompañan), Podrá crear una página web básica desde cero o modificar el código creado por una aplicación como ... Leer más, probablemente le interese agregar más poder a sus páginas web. CSS es la mejor manera de hacerlo. CSS le permite aplicar cambios en toda su página sin tener que usar muchos estilos de HTML en línea 9 Errores que no debe cometer al crear una página web Errores que no debe cometer al crear una página web A continuación, se describen los siguientes errores de codificación HTML Cree, pero si los elimina antes que después, su página se verá mejor, será más fácil de mantener y funcionará de la manera que desee. Lee mas .

Repasaremos cómo crear una hoja de estilo en línea para que pueda practicar sus habilidades de CSS, y luego veremos 10 ejemplos simples que le mostrarán cómo hacer algunas cosas básicas. A partir de ahí, tu imaginación es el límite.!

Si quieres una introducción un poco más técnica, asegúrate de revisar 5 Baby Steps to Learning CSS y Conviértete en un Kick-Ass CSS Sorcerer. un CSS Sorcerer de Kick-Ass CSS es el cambio más importante que las páginas web han visto en la última década y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más .

Hoja de estilo en línea

Cada documento HTML contiene una etiqueta. Esa sección principal es donde va su hoja de estilos CSS en línea. Esto es lo que se verá:

 Todas tus declaraciones de CSS. 

Pon eso en la parte superior de tu documento, rellénalo con tu CSS y listo..

1. Formato de párrafo fácil

Lo bueno del estilo con CSS es que no tiene que especificar un estilo cada vez que crea un elemento. Solo puedes decir “Todos los párrafos deben tener este estilo particular” y eres bueno para ir Aquí hay un ejemplo de cómo podrías hacer eso..

Digamos que quieres cada párrafo (eso es todo con una

Etiqueta HTML Las 11 etiquetas HTML principales Todos los bloggers y propietarios de sitios web deben saber Las 11 etiquetas HTML que todos los bloggers y propietarios de sitios web deben saber La World Wide Web conoce muchos idiomas y está codificada en varios idiomas diferentes. Sin embargo, el único idioma que se puede encontrar en todas partes y ha existido desde la invención de las páginas web es ... Leer más) en su página para ser un poco más grande de lo habitual. Y gris oscuro, en lugar de negro. Así es como harías eso con CSS:

p tamaño de letra: 120%; color: dimgray; 

Eso es todo al respecto. Ahora, siempre que el navegador muestre un

párrafo, el texto heredará el tamaño (120 por ciento de lo normal) y el color (“dimgray”).

Si tiene curiosidad por saber qué colores de texto sin formato puede usar, consulte esta lista de colores CSS de Mozilla.

2. Cambiar el caso de la letra

Bien, ahora que hemos visto cómo hacer un cambio en cada párrafo, veamos cómo podemos ser un poco más selectivos. Vamos a crear una designación para los párrafos que deberían estar en minúsculas. Así es como lo haríamos:

p.smallcaps font-variant: small-caps; 

Para hacer un párrafo que esté completamente en minúsculas, usaremos una etiqueta HTML ligeramente diferente. Esto es lo que parece:

Tu parrafo aqui.

Como puede ver, agregar un punto y un nombre de clase a cualquier elemento específico en CSS especifica un subtipo de ese elemento definido por una clase. Puedes hacer esto con texto, imágenes, enlaces y casi cualquier otra cosa..

Si desea cambiar el caso de un conjunto de texto a un caso específico, puede usar estas líneas CSS:

transformación de texto: mayúsculas; transformación de texto: minúsculas; transformación de texto: capitalizar;

La última escribe con mayúscula la primera letra de cada oración..

3. Cambiar los colores del enlace

Intentemos cambiar el estilo de algo que no sea un párrafo completo. Hay cuatro colores diferentes a los que se puede asignar un enlace: su color estándar, su color visitado, su color de desplazamiento y su color activo (que se muestra mientras hace clic en él). Aquí es cómo podemos cambiar esos:

a: link color: gris;  a: visitó color: verde;  a: hover color: rebeccapurple;  a: activo color: verde azulado; 

Tenga en cuenta que cada “una” es seguido por dos puntos, no un punto.

Cada una de esas declaraciones cambia el color de un enlace en un contexto específico. No es necesario cambiar la clase de un enlace para que cambie de color. Todo estará determinado por el usuario y el estado del enlace..

4. Eliminar enlaces subrayados

Si bien el texto subrayado indica claramente un enlace, a veces parece mejor descartar ese subrayado. Esto se logra con la “decoracion de texto” atributo. Así es como nos deshacemos de los subrayados en los enlaces:

a texto-decoración: ninguno; 

Cualquier cosa con el enlace (“una”) la etiqueta permanecerá sin subrayar. ¿Quieres subrayarlo cuando el usuario se cierne sobre él? Solo agrega esto a continuación:

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. Hacer un botón de enlace

Si desea atraer más atención a su enlace, usar un botón de enlace es una excelente manera de hacerlo. Este requiere algunas líneas más, pero las repasaremos individualmente:

a: enlace, a: visitado, a: desplazamiento, a: activo fondo-color: verde; color blanco; relleno: 10px 25px; text-align: center; texto-decoración: ninguno; pantalla: bloque en línea; 

Al incluir los cuatro estados de enlace, nos aseguramos de que el botón no desaparezca cuando un usuario lo desplace o haga clic en él. También puede configurar diferentes parámetros para los enlaces activos y activos, como cambiar el color del botón o del texto, para agregar un poco de pop.

El color de fondo se establece con el color de fondo y el color del texto con color. El relleno define el tamaño del cuadro: el texto se rellena con 10 px verticalmente y 25 px horizontalmente. La alineación de texto garantiza que el texto se muestre en el centro del botón, en lugar de hacerlo en un lado. La decoración del texto, como vimos en el último ejemplo, elimina el subrayado.

“display: inline-block” Es un poco más complicado. En resumen, le permite establecer la altura y el ancho del objeto, y asegura que comience una nueva línea cuando se inserta.

6. Crea un cuadro de texto

Un párrafo simple no es muy emocionante. Si desea resaltar su llamado a la acción u otro elemento en su página, es posible que desee colocar un borde alrededor de ella. Aquí está cómo hacer eso con una cadena de texto:

p.important border-style: solid; ancho del borde: 5px; color del borde: morado; 

Este es bastante sencillo. Crea un borde púrpura sólido, de 5 píxeles de ancho, alrededor de cualquier párrafo de clase importante. Para hacer que un párrafo herede estas propiedades, simplemente declare esto:

Tu párrafo importante aquí.

Esto funcionará independientemente del tamaño de su párrafo; una sola línea obtendrá un borde del ancho de la página, una línea de alto y un párrafo más largo estará rodeado por un borde más grande.

Hay muchos estilos diferentes de bordes que puedes aplicar; en lugar de “sólido,” tratar “punteado” o “doble.” Y el ancho puede ser “Delgado,” “medio,” o “grueso.” Incluso puedes definir el grosor de cada borde individualmente, de esta manera:

ancho del borde: 5px 8px 3px 9px;

Eso da como resultado un borde superior de 5 píxeles, un borde derecho de 8, una parte inferior de 3 y un tamaño de borde izquierdo de 9 píxeles.

7. Alinear al centro los elementos

Para una tarea muy común, esta es una cosa sorprendentemente poco intuitiva de hacer con CSS. Una vez que lo has hecho unas cuantas veces, se vuelve mucho más fácil. Hay un par de maneras diferentes para centrar las cosas..

Para un elemento de bloque (generalmente una imagen), usaremos el atributo de margen:

.centro pantalla: bloque; margen: auto; 

Esto garantiza que el elemento se muestre como un bloque, y que el margen en cada lado se establezca automáticamente (lo que los hace iguales). Si desea centrar todas las imágenes en una página determinada, incluso puede agregar “margen: auto” a la etiqueta img:

img margen: auto; 

Para saber por qué funciona de esta manera, consulte la explicación del modelo de caja de CSS en W3C. Aquí hay una versión corta, gráfica:

Pero ¿y si queremos centrar el texto? CSS tiene un método específico para hacer eso:

.texto central text-align: center; 

Si queremos usar el “texto central” clase para centrar el texto en un párrafo dado, todo lo que tenemos que hacer es agregar esa clase a la

etiqueta:

Este texto estará centrado..

Recordar esos diferentes pasos, sin embargo, es otra cuestión. Es posible que desee marcar esta página.

8. Ajuste de 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 una imagen, el siguiente texto se empujará 25 píxeles hacia abajo. Muchos elementos pueden tener relleno, pero usaremos una imagen para un ejemplo aquí.

Digamos que desea que cada imagen tenga 20 píxeles de relleno en los lados izquierdo y derecho, y 40 píxeles en la parte superior e inferior. Hay varias formas de hacerlo. Lo más básico:

img padding-top: 40px; derecho de relleno: 25px; parte inferior de relleno: 40px; relleno-izquierda: 25px; 

Hay una mano corta que podemos usar para presentar toda esta información:

img relleno: 40px 25px 40px 25px; 

Esto establece los rellenos superior, derecho, inferior e izquierdo en el número correcto. Pero podemos hacerlo aún más corto:

img relleno: 40px 25px

Cuando se usan solo dos valores, el primer valor se establece para la parte superior e inferior, mientras que el segundo es izquierdo y derecho.

9. Resaltar filas de la tabla

CSS puede hacer mucho para que sus tablas se vean realmente bien. Agregar colores, ajustar los bordes y hacer que su mesa responda a las pantallas móviles es todo fácil. Veremos un solo efecto genial aquí: resaltar las filas de la tabla cuando pasas el mouse sobre ellas.

Aquí está el código que necesitarás para eso:

tr: hover background-color: #ddd; 

Ahora, cada vez que pases el mouse sobre una celda de la tabla, esa fila cambiará de color. Para ver algunas de las otras cosas geniales que puedes hacer, visita la página W3C en las elegantes tablas CSS.

10. Cambiando imágenes entre transparente y opaco

CSS puede ayudarte a hacer cosas geniales con imágenes, también. Por ejemplo, puede mostrar imágenes con una opacidad inferior a la total (aparecen ligeramente “blanqueado”) y llévalos a la opacidad total cuando pases el mouse sobre ellos Así es como lo haremos:

img opacidad: 0.5; filtro: alfa (opacidad = 50); 

los “filtrar” atributo hace lo mismo que “opacidad,” pero Internet Explorer 8 y versiones anteriores no reconocen la medición de opacidad, por lo que es una buena idea incluirla.

Ahora que las imágenes son ligeramente transparentes, las llevaremos a un aspecto totalmente opaco con un mouseover:

img: hover opacidad: 1.0; filtro: alfa (opacidad = 100); 

Conviértete en un maestro de CSS

Con estos ejemplos de código CSS, deberías tener una mejor idea de cómo funciona CSS. Una vez que haya revisado todos ellos, notará una serie de patrones que puede aplicar a otros códigos CSS. Aprenda HTML y CSS con estos tutoriales paso a paso Aprenda HTML y CSS con estos tutoriales paso a paso. CSS, y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee mas . Y ahí es cuando sabes que realmente has comenzado a convertirte en un maestro de CSS..

Y si todo esto suena demasiado complicado, recuerde que simplemente toma algunas plantillas CSS. 11 Sitios de plantillas CSS: ¡No comience desde cero! 11 sitios de plantillas CSS: ¡No empieces desde cero! Hay miles de plantillas CSS gratuitas disponibles en línea, todas abarcando las tendencias y tecnologías de diseño moderno. Puede usarlos en su forma original o personalizarlos para que sean suyos. Leer más y modificarlos..

¿Qué haces con CSS? ¿Qué ejemplos te gustaría ver en el futuro? Comparte tus pensamientos en los comentarios a continuación!

Explorar más sobre: ​​CSS, diseño web.