CSS (cascading style sheet) que es y como funciona

¿Que es CSS?

CSS (cascading style sheet) es el lenguaje para describir la presentación de paginas web, en esta se incluye color, fuentes, tablas, su diseño en si .
Nos permite adaptar la presentación de nuestra pagina a diferentes tipos de dispositivos (Celulares, tablas, PC, incluso las impresoras).
Es independiente de html de echo puede usarlo con cualquier lenguaje que tenga base XML.
El ser independiente de HTML lo hace facil de mantener.

Funcionamiento de CSS

Funciona a base de reglas.La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;} es la regla, h1 es el selector, {color: red;} es la declaración, color es el atributo y red el valor

Lo podemos usar dentro de nuestra pagina o desde fuera de la misma:

usando las etiquetas <style></style> dentro de el elemento head.
Tambien se puede usar el atributo style donde se quiera dar el el estilo.
desde fuera de la pagina haciendo referencia con el elemento link dentro de el elemento head.

Vamos a los ejemplos:

ejemplo 1: dentro de la misma pagina usando el elemento style entre las etiquetas <head></head>

<html>

   <head>
      <title>ejemplo de css interno</title>
      <style>
      h1{
      color: red;
      }
      </style>
   </head>

   <body>
      <h1>tendre color rojo<h1>
   </body>

</html>

ejemplo 2: usando el atributo style dentro del elemento html que queremos darle el estilo en este caso

.

<html>
   <head>
      <title>ejemolo de css inline</title>
   </head>

   <body>
      <h1 style="color:red;">tendre color rojo<h1>
   </body>
</html>

a esta clase de estilo se le suele llamar inline style

ejemplo 3: link de CSS desde fuera de la pagina.

<html>
   <head>
      <title>ejemplo de css externo</title>
      <link rel="stylesheet" type="text/css" href="cssexterno.css">
   </head>
   <body>
      <h1>encabezado con css</h1>
      <p>parrafo con css</p>
   </body>
</html>

Referencias:

w3 (word wide web consortuium)

Category: otros

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.