Ya has escuchado hablar de CSS, pero, aún tienes duda de lo ¿Qué es? y ¿para qué sirve?. ¿Quieres cambiar tu texto de color?, ¿Te gustaría poner una imagen de fondo?, ¿Quieres crear formas?, todo esto lo puedes hacer con CCS, y podemos empezar con tener definir que es y como empezar a usarlo.
¿Qué es CSS?
CSS por sus siglas en ingles Cascading Style Sheets, “hojas de estilo en cascada” fue desarrollado por el W3C en 1996. Es un lenguaje de hojas de estilo enfocado a, definir, crear y personalizar los elementos de un documento HTML.
Su nombre “hojas de estilo en cascada” se debe a que las características de los elementos se aplican de arriba hacia abajo con reglas que poseen un esquema de prioridades.
Con CSS definirás el aspecto visual de tu página web, (tipo de fuente, colores, tamaño, alineación, márgenes, formas, separación del contenido, etc.) y esté le indicará al navegador la información de los estilos que tiene que desplegar de una página web.
¿Para qué sirve?
CSS sirve para dar estilo a cualquier página web, y además de cambiar color, tipo de letra, alineación, tamaño, formas etc. Podrás hacer cosas como: animar elementos, cambiar la forma de las esquinas, degradados, entre muchas otras.
El código CSS hace más fácil el trabajo de un desarrollador front-end al separar la estructura de los documentos: HTML para la estructura de la web y CSS para agregar estilo.
CSS no se limita solo a darle formato a un texto de una página web, sino que además en conjunto con JS puedes definir por ejemplo: que el borde de un input en un formulario, cuando sea incorrecto cambie de color (como se muestra en la imagen de abajo).
En este formulario se puede ver el cambio de color del borde a rojo para indicarnos un error.
También puedes usar tu hoja de estilo para personalizar diferentes sitios web no solo uno.
¿Cómo funciona?
CSS tiene que estar enlazado con el código de HTML para poder observar como se ve en el navegador la personalización de tu sitio web, te explicaremos como hacerlo a continuación.
Cómo enlazar tu CSS con tu código de HTML
Supongamos que ya tienes tu archivo en HTML y quieres enlazar tu CSS, lo que tienes que hacer es lo siguiente:
- Vas a nombrar a tu documento de CSS “style.css”.
- En tu documento HTML entre las etiquetas <head> y </head> vas a colocar
<link href="styles/style.css" rel="stylesheet" type="text/css">HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Que es CSS</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>Y con esto ya podrás ver en el navegador los estilos asignados a los elementos en tu página web.
Sintaxis básica de CSS
La sintaxis básica de CSS está compuesta por: uno o varios selectores y la declaración que se compone por la propiedad y valor de la propiedad, como se muestra en la imagen.
- Selector: Es el elemento de HTML al que se le aplicara el estilo definido en tu CSS.
- Declaración: La declaración está compuesta por la propiedad y el valor de la propiedad, que especificara a cuál de las propiedades del elemento les quieres dar estilo.
- Propiedades: Son las diferentes formas en las que se le puede dar estilo a un elemento de tu archivo HTML como en la imagen, donde color es una propiedad del selector en <p>. Tú seleccionas que propiedad es la que quieres modificar por ejemplo: color, tipo de letra, tamaño, negritas, alineación, etc. Aquí puedes ver las propiedades que puedes usar para tu sitio web.
- Valor de la propiedad: Es el valor que decidas asignarle a la propiedad por ejemplo en lugar de blue pudo ser red, colores en formato rgb o en valores hexadecimales.
Otras partes importantes de la sintaxis:
- Todas las reglas deben estar encapsuladas entre llaves
({})después del selector. - Se tienen que escribir
(:)para separar la propiedad y su valor. - Para separar las declaraciones dentro de cada regla se tiene que usar el punto y coma
(;). - De este modo para modificar varios valores de la propiedad a la vez, solo necesitas escribirlos separados por punto y coma
(;), así:
p {
color: #FF0000;
width: 500px;
border: 1px solid black;
}Tipos de selectores
Existen diferentes tipos de selectores, a continuación te explicaremos cada uno de ellos.
- Selector de elemento. Llamado también como etiqueta, son todos los elementos especificados por HTML, como <p> “párrafo”
HTML <p> CSS p HTML <div> CSS div HTML <h1> CSS h1 - Selector por ID. Es un elemento de la página identificado con un id, solo se permite un único elemento por id.
HTML <a id="hero-id"> CSS #hero-id HTML <nav id="holamundo"> CSS #holamundo HTML <section id="seccion-1"> CSS #seccion-1 - Selector por clase. Son los elementos de la página identificados con una clase (puede haber varios elementos con la misma clase).
HTML<a class="hero-class"> CSS .hero-class HTML<li class="lista-ordenada"> CSS .lista-ordenada HTML<span class="servicios"> CSS .servicios - Selector de atributo. Son los elementos con un atributo especificado.
HTML <a title="#internal"> CSS a[title] HTML <a href="https://plectrolab.com"> CSS a[href="https://plectrolab.com"] - Selector de pseudoclase. Los elementos especificados, cuando está realizando la acción de la pseudo clase.
HTML <a href="contacto.html">Selector por psuedoclase</a> CSS a:hover HTML<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> CSS input:focus
Recuerda que puedes agrupar selectores si lo que quieres es aplicar la misma regla, solo tienen que estar separados por comas (,) por ejemplo:
p,h1,lu,h3 {
color: blue;
}
See the Pen
CSS que es by Plectro lab (@Plectro-lab)
on CodePen.
Herencias
¿Qué son las herencias en CSS?. La herencia es un mecanismo por el cual las propiedades de un elemento padre hereda a sus elementos hijos.
Por ejemplo si a un elemento padre se le especifica el tipo de color y tipo de letra, todos los elementos que estén incluidos en él, van a tener el mismo color y tipo de letra, a menos de que se le haya asignado uno diferente.
Hay propiedades que no se heredan, generalmente son las que tienen que ver con la caja, por ejemplo los márgenes, ya que es poco probable que el margen que necesita el elemento padre sea el mismo que va a necesitar el elemento hijo.
Más Información
Si estás interesado en aprender más sobre CSS te dejamos algunos recursos que te pueden ayudar.
- El libro CSS Secrets, Better solutions to everyday web design problems.
- Cursos online, en plataformas como: udemy, domestika, pletzi
- Página de aprendizaje de CSS de Mozilla
- Google activate
CSS ha crecido tanto, que es imposible que una persona almacene toda la información en el cerebro, pero conocer todo lo que puedes hacer, te ayudara en darle a una página web la personalización que tú decidas.
0 Comments
Trackbacks/Pingbacks