INFORMATICA
CPEM 7

Logo del CPEM 7 de Junín de los Andes para el curso de informática

Introducción a CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo que permite a los diseñadores definir el aspecto visual de un documento HTML.

¿Qué es CSS y para qué sirve?

  • CSS significa Cascading Style Sheets (hojas de estilo en cascada).
  • Es como el maquillaje o la ropa de una página web. Si HTML es el esqueleto (la estructura), CSS es lo que hace que se vea bonita.
  • Con CSS puedes cambiar colores, fuentes, tamaños, posiciones y mucho más.

Sintaxis y Estructura de CSS

CSS se escribe en una sintaxis sencilla compuesta por reglas que definen cómo deben verse los elementos HTML. Cada regla consta de un selector, una propiedad y un valor.

Selector { propiedad: valor;}

Ejemplo de una Regla CSS

h1 { 
      color: blue;
      font-size: 24px;
      }

Conexión del archivo CSS

Para que el archivo CSS funcione en tu página HTML, necesitas conectarlo usando la etiqueta <link> dentro de la etiqueta <head>

<link rel="stylesheet" href="styles.css">
link css html5

Selectores CSS

Selector: Es como elegir a quién le vas a poner estilo. Puede ser una etiqueta (como <p>), una clase (.clase) o un ID (#id).
Propiedad: Es lo que quieres cambiar (por ejemplo, el color, el tamaño o el fondo).
Valor: Es cómo quieres que se vea esa propiedad (por ejemplo, red para el color o 20px para el tamaño).

1. Selector de Elemento Html

p {color: blue;}

2. Selector de Clase

.nombre-clase {font-weight: bold;}

3. Selector de ID

#encabezado {background-color: red;}

4. Selectores Combinados

h1.destacado {font-size: 24px;}

Propiedades y Valores CSS

Colores:

Se pueden utilizar

  • Nombres de colores:red, blue, green, etc.
  • Códigos hexadecimales:#FF0000
  • RGB y RGBArgb(255, 0, 0), rgba(255, 0, 0, 0.5)

Fuentes:

  • font-family: Cambia el tipo de letra font-size: Cambia el tamaño de la letra font-weight: Cambia el grosor de la letra font-style: Cambia el estilo de la letra.

Texto:

color: cambia el color del texto
text-align: Controla la alineación del texto dentro de un elemento.

Valores comunes: left (izquierda, por defecto en idiomas de izquierda a derecha), right(derecha), center (centrado), justify (justificado, ajusta el texto para que ocupe todo el ancho disponible).


text-decoration
line-height.
  • Fondo:
    • background-color, background-image, background-repeat, background-position.
    • color: #ff0000;

    Fuente

    font-family: Arial;
font-size: 16px;

    Espaciado

    margin: 10px;
padding: 5px;

    Bordes

    border: 2px solid #000;

    Modelo de Caja CSS

    El modelo de caja CSS organiza los elementos en cajas con contenido, relleno, borde y margen.

    Flexbox te permite crear layouts flexibles y adaptables.

    .container {
            display: flex;
            flex-direction: row;
            }