CSS

CSS es el acrónimo de «Cascading Style Sheets» (Hojas de Estilo en Cascada en español). CSS es una extensión del HTML básico que le permite diseñar sus páginas web. Entre sus ventajas están que ahorra tiempo y mejora el aspecto visual de una manera sencilla.

CSS está formado por conjuntos de reglas. Cada regla a su vez está formada por: un selector y una declaración.

Image result for css anatomy element
Anatomía de una regla en CSS

El selector apunta al elemento HTML que desea estilizar. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos. Una declaración CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados por llaves.

¿Cómo enlazar HTML con CSS?

Existen 3 formas de unir una hoja de estilo con un página HTML, de forma interna, externa o en línea. A continuación se detalla en cada uno:

Externo

Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo. Cada página debe incluir una referencia al archivo de la hoja de estilo externa dentro del elemento . El elemento <link> va dentro de la sección <head>

<head>
<link rel="stylesheet" type="text/css"href="miEstilo.css">
</head>

Una hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener ninguna etiqueta html. El archivo de hoja de estilo debe guardarse con una extensión .css. Un ejemplo de como se podría ver «miEstilo.css»:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px
}

Interno

Se puede utilizar una hoja de estilo interna si una sola página tiene un estilo único. Los estilos internos se definen dentro del elemento <style> en la sección <head>.

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

En línea

Se puede usar un estilo en línea para aplicar un estilo único para un solo elemento. Para usar estilos en línea, agregue el atributo de estilo al elemento relevante. El atributo de estilo puede contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo de un elemento <h1>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1> 

Si desea conocer más acerca de CSS visite w3Schools.

Referencias

CSS tutorial

w3Schools

Deja un comentario