En este capítulo de introducción a los estilos CSS, vas a crear tus primeros estilos en el curso. Los vamos a utilizar para mejorar el diseño de la web que llevamos realizada hasta ahora.
Ubicación del código CSS
Empecemos con un tema fundamental para empezar con este tema, la ubicación del código CSS.
Los estilos CSS pueden ubicarse en diferentes sitios para que afecten como queremos a las páginas HTML.
Estilos CSS en hoja externa
Uno de los sitios es mediante una hoja externa. Muy pronto usaremos este método.
Estilos CSS en etiquetas <style>
Otro sitio donde poner el código CSS, es en la página HTML directamente. Lo haremos añadiendo unas etiquetas <style> en cualquier parte del documento, ya sea en el head o en el body (normalmente se ponen en el <head> para que sea lo primero que se carga.).
Estilos CSS en etiquetas HTML
Además, que sepas que se pueden aplicar estilos directamente sobre las etiquetas HTML para que afecten a una de ellas en concreto. No obstante, esta práctica no es la más recomendable. Verás que hay formas mucho mejores.
Primeros estilos con CSS
Empecemos ya a aplicar los primeros estilos con CSS. Lo haremos de momento en el head con unas etiquetas style (líneas de la 5 a la 7):
<head>
<meta charset="utf-8">
<title>La tienda de PC Máster</title>
<script> alert("Hello PC MASTER!")</script>
<style>
</style>
</head>Entre la apertura y el cierre, vamos a escribir todo el CSS que queramos para la página HTML.
Sintaxis básica de CSS
Veamos antes de empezar a escribir, un poco de la sintaxis de CSS para que entiendas como se escribe y porque.
Analicemos esta regla CSS:
Selector CSS
El selector CSS es la primera parte de toda regla CSS. En la ilustración, el selector es body.
body {
}Este elemento sirve para especificar en que parte del documento o documentos queremos que se apliquen los estilos que escribiremos entre sus llaves de apertura y cierre.
En el caso del ejemplo, al poner de nombre de selector body, afectará al body de la página HTML a la que lo apliquemos.
Declaración y propiedades CSS
Las propiedades CSS son cada una de las normas de estilo que podemos aplicar. Por ejemplo, la siguiente propiedad (background-color) aplica un color de fondo a las páginas web.
Las propiedades van con un valor. Este se expresa después de los dos puntos. En esta propiedad, podemos especificar un color en sistema HSL, RGB, hexadecimal, etc. En concreto, este valor de color está en hexadecimal.
Si no tienes claro como funcionan los colores en cualquiera de estos sistemas, déjamelo en los comentarios y miraré de darte alguna pequeña guía.
Al conjunto de propiedad y valor se le denomina declaración CSS. Cada declaración deberá ser obligatoriamente cerrada con un punto y coma. Excepto la última o la única que pudiera haber, que es opcional.
body {
background-color: #FEE3D7;
}Cambiar el color del fondo de la web
Para cambiar el color del fondo de la web, tenemos que utilizar la propiedad CSS "background-color". Como la del ejemplo anterior.
background-color: #FEE3D7;
Si recargas la página HTML, ahora verás que el fondo blanco por defecto, ha cambiado a un color beige.
Cambiar la familia de fuentes por defecto con CSS
El tipo de fuente que viene por defecto en la página HTML, no es muy agradable a la vista. Con la propiedad CSS font-family, puedes cambiar el tipo de fuente del texto. Si se aplica al body, afecta a todas las etiquetas de texto que estén en el body.
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
Antes:
Después:
Alinear el texto con CSS
En CSS contamos con la propiedad text-align que nos permite alinear el texto. Si este alineamiento lo aplicamos al body, afecta a todos los elementos de texto. Veamos algunos de los usos.
Con este valor, alineamos todo el texto a la izquierda (valor por defecto de HTML).
text-align: left;
Si quieres centrar todo el texto, utiliza el valor center:
text-align: center;
También puedes alinear el texto a la derecha:
text-align: right;
Hay más valores posibles para esta propiedad, pero por ahora es suficiente.
Esta propiedad, esta vez, no la voy a utilizar. Quiero el texto alineado a la izquierda. Como he explicado, por defecto se queda así con HTML, así que sería redundante aplicarlo de nuevo.
Añadir márgenes al texto con CSS
Se pueden aplicar márgenes a los elementos con la propiedad margin. Estos márgenes se pueden especificar con diferentes medidas. Yo utilizaré un porcentaje. Quiero que se cree un margen del 10%:
margin: 10%
Esto provoca que los elementos del body, tengan un margen del 10% tanto por arriba, por abajo y a los lados.
Antes:
Después:
Utilizar múltiples selectores para estilos CSS
Una de las metas de CSS, es la de evitar repetir código innecesariamente. Mira la regla que he creado para aplicar a los elementos h1 de la página:
h1 {
color:#AC7088;
}La propiedad CSS color sirve para cambiar el color de un elemento de texto en HTML, como puede ser una cabecera h1.
Si quiero aplicar el mismo color para todas las cabecera h1 hasta la h6, ¿tengo que repetir la misma regla para cada una?
h1 {
color:#AC7088;
}
h2 {
color:#AC7088;
}
h3 {
color:#AC7088;
}
h4 {
color:#AC7088;
}
h5 {
color:#AC7088;
}
h6 {
color:#AC7088;
}Se ve un poco tonto, ¿verdad? Puedes hacer esto mejor, creando reglas con múltiples selectores:
h1,h2,h3,h4,h5,h6 {
color:#AC7088;
}Esto aplica el color especificado a todos los elementos h que crees en la página.
Ahora, quita todas las etiquetas HTML que utilizamos anteriormente para formatear el texto (<u>, <i>, <mark>, etc.). Esto lo digo para que no cree confusión entre esos estilos de las etiquetas y los que estamos poniendo en CSS.
Cambiar el tamaño de fuente del texto con CSS
Para cambiar el tamaño de fuente, se puede usar la propiedad font-size. Apliquémosla a todos los párrafos:
p {
font-size: 18px;
}Redimensionar el tamaño de las imágenes con CSS
Las imágenes pueden ser redimensionadas con CSS. No obstante, te recomiendo que siempre que puedas, tengas las imágenes del tamaño justo y no tengas que redimensionarlas.
Para esta web que estoy haciendo, el logo es demasiado grande. Lo quiero poner más pequeño. Sin embargo, lo he dejado así de grande, para que sepas redimensionar desde CSS.
El problema de tener un logo tan grande y utilizarlo redimensionado, es que no ocupa lo mismo una imagen de 1000 píxeles x 1000 que una de 300 x 300. Yo solo quiero que se vea la imagen en 300 píxeles.
Lo mejor, sería utilizar un programa de edición gráfica como Photoshop o Gimp entre muchos otros y redimensionar la imagen de 1000x1000 a 300x300, así, tu página cargará más rápido y consumirás menos datos de transferencia en tu hosting web.
No entremos aún en grandes detalles de optimización. Vamos a continuar.
Márgenes para las imágenes
img {
height:300px;
}Basta con que especifique el alto. Esto lo acabo de hacer con height.
Con respecto a los márgenes superiores, tengo demasiado espacio entre la parte superior y la imagen:
Para solucionar esto, vamos a crear una excepción sobre la regla general que hay en el body, la cual da ese 10% de margen en todas las direcciones.
Yo solo quiero quitar algo de margen de la parte superior respecto a la imagen. Por lo tanto, utilizaré una propiedad específica para el margen superior:
img {
height:300px;
margin-top:-60px;
}Con esto, se le restan 60 píxeles a la posición superior de la imagen, por lo que ahora la imagen tiene de margen superior, un 10% - 60 píxeles.
Seguramente te cueste un poco entender este cálculo, pero poco a poco, lo irás manejando como quieras. Solo sigue viendo más ejemplos y aprendiendo más cosas.
Lo siguiente que voy a hacer, es añadir un margen a la parte inferior de la imagen. Esto se consigue con la propiedad margin-bottom.
img {
height:300px;
margin-top:-60px;
margin-bottom:50px;
}El resultado final, es este:
El resultado no es una maravilla, pero si estás empezando con el desarrollo web en este curso, ya tiene mérito que sepas hacer páginas como esta y entiendas como funcionan.
Por supuesto, aún falta mucho por ver, pero esto era una introducción a CSS.
Te dejo la página completa por si necesitas visualizarla mejor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>La tienda de PC Máster</title>
<style>
body{
background-color: #FEE3D7;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 10%
}
h1,h2,h3,h4,h5,h6 {
color:#AC7088;
}
p {
font-size: 18px;
}
img {
height:300px;
margin-bottom:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<img src="imagenes/logo.png" alt="Logo PCMASTER">
<h1>Informática PC MASTER</h1>
<h2>Servicio técnico</h2>
<p>Contamos con el mejor servicio técnico para todo tipo de equipos informáticos. PCs, laptops, smart TV, smartphones...</p>
<h2>Servicio de ventas</h2>
<p>Contamos con un excelente servicio de ventas con unos precios increíbles.</p>
<h3>Contacto</h3>
<p>Puede contactarnos a través de nuestro número de teléfono, email o visitándonos en nuestra tienda física.</p>
</body>
</html>
