CSS (Hojas de Estilo en Cascada)

CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para agregar estilo y mejorar el atractivo visual de los elementos HTML en una página web. Juega un papel crucial en mejorar la estética de un sitio web, al igual que la decoración, el color de las paredes, los muebles, el material del sofá y la forma de las ventanas y puertas contribuyen al aspecto general de una casa.

Añadiendo CSS para Estilizar HTML

CSS nos permite controlar la presentación y el diseño de los elementos HTML, incluyendo colores, fuentes, espaciado y más. Aquí está cómo podemos aplicar estilos CSS a nuestros elementos HTML:

Estilos en Línea

Usando el atributo style, podemos aplicar estilos CSS directamente a elementos HTML individuales. Este método es útil para agregar estilos rápidos y puntuales.

index.html

<p style="color: blue; font-size: 16px;">This is a paragraph of text with inline styles.</p>

Estilos Internos

También podemos incluir estilos CSS dentro de las etiquetas <style> en la sección <head> del documento HTML. Este método es útil para aplicar estilos a múltiples elementos dentro del mismo documento.

index.html

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: blue;

font-size: 16px;

}

</style>

</head>

<body>

<p>This is a paragraph of text with internal styles.</p>

</body>

</html>

Hojas de Estilo Externas

Para proyectos más grandes o cuando queremos reutilizar estilos en varias páginas, es común usar hojas de estilo externas. Crea un archivo CSS separado (por ejemplo, index.css) y enlázalo al documento HTML usando la etiqueta <link>.

Por favor, revisa los archivos index.html y index.css en el ejemplo.

index.html

index.css

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>This is a paragraph of text with external styles.</p>

</body>

</html>

Selectores CSS

Los selectores CSS apuntan a elementos HTML basados en criterios como el tipo de elemento, clase o ID. Un selector especifica el elemento exacto al que se deben aplicar estilos específicos.

Selector de Elemento

Apunta a todos los elementos de un tipo específico.


css
9
1
2
3
p {
  /* styles */
}

Selector de Clase

Apunta a elementos con un atributo de clase específico.


css
9
1
2
3
.highlight {
  /* styles */
}

Selector de ID

Apunta a un elemento específico con un atributo ID único.


css
9
1
2
3
#header {
  /* styles */
}

Propiedades CSS

Las propiedades CSS definen cómo deben ser estilizados los elementos seleccionados. Aquí hay algunas propiedades CSS comunes:

color establece el color del texto;
background-color establece el color de fondo de un elemento;
font-size establece el tamaño del texto;
margin añade el espacio alrededor de un elemento.

Podemos personalizar la apariencia de la página web aplicando estilos CSS a los elementos HTML para crear experiencias visualmente atractivas y fáciles de usar.

Ejemplo:

index.html

index.css

<!DOCTYPE html>

<html>

<head>

<title>Hello, World!</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<a href="https://www.google.com/" target="_blank">Visit Google home page</a><br />

<img

src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/2d218c15-0264-4b7d-afb6-e91ad4a42daa/section-2/image-example-dog.jpg"

alt="Puppy in a suit"

width="240"

</body>

</html>

Tutorial en Video

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla