Introducción a CSS
Introducción a CSS
Introducción a CSS es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 1 lecciones en total.
Introducción 1
Hola:
En el capítulo anterior aprendimos qué es CSS y por qué debemos utilizarlo. Ahora quiero hacer una breve introducción con un ejemplo sencillo.
Definamos una página HTML sencilla.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Estilo en línea
Ahora queremos cambiar a rojo el color de nuestro encabezado Hello CSS. Para ello, utilizaremos el atributo style que se puede añadir a casi cualquier etiqueta HTML
Con este atributo, podemos definir un estilo en línea para cada elemento.
Al observar la sección de vista previa, veremos que el color del encabezado se vuelve rojo.
color: red;
Hemos cambiado a rojo el color de la fuente del elemento mediante una definición de estilo.
<h1 style="color:red;">Hello CSS</h1>Estilo en línea 2
Recordará que dijimos que utilizamos los atributos para asignar comportamientos y características a las etiquetas en HTML
Uno de los usos más importantes de estos atributos relacionados con el estilo es que utilizamos el atributo style para definir un estilo para las etiquetas.
Estilo en línea 3
Ahora añadamos un estilo nuevo. Podemos aumentar el tamaño del texto con font-size.
Al definir varios estilos, debemos separarlos con punto y coma.
En el ejemplo siguiente, los estilos color y font-size están separados por puntos y coma.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Definición de estilos
La sintaxis es importante al añadir un estilo.
styleName: styleValue;
Recordemos una vez más que debemos asignar el estilo como se muestra arriba.
Ejemplo
Ahora ampliemos un poco más nuestro ejemplo.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Ejemplo 2
En este ejemplo, queremos cambiar a rojo el color de todo el texto. Para cada etiqueta, podemos definir el estilo de la siguiente manera.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>Selector CSS
Pero así no queda muy bien, ¿verdad?
Ahora tenemos 3 elementos en la página y hemos cambiado a rojo el color del texto de cada uno. Sin embargo, si esta cantidad aumentara a 3000, no tendría mucho sentido definir un estilo para cada elemento.
En lugar de definir cada elemento en línea, debemos utilizar selectores CSS.
Introducción 12
Ahora aprendamos el concepto de selector.
Los selectores CSS se encargan de seleccionar el elemento HTML correspondiente contenido en el documento para aplicar estilos a los elementos HTML
Por tanto, como podemos deducir de su nombre, seleccionan elementos HTML. 😂
Los selectores CSS deben definirse entre las etiquetas <style> del documento HTML o en un archivo CSS externo.
En nuestros ejemplos, utilizaremos lo que normalmente se coloca entre las etiquetas style. Sin embargo, es más preciso definir el estilo en un archivo CSS externo.
Introducción 13
El operador punto y el nombre de la clase se utilizan para definir una clase entre las etiquetas style. Las definiciones de estilo se escriben entre llaves.
.class-name {
font-size:22px;
color:red;
}
En el ejemplo siguiente, hemos definido una clase llamada my-component entre las etiquetas style y hemos asignado el estilo font-size a la clase correspondiente.
<style>
.my-component{
font-size:22px;
}
</style>
Ahora definamos dos elementos de párrafo
Ahora definamos dos elementos de párrafo que tengan la clase my-component.
Después de esta definición, como ambos párrafos tienen el mismo nombre de clase, el selector CSS los seleccionará y sus tamaños de fuente se actualizarán a 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Introducción 6
Podemos asignar más de un estilo a un selector
En el ejemplo siguiente, los estilos font-size y color están definidos en el mismo selector.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Anidamiento de selectores CSS
Analicemos el código HTML siguiente.
Se ha definido un elemento de párrafo y se ha añadido a este elemento un elemento span que contiene el texto 'Hello CSS Selectors' .
En este caso, podemos decir que el elemento de párrafo es el padre del span.
Por otro lado, el span también será el hijo del elemento p.
Al igual que los seres vivos, utilizaremos los elementos HTML en relaciones padre-hijo según su ubicación en el bloque de código.
<p>
<span>Hello CSS Selectors</span>
</p>Selector CSS anidado 2
Ampliemos un poco más nuestro ejemplo y analicemos de nuevo la jerarquía entre los elementos.
- Según el ejemplo siguiente
- Los elementos <span> y <a> son hermanos.
- Los elementos <span> y <a> son descendientes del elemento div.
- <span> y <a> son hijos del elemento <p>.
- El elemento <p> es hijo del elemento <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>modelo de árbol del análisis
Observemos más detenidamente la imagen anterior.
El siguiente ejemplo de código HTML se ha convertido en un modelo de árbol.
Tenga en cuenta que el modelo de árbol es, en realidad, un reflejo de la jerarquía padre-hijo.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Entonces, ¿cuándo utilizamos esta relación jerárquica?
Entonces, ¿cuándo utilizamos esta relación jerárquica?
Primero hagamos un ejemplo y planteemos un problema. Después veremos cómo podemos ofrecer soluciones utilizando esta jerarquía.
Veamos el ejemplo de código siguiente.
Supongamos que queremos cambiar a rojo todo el texto. Hasta ahora hemos aprendido dos formas distintas de hacerlo.
- En primer lugar, y como peor opción, definiremos el atributo de estilo (style = "color: red") en línea para cada elemento.
- En segundo lugar, definiremos una clase llamada red-txt y la asignaremos a cada elemento como atributo (class = "red-txt").
Pero hay una forma más sencilla de hacerlo 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Entonces, ¿cuándo utilizamos esta relación jerárquica? 2
Veamos de nuevo el código anterior.
Si nos fijamos en el elemento div con una clase llamada root, vemos que en realidad es el ancestro de todos los elementos de nuestro ejemplo.
En los seres humanos, los rasgos genéticos se transmiten de los ancestros a los descendientes. En CSS, el estilo asignado a un ancestro también se refleja en sus descendientes.
En este caso, cuando definimos un estilo que selecciona el elemento div correspondiente, podemos esperar que todos sus descendientes se vean afectados por esta asignación.
Hagámoslo.
Entonces, ¿cuándo utilizamos esta relación jerárquica? 3
Definamos una clase llamada root con la ayuda de un operador punto y hagamos una definición de estilo (con color: red) dentro de ella.
Seleccionará todos los elementos que tengan la clase root y cambiará a rojo el color del texto de dichos elementos y de sus descendientes.
En la sección de vista previa, veremos que todos los textos cambian a rojo.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Herencia
En CSS podemos expresar este concepto como Inheritance. Gracias a esta función, hemos aprendido a escribir nuestro código de forma más breve.
Al igual que en el ejemplo anterior, en lugar de definir la misma propiedad para cada elemento uno por uno, la definimos en el elemento ancestro y evitamos repetir código.
Ubicación del elemento head
En los ejemplos anteriores, añadimos el elemento style justo al lado del elemento HTML que escribimos.
Sin embargo, el lugar correcto donde debe insertarse la etiqueta style es entre las etiquetas head.
Por lo tanto, el uso correcto sería el siguiente.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>escribir nuestro código de la forma más breve y reutilizable posible
Al programar, debemos escribir nuestro código de la forma más breve posible y de manera reutilizable.
Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido los conceptos de selector y herencia.
En la siguiente sección, aprenderemos los tipos de definición de estilos en CSS.
Preguntas frecuentes
¿La lección «Introducción a CSS» es gratis?
Sí — el texto completo de «Introducción a CSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 1 lecciones en total.
¿Qué aprenderé en «Introducción a CSS»?
Introducción a CSS Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Introducción a CSS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.