Guía rápida de CSS para principiantes

Si quieres dedicarte al desarrollo web, con esta guía rápida de CSS vas a encontrar todo lo que necesitas para empezar a darle forma a tu página web. Aunque la gran mayoría de empresas utilizan un CMS, como Wordpress, Joomla, etc. para poder modificar cualquier aspecto de sus webs sin ningún tipo de conocimiento de programación, es muy importante aprender sobre CSS. Esto te va a permitir, no solo a desarrollar tus propias páginas web, sino a poder cambiar el diseño y personalizar una plantilla de cualquier CMS.

Además, si te apasiona este mundo y quieres trabajar sobre ello, estás de enhorabuena, ya que el programador es uno de los perfiles más demandados por las empresa en España.

En este tutorial css desde cero te vamos a explicar las hojas de estilo, las propiedades y muchas cosas más para crear una página web con CSS. ¡Vamos allá!

Qué es CSS

CSS en español significa hojas de estilo en cascada y se utiliza para el diseño de una página web. Conforma la parte visual, de estilos y estructura de los diferentes elementos, que los usuarios ven al acceder a una web, es decir es fundamental para el desarrollo de frontend. Normalmente, funciona de la mano de HTML.

CSS cómo funciona

Antes de crear CSS desde cero, tenemos que saber cómo funciona. Las hojas de estilo son un conjunto de reglas que representa el aspecto que tienen que tener lo elementos HTML de tu web.

Además, una de las cosas positivas de este lenguaje de estilos es que funciona con una serie de patrones, por lo que no hace falta especificar todo para cada elemento de forma individual. Es decir, puedes decirle que los h1 y h2 sean de color verde, con un tamaño de 18px y alineado a la izquierda. Por ejemplo:

Hojas de estilo CSS conceptos

En este tutorial de css te vamos a explicar cada uno de los conceptos más importantes de las hojas de estilo. Estos son:

Selectores, reglas y propiedades

Como hemos visto en el ejemplo anterior, tenemos 3 reglas y cada una de ellas se forma con un selector que le está indicando al HTML (h1,h2,h3 y p) los elementos que tiene que seleccionar, para aplicarle los estilos especificados entre la llave de apertura y la de cierre. Es decir, la primera regla tiene el selector h1 y h2, la segunda regla el selector h3 y la tercera regla el selector p.

Cada una de estas reglas están compuestas de unas propiedades que determinan que se hará con esos elementos HTML.

Para entender mejor el ejemplo y cogiendo la primera regla, le estamos indicando que, a los elementos HTML, que son el h1 y el h2, se les tiene que aplicar un color verde, un tamaño de letra de 15px y se alinee a la izquierda

En cuanto a las propiedades hay muchísimas. Por ejemplo:

p a {
color: #47D7AC;
outline: none;
}

Siguiendo este ejemplo, en la primera regla que vemos se han anidado 2 elementos que nos están indicando que todos los enlaces, nos referimos a la etiqueta en HTML “a”, que se encuentran en los párrafos, nos estamos refiriendo a la etiqueta HTML “p”, se les va a aplicar un subrayado. Es decir, cualquier enlace que no esté en un párrafo no se le va a aplicar esta norma.

En este aspecto no vamos a adentrarnos más, por ello te dejamos este artículo tan interesante sobre selectores para aprender a crear css desde cero. Además, si te quieres dedicar profesionalmente a este mundillo, en CODE SPACE tenemos un curso de programación full stack para que aprendas a desarrollar páginas web.

Sobreescritura, herencia y conflictos de estilos

Estas hojas se llaman así, ya que muestran los estilos de cada una de las reglas se pueden heredar de forma jerárquica. Por ejemplo:

body {
color: #47D7AC;
}

Con esta regla estamos diciendo que todo el contenido de nuestra web es de color verde (#47D7AC). Esto se produce gracias a la capacidad de herencia de las hojas de estilo, es decir, cualquier elemento hijo va a heredar el estilo que determinemos, excepto que especifiquemos lo contrario.

Por ejemplo, si escribimos la siguiente regla “p { color: #000000; }” le estamos aplicando el principio de especificidad. Aunque se está haciendo un conflicto entre la regla “body” y la regla “p” se resuelve, ya que se está aplicando la regla más específica, que en este caso es el párrafo.

Cuando usar id y class

Ya hemos visto en esta guía rápida de CSS los conceptos claves de las hojas de estilo css. Ahora vamos un paso más y vamos a ver cuándo usar id y class y en qué se diferencian.

Cuando estamos escribiendo los estilos de nuestra web y queremos destacar distintas secciones utilizamos el id y la class.

El id se utilizar para indicar una estructura distinta dentro de una página de la web. Solo se puede usar una vez, es decir, una vez asignado un id a un elemento ya no se puede volver a asignar otro dentro de la página de tu sitio web.

Las clases (class), a diferencia del id, se utiliza cuando se quiere cambiar una estructura que se repite más de una vez a lo largo de una página del sitio. Es decir, si tenemos, por ejemplo, 3 textos que queremos cambiarle el color usaríamos la class, sin embargo, si queremos destacar un elemento una sola vez, usaremos el id.

Para que lo entiendas mejor, vamos a ver el siguiente ejemplo:

• HTML:

<p id=»aprender-css»>Este es un texto para ver como funciona un id</p>
<p>Esto es un texto normal</p>
<p>Esto es un texto normal</p>
<p class=»tutorial-css»>Esto es un texto para ver como funciona una class</p>
<p class=»tutorial-css»>Esto es un texto para ver como funciona una class</p>
<p>Esto es un texto normal</p>

• CSS

p {
color: #00000;
}

#aprender-css {
text-decoration: underline;
font-family: open sans;
color: #ff8000;
}

.tutorial-css {
color: #47D7AC;
}

• Como se vería:

Este es un texto para ver como funciona un id

Esto es un texto normal

Esto es un texto normal

Esto es un texto para ver como funciona una class

Esto es un texto para ver como funciona una class

Esto es un texto normal

Cómo vincular css a HTML

Llegamos al final de esta guía para aprender css3 desde cero, para aprender a vincular CSS a HTML. Para ello, te vamos a explicar las tres opciones que existen:

Hojas de estilo inline

Hay un atributo que se utiliza en un elemento HTML. Este atributo es “style”. Se puede usar de 2 formas;

<p style= “font-size: px15;”>Este es un texto de prueba en el que utilizamos style para aprender css</p>

<p>Este es un texto de prueba en el que <span style= “color: #000000;”>utilizamos el span</span> para aprender css</p>

Aquí solamente especificamos las propiedades que tiene que aplicar el elemento. No se recommienda hacer este uso de las hojas de estilo ya que, además de tener que aplicarse a cada uno de los elementos de forma individual, implican gran esfuerzo y mantenimiento.

Si desarrollamos los estilos de una web en un CMS como Wordpress, existen distintos widgets para cambiar algunas propiedades CSS desde su interfaz. Esta es una buena opción, aunque también existen muchas otras.

Hojas de estilo internas

Este tipo de vinculación se realiza a través del “head” de la página HTML. Aquí escribiríamos las reglas dentro del elemento “style”.

Esta opción tampoco es aconsejable ya que estas reglas solo se verán en una página concreta donde has escrito los estilos css y no servirán para otras páginas de tu sitio web.

Hojas de estilo externas

Esta es la forma más correcta de hacerlo. Se crean uno o varios ficheros con la extensión “.css” donde se escribirán todas las reglas CSS.

Para vincular estas reglas a la página, consiste en referenciar el fichero desde esa página. Con ello conseguiremos que ese fichero sea global para todo el sitio web.

Hasta aquí ha llegado nuestra guía rápida de css y esperamos que te haya sido de mucha utilidad.

Si tienes cualquier duda, escríbenos un comentario.

¡Hasta el próximo artículo!