Como usar el CSS: Introducción
Cuando creas una página web introduces un contenido en un documento y lo formateas, o sea, le das el aspecto con el que quieres que aparezca. Esto lo consigues modificando los atributos de cada elemento que forma la página web. Así podrás definir el texto que debe ir en negrita, una imagen para el fondo de la página, una determinada fuente de caracteres...
Un estilo es el conjunto de argumentos y sus valores que se usan para controlar el aspecto de cada elemento de la página: color, fondo, estilo de letra, posición... Puede aplicarse a cada elemento de la página en el propio código HTML (en line con style) o mediante reglas de estilo CSS
Y ¿qué es el CSS? Se trata de un pseudo lenguaje con el que se puede describir la forma en la que se ve cada elemento de la página web, sin tener en cuenta el contenido. Es decir: yo creo el contenido de la página web y con la hoja de estilo describo la forma en la que se verá.
O también puedes verlo como el pseudo lenguaje que permite aplicar estilos a cualquier elemento de la página web.
El pseudo lenguaje CSS permite separar contenido de la página (información) de su formato, su aspecto. Esta filosofía de trabajo ya se aplicaba en el HTML 4, pero en HTML 5 es primordial
La separación de funciones trae como consecuencia una gran ventaja: permite cambiar el aspecto de toda una página web, y de todo un sitio, sin tener que tocar página por página, basta con modificar unas lineas en un archivo compartido por todas esas páginas, en ese archivo es donde se almacena la información sobre como se ve la página.
La última versión de este pseudo lenguaje es la CSS3, es soportada por la mayoría, si no todos, los navegadores modernos. Hoy prácticamente todos los diseños web utilizan las hojas de estilos CSS3. Pese a su estandarización pueden existir pequeñas diferencias entre navegadores, pero son mínimas y prácticamente no afectan al aspecto de las páginas.
Esta versión se va ampliando con nuevas funcionalidades o añadidos, al parecer no va a existir un CSS4.
El ultimo estandar de CSS ofrece posibilidades que cualquier diseñador sabrá apreciar: crear cuadros con esquinas redondeadas, sombras de texto, transparencias de colores, hacer animaciones.... El CSS 3 te da múltiples opciones y aquí te contamos como empezar a sacarle el jugo.
Un par de muestras sencillas de estilos CSS3
Como ves el CSS3 permite algunas formas muy interesantes para dar estilo a nuestros diseños.
Esta pequeña guía de uso del CSS3 te permitirá iniciarte en el uso de las hojas de estilos.
Lo que hagas con ello solo está limitado por tu imaginación. Fíjate este botón
¿qué te parece si te digo que está hecho con estilos CSS3? Es un muestra llamativa, vale, no es de un gusto exquisito, pero sirve como una mínima muestra de lo que puedes hacer con CSS.
Una regla CSS es una conjunto de declaraciones formadas por una propiedad y su valor.
Se pueden definir reglas para cualquier elemento de la página web.
Para inciarte con practicar usa estos ejercicios de CSS
Sintaxis de las reglas CSS
Una regla de estilo se define mediante un nombre o selector y un conjunto de propiedades y sus valores separados por punto y coma, encerrados entre llaves:
<div style="height: 100px; color: blue, font-family:Arial">
esto define un bloque de 100 px de alto con letras azules en arial</div>
<span style="font-style: italic; font-weight: bold">Este texto está en cursiva y negrita</span>
Este ejemplo muestra como definir una regla CSS en línea, pero lo recomendable es usar un archivo que contenga todas las definiciones de reglas de estilo y que será llamado por la página web. el nombre del archivo usa la extensión .css
La sintáxis en general no difiere del ejemplo
.sombreado{
box-shadow: 14px 14px 5px 0px rgba(0,0,0,0.75);
background-color: orange;
color: black;
margin: 10px;
}
Es decir: nombre del selector o selectores y las reglas encerradas entre llaves y terminando cada una en un punto y coma.
Puedes agrupar selectores para facilitar la escritura
.cuadro{
border: 1px solid black;
.sombra{
box-shadow: 14px 14px 5px 0px rgba(0,0,0,0.75);
color: black;
margin: 10px;
}
.fondo{
background-color: orange;
}
&:hover{
color: blue;
}
}
En este ejemplo ahorramos escribir las reglas .cuadro, .cuadro .nombre, .cuado .fondo. y .cuadro:hover el código queda más claro. el símbolo ampersand (&) simboliza al selector padre .cuadro
En la descripción de selectores tienes un poco más detallado como escribir reglas
Un buen diseño coloca los estilos en un archivo independiente y usa el mínimo de estilos en línea