+321 123 4567
info@test.com
My Account
  • La escuela
    • Codespacer
    • Partners
    • Eventos
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
CAMPUS VIRTUAL
  • La escuela
    • Nosotros
    • Alumni
    • Partners
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
  • Mi cuenta

Guía rápida de CSS para principiantes

Publicado 28/09/2021
guía rápida de CSS

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á!

Índice

1. Qué es CSS
2. Cómo funciona el CSS
3. Hojas de estilo concepto
4. Cuando usar id y class
5. Cómo vincular CSS a HTML
desarrollo web CSS

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:

h1, h2 {
color: #47D7AC;
font-size: 18px;
text-align: left;
}

h3 {
font-size: 15px;
}

p  {
color: #000000;
font-size: 12px;
}

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!

Entrada anterior
Consejos de ciberseguridad para empresas
Entrada siguiente
Alliantum, empresa partner de CODE SPACE

Entradas recientes

  • Qué es un data scientist y sus funciones
  • JavaScript vs. TypeScript – principales diferencias
  • Ventajas y desventajas en una base de datos relacional

Categorías

  • Blockchain (2)
  • BlueTeam (2)
  • Ciberseguridad (20)
  • Data Science (1)
  • Inteligencia Artificial (2)
  • IoT (2)
  • Programación (22)
  • Realidad Virtual (1)
  • Videojuegos (8)

¿Dónde estamos?
C/ Compositor Lehmberg Ruiz, 13
29007 Málaga

952 300 426

682 82 70 17

logo-code-space-blanco

© Codespace | Todos los derechos reservados

Facebook
Instagram
Twitter
LinkedIn
YouTube
Telegram
Meetup

¿Quieres estar al día de nuestras frikadas?

Suscríbete y se uno de los nuestr@s !!!

Aviso Legal | Política de cookies | Política de privacidad | Condiciones Contratación | Tablón de anuncios | | Condiciones de pago con Sequra |

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarte publicidad relacionada con tus preferencias mediante el análisis de tus hábitos de navegación.. Configuración CookiesAceptar
Política de Privacidad y Cookies

Resumen de Privacidad

Utilizamos cookies para que podamos ofrecerle la mejor experiencia de usuario posible.
La información de las cookies se almacena en su navegador y realiza funciones tales como reconocerlo cuando regresa a nuestro sitio web y ayudar a nuestro equipo a comprender qué secciones del sitio web le resultan más interesantes y útiles. Estas cookies se guardarán en tu navegador solo con tu consentimiento. Tienes la opción de configurar y rechazar estas cookies, aunque puede afectar a algunas funciones de navegación.
Necessary
Siempre activado
Las cookies principales son necesarias para el correcto funcionamiento de la web. Esta categoría únicamente incluye cookies que garantizan las funciones básicas y la seguridad del sitio y no almacenan ninguna información personal.
Non-necessary
Cualquier cookie que puede no ser imprescindible para el funcionamiento de la web. Se utilizan para recopilar datos personales del usuario a través de anuncios y otros contenidos incrustados. Son cookies denominadas no necesarias y para las que se requiere el consentimiento expreso del usuario antes de ejecutarlas.
GUARDAR Y ACEPTAR