Conceptos básicos de CSS
Una introducción al diseño con CSS (visión general opcional)
Conceptos básicos de CSS es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 2 de 4. 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 4 lecciones en total.
Conceptos básicos de CSS: introducción a los estilos con CSS
¡Le damos la bienvenida al mundo de CSS! Hoy aprenderemos a utilizar hojas de estilo en cascada (CSS) para aplicar estilos a sus páginas web y hacer que tengan un aspecto increíble.
¿Qué es CSS?
CSS son las siglas de Hojas de estilo en cascada. Es un lenguaje que se utiliza para controlar el aspecto y la presentación de sus páginas web.
¡Con CSS puede cambiar colores, fuentes, diseños y mucho más!
Cómo funciona CSS
CSS funciona seleccionando elementos HTML y aplicándoles estilos. Puede utilizar CSS de tres formas:
- En línea: Añade los estilos directamente dentro de los elementos HTML.
- Interno: Añade los estilos dentro de una etiqueta
<style>en el<head>. - Externo: Utiliza un archivo CSS independiente.
En esta lección nos centraremos en los estilos internos y externos.
CSS interno
El CSS interno se escribe dentro de una etiqueta <style> en el <head> del documento HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS externo
El CSS externo se escribe en un archivo independiente con la extensión .css. Se vincula al documento HTML mediante la etiqueta <link>.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
Selectores en CSS
Los selectores se utilizan para seleccionar elementos HTML específicos a los que aplicar estilos. Algunos selectores habituales son:
- Selector de etiqueta: Selecciona todos los elementos con una etiqueta específica. Ejemplo:
p. - Selector de clase: Selecciona los elementos que tienen una clase específica. Ejemplo:
.myClass. - Selector de ID: Selecciona un elemento con un ID específico. Ejemplo:
#myID.
¡Veamos cómo utilizarlos!
Selectores de clase e ID
Utilice una clase cuando quiera aplicar estilos a varios elementos. Utilice un ID para un único elemento.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Pruébelo usted mismo
Vamos a crear una página web utilizando CSS interno. Este es un ejemplo para empezar:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
¡Excelente trabajo!
¡Enhorabuena! Ha aprendido los conceptos básicos de CSS y a utilizarlo para aplicar estilos a sus páginas web. CSS hace que sus páginas tengan un aspecto profesional y atractivo. En la próxima lección, profundizaremos en los colores y los fondos para que sus páginas sean aún más vibrantes. ¡Prepárese para dar rienda suelta a su creatividad!
Preguntas frecuentes
¿La lección «Conceptos básicos de CSS» es gratis?
Sí — el texto completo de «Conceptos básicos de 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 4 lecciones en total.
¿Qué aprenderé en «Conceptos básicos de CSS»?
Una introducción al diseño con CSS (visión general opcional) 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 2 de 4.
¿Cuánto tiempo toma la lección «Conceptos básicos de 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.
Todas las lecciones de este curso
- Estilos en línea
- Conceptos básicos de CSS
- Colores y fondos
- Formato del texto