El estilo visual y el diseño de un sitio web son dictados por CSS u hojas de estilo en cascada. Se trata de documentos que dan forma al marcado HTML de una página web, proporcionando a los navegadores instrucciones sobre cómo mostrar las páginas que resultan de dicho marcado. CSS maneja el diseño de una página, así como el color, las imágenes de fondo, la tipografía y mucho más.
Si observa un archivo CSS, verá que, al igual que cualquier lenguaje de marcado o codificación, estos archivos tienen una sintaxis específica para ellos. Cada hoja de estilo está compuesta por un número de reglas CSS. Estas reglas, cuando se toman en su totalidad, son las que dan estilo al sitio.
Índice de contenidos
Las Partes de una Regla CSS
Una regla CSS se compone de dos partes distintas: el selector y la declaración. El selector determina el estilo de una página y la declaración es como debe ser estilizada. Por ejemplo:
p {
color: #000;
}
>
Esta es una regla CSS. La parte de selección es la «p», que es un selector de elementos para «párrafos». Por lo tanto, seleccionaría TODOS los párrafos de un sitio y les proporcionaría este estilo (a menos que haya párrafos a los que se dirijan estilos más específicos en otro lugar del documento CSS).
La parte de la regla que dice «color: #000;» es lo que se conoce como la declaración. Esta declaración se compone de dos partes: la propiedad y el valor.
La propiedad es la parte «color» de esta declaración. Determina qué aspecto del selector se cambiará visualmente.
El valor es el que se cambiará a la propiedad CSS elegida. En nuestro ejemplo, estamos usando el valor hexadecimal #000, que es la abreviatura de CSS para «negro».
Así que usando esta regla CSS, nuestra página tendría párrafos mostrados en un color de fuente negro.
Conceptos básicos de las propiedades de CSS
Cuando escribes propiedades CSS, no puedes simplemente inventarlas como te parezca. Por ejemplo, «color» es una propiedad CSS real, por lo que puede usarla. Esta propiedad es la que determina el color del texto de un elemento. Si intentara usar «text-color» o «font-color» como propiedades CSS, éstas fallarían porque no son partes reales del lenguaje CSS.
Otro ejemplo es la propiedad «background-image». Esta propiedad establece una imagen que se puede utilizar para un fondo, como este:
.logo {
imagen de fondo: url(/images/company-logo.png);
}
>
Si intentara usar «background-picture» o «background-graphic» como propiedad, fallarían porque, una vez más, estas no son propiedades CSS reales.
Algunas propiedades de CSS
Hay un número de propiedades CSS que puedes usar para darle estilo a un sitio. Algunos ejemplos son:
- Borde (incluyendo estilo de borde, color de borde y ancho de borde)
- Acolchado (incluyendo acolchado en la parte superior, acolchado en la derecha, acolchado en la parte inferior y acolchado en la izquierda)
- Márgenes (incluyendo margen superior, margen derecho, margen inferior y margen izquierdo)
- Familia de fuentes
- Tamaño de fuente
- Color de fondo
- Ancho
- Altura
Estas propiedades de CSS son muy buenas para usar como ejemplos, porque son todas muy sencillas y, aunque no conozca CSS, probablemente pueda adivinar lo que hacen basándose en sus nombres.
Hay otras propiedades CSS que encontrará también que pueden no ser tan obvias como la forma en que funcionan en base a sus nombres:
- Flotador
- Borrar
- Desbordamiento
- Transformar texto
- Índice Z
A medida que profundices en el diseño web, encontrarás (y usarás) todas estas propiedades y mucho más!
Las propiedades necesitan valores
Cada vez que utilice una propiedad, debe darle un valor – y ciertas propiedades sólo pueden aceptar ciertos valores.
En nuestro primer ejemplo de la propiedad «color», necesitamos usar un valor de color. Puede ser un valor hexadecimal, un valor RGBA o incluso palabras clave de color. Cualquiera de esos valores funcionaría, sin embargo, si usara la palabra «sombrío» con esta propiedad, no haría nada porque, por muy descriptiva que sea esa palabra, no es un valor reconocido en CSS.
Nuestro segundo ejemplo de «imagen de fondo» requiere que se utilice una ruta de imagen para obtener una imagen real de los archivos de su sitio. Este es el valor/sintaxis que se requiere.
Todas las propiedades CSS tienen valores que esperan. Por ejemplo:
- El color del borde espera un valor de color
- El tamaño del borde espera un valor de tamaño, como píxeles o porcentajes
- Los estilos de borde esperan uno de los estilos reservados usados para esta propiedad, como «sólido»
Si repasa la lista de propiedades CSS, descubrirá que cada una de ellas tiene valores específicos que usarán para crear los estilos para los que están diseñadas.
