¿Qué es CSS?
CSS es el lenguaje estándar para la creación de estilos de una web. Sus siglas significan: Cascading Style Sheets y hace referencia a hojas de estilo en cascada.
HTML construye la base del sitio y CSS trabaja el estilo (tamaños, posición, colores o, incluso, animaciones).
¿Cómo funciona?
Permite controlar el diseño de múltiples páginas con un solo archivo. No funciona como los atributos de HTML, que son únicos para cada elemento, sinó que podemos aplicar un estilo particular a todos los elementos H1, por ejemplo. HTML fue creado solo para describir contenido (<p>Hola, soy Ruth</p>) y CSS para darle forma a esa p.
Esto es un ahorro de tiempo, código y con menos posibilidad de errores.
Como todos los lenguajes, está basado en el inglés. Hay varias maneras de estilizar elementos, te voy a explicar las tres más básicas.
Control por tipo de elemento
Imaginemos que queremos que todos los h1 sean de color rojo y centrados. Lo escribiríamos así:
h1 {
color: red;
text-align: center;
}
Si sabes inglés, es bastante fácil, solo deberás recordar qué sintaxis usar o buscar en Internet.
Control por clase
Imaginemos que queremos aplicar a ciertos elementos <p> un estilo concreto, porque son citas de poetas y las queremos poner en cursiva y tamaño de letra 14.
.citasPoetas {
font-style: italic;
font-size: 14px;
}
La diferencia con el anterior es el punto antes del nombre de la clase. El nombre de la clase es totalmente personalizado y deberemos habérselo asignado antes al elemento (tendrás varios <p> con la clase citasPoetas).
Control por ID
Imaginemos que solo a una imagen queremos ponerle un fondo gris y que tenga un tamaño de 200 por 200 píxeles.
#imagenPlato {
background-color: grey;
height: 200px;
width: 200px;
}
La diferencia con el control por clase es que antes del nombre del ID introducimos una almohadilla. El ID es único, para un solo elemento. No puedes repetirlo.
Importante
En CSS las minúsculas y las mayúsculas son importantes. Si a un elemento le asignas la clase fondoGris y en CSS escribes FondoGris, nunca funcionará. Seguro que es un error que cometerás, todos lo hemos cometido (y seguimos cometiendo alguna vez).
Por cierto, a las clases o IDS nunca les añadas tildes.
Recursos
En estas dos páginas puedes aprender mucho más de CSS, son súper útiles:
Codecademy es una plataforma online y gratuita donde podrás hacer cursos online, no solo de CSS sinó de muchísimos lenguajes de programación. W3schools es la web de referencia para programadores, acabarás consultándola miles de veces.
Puedes consultar el post de HTML, aquí.
Si tienes cualquier duda o problema con CSS, no dudes en contactarme.
