Introducción a las hojas de estilo en cascada (CSS)
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 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 la palabra clave style 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
<h1 style="color: red;">Main Heading</h1>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 un elemento h1 en una página web determinada.
Si tiene la intención de cubrir todos los elementos h2 en una página web con el color amarillo. Deberá utilizar la palabra clave de estilo CSS, junto con la propiedad de color 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
<style>
h2{
color: yellow;
}
</style>
Colocar el código anterior en la etiqueta <head> de su archivo HTML asegurará que todos los elementos h2 en 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
<link rel="stylesheet" href="css_file_name">Insertar la línea de código anterior en la etiqueta <head> de su archivo HTML facilitará el estilo de su página web usando el método CSS externo. El único aspecto del código anterior que cambiará es el valor asignado a la propiedad href , que siempre debe ser el nombre del archivo CSS (incluida la extensión .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 etiqueta de estilo . 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: yellow;
}
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 id , una clase , un elemento o, en algunos casos especiales, un pseudo-selector. En la estructura CSS por encima del elemento se utiliza como selector, lo que significa que todos los enlaces de una página web serán revestidos 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 el color y esta propiedad se dirige al texto de una página web. Si desea obtener más información, consulte nuestra 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 el color , lo que significa que solo hay un tipo de valor que se puede aplicar a esta propiedad, un nombre de color. Un valor de color 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 declaración, pero puede haber más. Todo depende de la cantidad de propiedades CSS que pretenda usar en una clase , id o elemento específico.
¿Qué son las identificaciones y las clases?
Los identificadores y las clases juegan un papel fundamental en el proceso de estilo CSS. Al igual que los elementos HTML, los identificadores y las clases de CSS se utilizan como selectores en una declaración de CSS. Sin embargo, las clases y los identificadores tienen 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 selector h2 en un archivo CSS, la declaración que se agregó en último lugar anula las que estaban allí antes.
Sin embargo, si este elemento h2 tiene un id que se usa como selector en una declaración CSS, independientemente de su posición (antes o después) en una declaración CSS que tiene el elemento h2 como selector, la preferencia de estilo en la declaración id siempre será tiene prioridad sobre el elemento. En resumen, una identificación anulará otros selectores de estilo.
Es importante recordar que en una declaración CSS, los identificadores comienzan con un signo de número y las clases comienzan con un punto final. La diferencia más significativa entre una identificación y una clase es que una identificación es única, mientras que una clase se puede duplicar. Por ejemplo, una colección de etiquetas <div> similares puede recibir el mismo nombre de clase ; sin embargo, la identificación de cada etiqueta <div> 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 únicos.
Al usar CSS, habrá casos en los que le gustaría que diferentes elementos en diferentes posiciones en una página web tuvieran un estilo similar que es 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contianer">
<div class="siteInfor" id="Welcome">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>
<div class="siteInfor" id="About">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>
<div class="content" id="article-1">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit 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, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>
<div class="content" id="article-2">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit 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, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>
</div>
</body>
</html>
Si observa detenidamente el archivo HTML anterior, verá la dinámica que existe entre los identificadores y las clases . En referencia al archivo anterior, si desea aplicar el mismo estilo a la sección Acerca de y a los artículos de la página web únicamente, el siguiente código CSS lo logrará.
Ejemplo de uso de selectores múltiples
#About, .content{
color: white;
background-color: darkcyan;
}
Cuando utilice varios selectores, siempre debe separar cada selector con una coma. El ejemplo anterior tiene dos selectores, un id y una clase . Si falta la coma que sigue a about id , la declaración CSS no se ejecutará.
Volviendo al ejemplo de plantilla HTML básica anterior, hay dos etiquetas <span> presentes, una en la sección de bienvenida y la otra en la sección acerca de. Si su objetivo es apuntar solo a una de estas etiquetas <span> , un selector anidado debería ser su método de referencia.
Uso de ejemplos de selectores anidados
#Welcome p span{
color: red;
}
El selector anidado de arriba contiene una 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 la sección span en la etiqueta <p> del div con la identificación de bienvenida estará revestida de color rojo.
Cómo escribir un comentario en CSS
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.
Ejemplo de comentario de una sola línea CSS
/* This is how you write a single line comment in CSS */
Ejemplo de comentario de múltiples líneas CSS
/*
This is how you write
a multi-line comment
in 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.