CSS, Curso Intensivo – Lección 01, Sintaxis y Colocación de Reglas

CSS significa Cascading Style Sheets o Hojas de Estilos en Cascada y se creó en 1996. Es un lenguaje usado para controlar la apariencia de lenguajes de marcado como HTML. HTML controla la estructura de los contenidos mientras CSS controla la presentación de estos.

Anatomía de una Regla CSS

La sintaxis de CSS difiere de la de HTML y consiste de instrucciones de estilo llamadas ‘reglas’ que describen como un elemento o grupo de elementos debe ser mostrado a los usuarios por el navegador. Las instrucciones en las ‘reglas’, se denominan ‘declaraciones’, y una declaración es la combinación de una propiedad y de un valor para esta propiedad.

color: #FFFFFF;

Listado de declaraciones y propiedades de CSS:

https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS

Colocación de Reglas CSS en Línea

La forma más primitiva de colocar reglas a un elemento HTML, se conoce como ‘declaración en línea’, es la forma de adicionar declaraciones a un elemento usando el atributo ‘style’ en la etiqueta de apertura del elemento.

<p style="color:#FFFFFF;">Ejemplo de párrafo…</p>

Listado valores para colores CSS:

https://htmlcolorcodes.com/es/

Anatomia de un bloque de reglas CSS

Los bloques de reglas CSS se definen por algo que se conoce como regla, cada reglas es un conjunto de instrucciones asignadas a un elemento HTML por medio de un selector ‘selector’, hay muchos tipos de selectores, el mas sencillo y para iniciar es el selector elemento, con este podemos seleccionar cualquier elemento html h1, p, table…. Despues de usar el selector la apertura y cierre de corchetes ‘{}’definen el bloque para colocar las declaraciones de las caracteristicas:

elementoHTML {
    color:#FFFFFF;
}

Cada regla selecciona y declara como debe mostrarse ese elemento.

Colocación de reglas CSS embebidas

Para colocar reglas emebebidas debemos usar un Elemento HTML conocido como <style> que se forma con etiquetas de apertura y de cierre. Este elemento debe estar y solo puede estar dentro del elemento Cabeza del documento HTML o el <head>.

Dentro del elemento <style> podemos colocar las reglas que necesitemos.

<head>
    <style>
        p {
            color: black;
        }
        h1 {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>