Sintaxis básica de CSS

3.1 Reglas (Rules)

Los elementos básicos de CSS incluyen reglas (rules), propiedades (properties) y valores (values). Entender la sintaxis básica de CSS es clave para crear páginas web atractivas y funcionales.

Elementos básicos de CSS:

• Reglas (Rules)
• Selectores (Selectors)
• Propiedades (Properties)
• Valores (Values)

Reglas (Rules)

Las reglas CSS constan de un selector y un bloque de declaraciones. El selector indica a qué elementos HTML se aplicarán los estilos, y el bloque de declaraciones contiene una o más propiedades y sus valores. Por lo general, consta de una o más propiedades y valores encerrados en llaves {}.

Ejemplo:

    
      selector {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo para encabezado:

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

En este ejemplo, h1 es el selector, color y font-size son propiedades, y blue y 24px son los valores de estas propiedades.

3.2 Propiedades y valores

CSS proporciona un amplio conjunto de propiedades que se pueden utilizar para gestionar la apariencia de los elementos. Cada propiedad tiene uno o más valores que determinan cómo se aplicará esa propiedad.

Propiedades principales y sus valores:

Color y fondo:

• color: establece el color del texto
• background-color: establece el color de fondo del elemento

Ejemplo:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Fuente:

• font-family: define la familia de fuentes
• font-size: establece el tamaño de la fuente
• font-weight: define el grosor de la fuente

Ejemplo:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Texto:

• text-align: alinea el texto dentro del elemento
• text-decoration: añade efectos al texto, como subrayado

Ejemplo:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Márgenes y bordes:

• margin: establece los márgenes exteriores alrededor del elemento
• padding: establece los márgenes interiores dentro del elemento
• border: define el borde del elemento

Ejemplo:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Tamaños y posición:

• width y height: establecen el ancho y la altura del elemento
• position: define el método de posicionamiento del elemento

Ejemplo:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Necesitas:

• recordar las propiedades estándar de los elementos
• recordar los valores estándar de estas propiedades
• recordar las propiedades únicas de diferentes elementos
• recordar cómo funcionan estas propiedades en la práctica
• recordar cómo estas propiedades afectan entre sí.

Lo mejor es hacerlo a través de la práctica: escribir mucho CSS y ver cómo funciona.