--- title: "Introducción a CCS, hojas de estilo o Cascading Style Sheets (I)" description: "Valencia, 09/03/2022, G.B. (actualizado a 10 de marzo de 2022; 11:30 horas) He decidido iniciar un mini tutorial de CSS (Cascading Style Sheets). Iré mejorándolo y ampliándolo, poquito a poco......" url: https://indaga.net/introduccion-a-ccs-hojas-de-estilo-o-cascading-style-sheets-i/ date: 2022-03-10 modified: 2022-04-06 author: "Directorio Indaga" image: https://indaga.net/wp-content/uploads/2022/03/css.webp categories: ["CSS", "Recursos y Utilidades"] tags: ["cascading style sheets", "css", "hojas estilo", "introduccion css", "que es css", "stylesheet", "tutorial css"] type: post lang: es --- # Introducción a CCS, hojas de estilo o Cascading Style Sheets (I) Valencia, 09/03/2022, G.B. (actualizado a 10 de marzo de 2022; 11:30 horas) He decidido iniciar un **mini tutorial de CSS** (*Cascading Style Sheets*). Iré mejorándolo y ampliándolo, poquito a poco… Cada cambio importante que haga lo reflejaré re publicando este pequeño artículo o post (incluiré la fecha de revisión). Me temo que  será bastante frecuente al principio! Queda pendientes varias cosas, como los **objetivos del mini tutorial**, **qué necesitaremos** y un** glosario o apéndice básico de CSS**, que será un página en vez de una entrada. También subiré los ejemplos para que podási verlos en linea y poder modificarlos localmente para un mejor aprendizaje. Imagino que eso será ya al final, por lo menos lo del glosario CSS. Bueno, no me entretengo más: aquí va el primer artículo: ## **Qué es CSS: una introducción** **CSS** (*Cascading Style Sheets* en inglés u **hojas de estilo en cascada** en castellano) es un **lenguaje de programación** que sirve para **controlar y modificar el aspecto** o presentación de **documentos electrónicos**, como por ejemplo el **lenguaje de marcado HTML**, utilizado para generar páginas web. Lo de ‘*en cascada*‘ significa que las propiedades CSS se ‘*heredan*‘ de elementos ‘*padres*‘ a ‘*hijos*‘, entre otras cosas… Os recomiendo para más adelante (ahora no) esta lectura para comprenderlo: **[Herencia y cascada](https://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html)**. Así, con** CSS** podemos separar los contenidos de su aspecto o presentación, tanto en cualquier pantalla (ordenador, móvil, etc.) como en impresión. **CSS** nos aporta propiedades para ampliar el lenguaje **HTML** en la representación visual de las páginas web (párrafos, listas, tablas, capas, imágenes, etc.). El lenguaje de hojas de estilo en cascada (**CSS**) fue definido por primera vez en 1996  y está desarrollado por un grupo del **W3C** llamado [**CSS Working Group**](https://www.w3.org/Style/CSS/), el cual está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en **CSS**. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización. Con el **lenguaje CCS** podemos vincular los elementos HTML con “*plantillas de documento*” denominadas **hojas de estilo** o*** stylesheets***. estas ‘*plantillas*‘ u hojas de estilo contienen la información de los elementos visuales de la página y nos permiten separar la estructura de contenidos de su representación gráfica y visual en pantallas e impresión. ## **Sintáxis básica y ejemplo sencillo de CSS** El lenguaje **CSS** podemos añadirlo dentro de un documento HTML. La forma de hacerlo que muestro en el ejemplo es la más sencilla: se declara la hoja de estilo o** CSS** dentro del propio documento HTML. La sintáxis es: **selector** (o elemento) **{** **propiedad: valor; } ** *Al enunciado anterior se le denomina **declaración CSS** y puede haber tantos selectores con sus respectivas propiedades y valores o atributos como queramos. A los elementos encerrados entre las llaves se le denomina **regla CSS***: ** selector1** (o elemento) **{** **propiedad: valor; }** **selector2** (o elemento) **{** **propiedad: valor; }** **selector3** (o elemento) **{** **propiedad: valor; }** etc… Cada selector o elemento puede llevar también tántas parejas **propiedad:valor** (o reglas CSS) como queramos, siempre separadas por punto y coma **(;)**: **selector1** (o elemento) **{** **propiedad: valor;  propiedad2: valor}** El** CSS** es un lenguaje basado en reglas. Así, cada usuario o programador puede definir las reglas **CSS** que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo:  elijo que el encabezado principal (H1) de mi página se muestre en letras grandes de color azul». El código siguiente muestra una regla** CSS** muy simple que proporcionaría el estilo descrito en el párrafo anterior: h1 { color: blue; font-size: 5em; } **Dentro de un documento HTML:** **– El selector:** un elemento HTML, como por ejemplo **p** (párrafo). En el ejemplo anterior hemos elegido el tag de Título 1: h1 **– La declaración de la regla CSS** (va entre llaves de apertura y cierre: { } **– La propiedad seguida de dos puntos** (:) color: font-size: **– Y seguidamente el atributo** o** valor**(más 😉 Si hay más atributos, van seguidos por ; color: blue; (propiedad: valor;) font-size: 5em; (propiedad: valor;) – **Siempre cerraremos la regla CSS con** } [Arriba](#CSS) ## **Ejemplo de código fuente de la página HTML con la hoja de estilos embebida** Mi primera página con estilo

Página con hoja de estilos (CSS)

¡Bienvenido a mi primera página con hoja de estilo! Esto es una prueba… Aquí podría seguir escribiendo...

Creada el 9 de abril de 2022
**Salida (la página HTML con la hoja de estilos incluida en el documento): [![paginaConCSS](https://indaga.net/wp-content/uploads/2022/03/paginaConCSS.jpg)](https://indaga.net/wp-content/uploads/2022/03/paginaConCSS.jpg)**[![ejemplo-css-embebido-en-pagina-web](https://indaga.net/wp-content/uploads/2022/03/ejemplo-css-embebido-en-pagina-web.webp)](https://indaga.net/wp-content/uploads/2022/03/ejemplo-css-embebido-en-pagina-web.webp) [Ejecutar ejemplo](https://indaga.net/ejemplos-css/ejemplo-css-1.html)** ** [Arriba](#CSS) ## **Cómo incluir CSS en una página web (principales métodos) ** - Vinculando a un archivo de hoja de estilo separado (por ejemplo style.css). *([VER](https://indaga.net/introduccion-a-css-ii-vincular-una-hoja-de-estilos-a-un-documento-html/))* - Incrustando CSS en una etiqueta de estilo (como en el [ejemplo anterior](#ejemploCSS)) - Agregando estilos en línea a elementos HTML. *Lo veremos…* - Importando archivos de hojas de estilo existentes. *Lo veremos…* - Inyectando css con JavaScript. *Lo veremos…* [Arriba](#CSS) ## **Qué nos aporta el lenguaje CSS: sus ventajas** - CSS nos facilita las actualizaciones (todas las modificaciones se pueden realizarse de forma centralizada, desde un único archivo) - Menor cantidad de código, más transparente , estructurado y comprensible - Mayor accesibilidad: webs accesibles y con menos obstáculos y acceso a su contenido desde cualquier sistema y cualquier plataforma - Usabilidad: CSS contiene muchas funciones y métodos con los que proporcionar funciones ampliadas a sus visitantes - Mayor velocidad de carga:   al haber menos código fuente en la página web y que la estructura el código fuente esté más ordenada, facilitan y aceleranla lectura del código de la página web para los robots de búsqueda. Además, las palabras clave más importantes en textos y títulos (H1, H2, H3,…) se formatean de forma conjunta y rápida - Ahorro de costos en el desarrollo: un único archivo .css es el encargado de modificar toda una web. Eso sí, también puede utilizarse de forma puntual en elementos de un archivo. *Continuaré…* [Arriba](#CSS) - ###### **[INTRODUCCIÓN A CCS, HOJAS DE ESTILO O CASCADING STYLE SHEETS (I)](https://indaga.net/introduccion-a-ccs-hojas-de-estilo-o-cascading-style-sheets-i/)** ###### **** - ###### **[INTRODUCCIÓN A CSS (II): CÓMO VINCULAR UNA HOJA DE ESTILOS A UN DOCUMENTO HTML](https://indaga.net/introduccion-a-css-ii-vincular-una-hoja-de-estilos-a-un-documento-html/)** ###### **** - ###### **[INTRODUCCIÓN A CSS (III): SELECTORES, CLASES Y PSEUDOELEMENTOS](https://indaga.net/introduccion-a-css-iii-selectores-clases-y-pseudoelementos/)** ###### **** - ###### **[INTRODUCCIÓN A CSS (IV): HERENCIA, CASCADA Y ESTILOS INLINE](https://indaga.net/introduccion-a-css-iv-herencia-cascada-y-estilos-inline/)**