El acrónimo CSS significa "hojas de estilo en cascada". CSS se utiliza para diseñar sitios web y aplicaciones que se utilizan en todos los dispositivos. La hoja de estilo se usa comúnmente junto con HTML y un lenguaje de programación front-end como JavaScript.

CSS se puede implementar de tres formas: en línea, interna o externamente. Aunque el CSS externo es el enfoque recomendado, hay casos en los que los dos métodos de implementación restantes pueden ser más prácticos.

En este artículo del tutorial, aprenderá todos los conceptos básicos de CSS para comenzar a crear aplicaciones hoy mismo.

Cuándo utilizar los diferentes métodos de implementación de CSS

Inline CSS es el método ideal de implementación cuando la intención es incluir solo una o dos preferencias de estilo en una página web, junto con algunos otros casos específicos. El método CSS en línea utiliza el estilo palabra clave junto con una propiedad CSS para lograr un resultado específico.

Si tiene la intención de cambiar el color de un solo encabezado a rojo, entonces CSS en línea podría ser una buena opción. Un caso de nicho, como se mencionó anteriormente, sería cuando se crean diseños HTML que consisten principalmente en tablas (una práctica desactualizada).

Ejemplo de uso de CSS en línea

Encabezamiento principal

La línea de código de arriba mostrará el texto "Título principal" revestido en color rojo. Esta es posiblemente una de las únicas razones prácticas para usar CSS en línea porque generalmente solo hay una h1 elemento en una página web determinada.

Si pretendes cubrir todo h2 elementos en una página web con el color amarillo. Tendrás que usar CSS estilo palabra clave, junto con la color propiedad y su valor (amarillo) en cada elemento. Sin embargo, una forma más eficaz de realizar esta tarea es utilizar CSS interno.

Uso de ejemplo de CSS interno

Colocando el código de arriba en el etiqueta de su archivo HTML se asegurará de que todos los h2 los elementos de ese archivo están recubiertos de amarillo. El CSS interno está separado del código HTML, y esto hace que el método sea más eficiente porque facilita la orientación a varios grupos de elementos.

Entonces, ¿por qué el método de implementación de CSS externo sigue siendo el enfoque más recomendado? Separación de intereses. Con CSS externo, su código CSS está completamente separado de su código HTML, lo que garantiza la escalabilidad para proyectos grandes y hace que el proceso de prueba sea más eficiente.

Ejemplo de uso de CSS externo

Insertando la línea de código arriba en el etiqueta de su archivo HTML facilitará el estilo de su página web utilizando el método CSS externo. El único aspecto del código anterior que cambiará es el valor asignado a la href propiedad, que siempre debe ser el nombre del archivo CSS (incluida la extensión .css).

Relacionado: ¿Qué son las hojas de estilo en cascada y para qué se utiliza CSS? Con su archivo CSS vinculado a su documento HTML, ahora puede comenzar a escribir código CSS en su archivo CSS. En este punto, la única diferencia entre el ejemplo de CSS interno anterior y el CSS externo es la estilo etiqueta. Por lo tanto, insertar el siguiente código en un archivo CSS producirá el mismo resultado que el ejemplo de CSS interno anterior.

h2 {
color amarillo;
}

Explorando la estructura básica de CSS

La declaración CSS básica contiene siete elementos esenciales, como puede ver en el siguiente ejemplo. Todos trabajan juntos para lograr un conjunto específico de preferencias de estilo.

El selector

En una declaración CSS, un selector puede ser un identificación, a clase, un elemento, o en algunos casos especiales, un pseudo-selector. En la estructura CSS sobre el a El elemento se utiliza como selector, lo que significa que todos los enlaces de una página web se mostrarán en rojo. Básicamente, el propósito del selector es identificar los elementos a los que se les debe aplicar estilo.

Inicio y fin de la declaración

El inicio y el final de la declaración son importantes porque encierran todas las preferencias de estilo que se aplican a un selector específico. Ambos elementos están representados por un par de llaves abiertas y cerradas. Una buena forma de recordar utilizar un inicio de declaración o un final de declaración es recordar que si tiene una llave abierta, debería haber una llave cerrada correspondiente, y viceversa.

La propiedad

La propiedad CSS en una estructura de declaración puede ser cualquiera de más de cien tipos de propiedad diferentes. El tipo de propiedad utilizado en la estructura CSS anterior es color y esta propiedad se orienta al texto de una página web. Si desea obtener más información, consulte nuestro lista completa de propiedades CSS y su uso.

El separador de propiedad / valor

Aunque pueda parecer pequeño e insignificante, el separador de propiedad / valor es tan importante como todos los demás elementos de la estructura CSS. Si alguna vez se olvida este elemento, no se ejecutará la declaración CSS completa.

El valor

El valor de la propiedad CSS representa el estilo exacto que le gustaría aplicar a una propiedad determinada. Los valores que están disponibles para su uso dependen del tipo de propiedad. Por ejemplo, la propiedad utilizada en la estructura anterior es color, lo que significa que solo hay un tipo de valor que se puede aplicar a esta propiedad, un nombre de color. A color El valor se puede presentar en una de cuatro formas: un valor de palabra (como en el ejemplo anterior), un valor hexadecimal, un valor HSL (tono, saturación, luminosidad) o un valor RGB (rojo, verde, azul).

El separador de declaraciones

El separador de declaraciones indica que se encuentra al final de una declaración de estilo específica. En la estructura anterior, solo hay un separador de declaraciones, pero puede haber más. Todo depende de la cantidad de propiedades CSS que pretenda utilizar en un determinado clase, identificación, o elemento.

¿Qué son las identificaciones y las clases?

identificadores y clases juegan un papel fundamental en el proceso de estilo CSS. Como elementos HTML, CSS identificadores y clases se utilizan como selectores en una declaración CSS. Sin embargo, clases y identificadores tiene prioridad sobre un elemento HTML.

La regla general en CSS es que la última declaración de estilo que agregue a un archivo anulará las que estaban allí antes. Por lo tanto, si hay dos declaraciones con un h2 selector en un archivo CSS, la declaración que se agregó en último lugar anula las que estaban allí antes.

Sin embargo, si esto h2 elemento tiene un identificación que se utiliza como selector en una declaración CSS, independientemente de su posición (antes o después) en una declaración CSS que tiene la h2 elemento como su selector, la preferencia de estilo en el identificación La declaración siempre tendrá prioridad sobre el elemento. En resumen, un identificación anulará otros selectores de estilo.

Es importante recordar que en una declaración CSS, identificadores comience con una señal numérica y las clases comiencen con un punto final. La diferencia más significativa entre un identificación y un clase es eso un identificación es único, mientras que un clase se puede duplicar. Por ejemplo, una colección de similares las etiquetas se pueden dar lo mismo clase nombre; sin embargo, el identificación de cada La etiqueta debe ser única.

Explorando los diferentes tipos de selectores

Hay tres tipos básicos de selectores: único, múltiple y anidado. Hasta ahora, este artículo ha cubierto ampliamente los selectores individuales.

Al usar CSS, habrá casos en los que le gustaría diferentes elementos en diferentes posiciones en un página web para tener un estilo similar que sea diferente del estilo general aplicado a toda la página web. En estos casos, será útil saber cómo utilizar varios selectores.

Ejemplo de plantilla HTML básica

Bienvenido

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  ¡Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Sobre

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  ¡Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Título

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? En ad laborum illo inventore quos est dolores
impedir fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, mínimos, magni en iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?







Título

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? En ad laborum illo inventore quos est dolores
impedir fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, mínimos, magni en iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?

Si observa detenidamente el archivo HTML anterior, verá la dinámica que existe entre identificadores y clases. En referencia al archivo anterior, si desea aplicar el mismo estilo al sobre sección y los artículos en la página web solamente, el siguiente código CSS logrará esto.

Ejemplo de uso de selectores múltiples

#Acerca de, .content {
color blanco;
color de fondo: cian oscuro;
}

Cuando utilice varios selectores, siempre debe separar cada selector con una coma. El ejemplo anterior tiene dos selectores, un identificación y un clase. Si la coma que sigue al sobreidentificación falta, la declaración CSS no se ejecutará.

Volviendo al ejemplo de plantilla HTML básica anterior, hay dos etiquetas presentes, una en la sección de bienvenida y la otra en la sección Acerca de. Si su objetivo es apuntar solo a uno de estos etiquetas, un selector anidado debería ser su método de referencia.

Uso de ejemplos de selectores anidados

#Bienvenido p span {
color rojo;
}

El selector anidado de arriba contiene un identificación y dos elementos HTML. Como puede ver en el ejemplo anterior, un selector anidado le brinda la capacidad de apuntar a un elemento específico dentro de un grupo.

Por lo tanto, solo el lapso sección en el etiqueta de la div con el identificación de bienvenida se recubrirá de color rojo.

Ya sea que esté utilizando un lenguaje de estilo como CSS o un lenguaje de programación, es absolutamente necesario que sepa cómo escribir un comentario. Los comentarios son esenciales en proyectos de nivel empresarial donde varios desarrolladores trabajan juntos, y también es útil cuando se realiza un desarrollo a pequeña escala.

Un comentario CSS contiene dos barras diagonales, dos asteriscos y una sección de comentarios.

/ * Así es como se escribe un comentario de una sola línea en CSS * /

/*
Así es como escribes
un comentario de varias líneas
en CSS
*/

¿Que sigue?

Este artículo le proporciona los componentes fundamentales de CSS. Ahora puede usar una identificación:

• Cualquiera de los tres métodos de implementación de CSS
• Todos los elementos en una declaración CSS
• Los tres tipos básicos de selectores
• Un comentario CSS

Sin embargo, esto es solo el comienzo. CSS tiene varios marcos que le ayudarán a desarrollar una mejor comprensión del idioma. El único desafío es decidir cuál es mejor para ti.

Tailwind CSS vs. Bootstrap: ¿Cuál es un mejor marco?

Al elegir un marco CSS, es importante encontrar el que cumpla con sus requisitos.

Leer siguiente

Sobre el Autor