Logo de CSS

Introducción a CSS – Hoja de estilo en cascada

Las hojas de estilo en cascada por sus siglas en inglés CSS (cascading style sheets) es el lenguaje encargado de darle una apariencia a nuestras paginas web (HTML o XHTML), una vez definido nuestro HTML de nuestra pagina web podemos comenzar a trabajar en nuestro CSS para darle una presentación (color, tamaño y estructura) a nuestra pagina web.

Es importante conocer que la entidad encargada de definir las reglas o standares del lenguaje CSS es la W3C (World Wide Web Consortium), estos standares a la vez tienen que ser respetados por todos los diferentes navegadores web, aunque cabe mencionar que algunos navegadores web tal como el Internet Explorer no siguen al 100% estos standares, generando algunos inconvenientes a los desarrolladores web (de esto hablaremos en otro post mas adelante ;) ).

Ahora teniendo en cuenta esta información pasamos a lo siguiente:

Cuál es la sintaxis este lenguaje?

La sintaxis de este lenguaje es bastante sencilla, se compone un selector(es), propiedad(es) y valor(es), expresado nuestro código CSS seria:

1
2
3
selector {
  propiedad: valor;
}

Ahora entramos un poco mas en detalle:

Selector: sera el que haga referencia a la etiqueta HTML a la que le queremos aplicar un estilo (o presentación).

Propiedades: estas propiedades son una seria de palabras en inglés tales como: color, width, height, font, etc. Que como vemos trabajan lo que son colores, anchos y altos del elemento que hemos seleccionado (selector).

Valores: los valores de las propiedades son diferentes según sea su propiedad por ejemplo: color: #ffffff (blanco) el valor es en hexadecimal, otro puede ser width: 10px y así cada propiedad tiene su valor.

Un ejemplo real seria:

1
2
3
p{
color: #ff0000;
}

Las propiedades de CSS que pueden aplicarse a una etiqueta o selector son muchas, pero para ayudarte un poco a conocerlas puedes revisar este Cheat CSS con varias propiedades que te ayudaran para comenzar:

CSS Cheat Sheet

Cómo lo incluimos en nuestras paginas web HTML?

Para incluir nuestro CSS a nuestras paginas web lo podemos hacerlo de tres formas:

1ra Forma

Definiendo una hoja de estilo interna (dentro de nuestro HTML), ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>  
  <title>Mi primera pagina</title>
  <style>
    p{
  color: #f00;
}
  </style>
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Como podemos ver para esta forma es necesario definir dentro de nuestras etiquetas “head”, la etiqueta “style” y dentro colocar nuestro código CSS.

2da Forma

Definiendo nuestro estilo dentro de una etiqueta HTML (esta forma se conoce como inline)

1
2
3
4
5
6
7
8
<html>
<head>  
  <title>Mi primera pagina</title>
</head>
  <body>
    <p style="color: #ff0000;">hola mundo!</p>
  </body>
</html>

De esta forma vemos que nuestro código CSS esta dentro de la etiqueta “p”.

3ra Forma

La tercera forma es manejando nuestro código CSS en un archivo externo con extensión “css”, por ejemplo:

Vamos a crear el archivo style.css con las siguientes lineas:

1
2
3
p{
  color: #ff0000;
}

Luego vamos a tener nuestro archivo HTML con el siguiente nombre: mi-primera-pagina.html y tendrá el siguiente código:

1
2
3
4
5
6
7
8
9
<html>
<head>  
  <title>Mi primera pagina</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Usando la etiqueta “link” y el atributo href=”style.css” incluimos nuestro archivo style.css a nuestra pagina HTML.

El resultado de nuestro ejemplo puede verse a continuación:

See the Pen Simple html by Ramón (@viviryaprenderweb) on CodePen.

Bueno hasta aquí con esta pequeña introducción a CSS, espero que haya sido de ayuda y posteriormente estaremos publicando otros post para ampliar tu conocimiento en CSS.

Saludos y hasta pronto ;)