Creando una Web: CSS

El CSS (Cascading Style Sheets) o la Hoja de Estilo en Cascada es un lenguaje encargado de dar estilo y acomodar los elementos dentro de un HTML.

La sintaxis del CSS es:

selector { caracteristica: valor;
caracteristica: valor;
}

selector.- Es el encargado de SELECCIONAR el elemento al cual aplicaremos el estilo. Se puede seleccionar por TAGS(etiquetas), CLASE o ID.



TAGS.- La seleccion por TAGS afecta a todo lo que se encuentre de la etiqueta seleccionada, por ejemplo:

h1 { font-size: 12pt;
color: #ff0000;
}

CLASE.- El elemento CLASS se especifica dentro de los elementos HTML como:

h1 class=“clase1”

Este tipo de selector afectara a todas las etiquetas con la misma clase (class).
Para aplicar un estilo a los elementos de una clase, en el SELECTOR se escribe un punto (.) seguido del nombre de la clase:

.clase1 { font-family: Arial, Helvetica, Sans-Serif;
font-size: 16pt;
}

ID.- El selector ID solo funciona para 1 elemento.

h1 id=“item1”

Para un ID, se coloca un simbolo de numero (#) seguido del nombre de ID:

#item1 { color: #ff3356;
background-color: #004b1f;
}

Hay 3 formas diferentes de aplicar una hoja de estilo (css):

Llamada externa:
Esta manera mantiene separado el estilo del html. Se crea una archivo con extension .CSS. Esta hoja de estilo puede ser aplicada a varios HTML al mismo tiempo. Se ahorra espacio.
La llamada del archivo se realiza dentro de la etiqueta HEAD:

head
link style=“text/css” rel=“stylesheet” href=“archivo.css”
/head

Hoja de estilo interna:
La hoja interna se coloca dentro del HTML a ser usado. Usualmente se utiliza para enviar informacion en el mismo html (como en los emails) o para especificar estilo minimos.
Dentro de la etiqueta HEAD se especifica:

HEAD
Style type=“text/css”

Selector { caracteristica: valor;
caracteristica: valor;
}
/style
/head

Estilo en tags:
Este estilo es el utilizado en algunos blogs y comentarios, que es donde no se puede tener acceso a la hoja de estilo externa.
Se escribe dentro de los mismos tags:

h1 style=“color:#ffdf00”

ARCHIVOS DE EJEMPLO: