Da Estilo al documento HTML entero con estas propiedades CSS, elementos y atributos html

Estilos en HTML – con CSS

---

Dando estilo con CSS en HTML

CONTINUACIÓN...

Bordes CSS

La propiedad CSS border coloca un borde alrededor de un elemento HTML:

p {
 border: 1px solid powderblue;
}

Acolchado o relleno CSS

La propiedad CSS padding establece un relleno o acolchado (un espacio) entre el texto y el borde de un elemento:

p {
 border: 1px solid powderblue;
 padding: 30px;
}

Márgenes CSS

La propiedad CSS margin define un margen (otro espacio) luego de, fuera de, o exterior a el borde de un elemento:

p {
 border: 1px solid powderblue;
 margin: 50px;
}

---

El atributo id

Para aplicar un estilo específico a un elemento especial, añade el atributo id al elemento:

<p id="p01">Soy distinto</p>

Luego define un estilo para el elemento que tiene ese id específico:

#p01 {
 color: blue;
}

Nota: el id de un elemento debería ser único dentro de una página, de modo que el seleccionador de ids (#id (#p01, en el caso anterior)) se utilice para seleccionar ¡un único elemento!

El atributo class

Para aplicar un estilo a un tipo especial de elementos, añade un atributo class al elemento:

<p>Este es un parrafo.</p>
<p>Este es un párrafo.</p>

<p class="presunción">Ella y yo somos distintos</p>

<p>Este es un párrafo.</p>

<p class="presunción ">El y yo somos distintos</p>

Luego define un estilo para los elementos que pertenecen a esa clase especifica:

p.presunción {
 color: red;
}

---

Referencias externas

Las hojas de estilo externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

• Este ejemplo usa una URL absoluta para enlazarse a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para más información, sino en un archivo propiamente CSS, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

  <link rel="stylesheet" href="http://www.ejemplo.com/html/estilos.css">

• Este ejemplo se enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la carpeta “css” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

  <link rel="stylesheet" href="/css/estilos.css">

  Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/css” a razón de que se entiende similar a “C:\css\estilos.css”, en donde “C:” que es la raíz de todo, puede omitirse “\css\estilos.css” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\css\estilos.css”. No es lo mismo “css\estilos.css” que “\css\estilos.css”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.

• Este ejemplo enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la misma carpeta en donde se encuentra la presente pagina web:

  <link rel="stylesheet" href="estilos.css">

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

---

Resumen de lo aprendido

• Usa el atributo HTML style para la estilización en línea
• Usa el elemento HTML <style> para definir código CSS interno, que no es en línea
• Usa el elemento HTML <link> para referir un archivo CSS independiente y/o externo
• Usa el elemento HTML <head> para anidar los elementos <style> y <link>
• Usa la propiedad CSS color para los colores de texto
• Usa la propiedad CSS font-family para los tipos de letra
• Usa la propiedad CSS font-size para los tamaños de texto
• Usa la propiedad CSS border para los bordes de los elementos
• Usa la propiedad CSS padding para espaciar hacia dentro de los bordes de los elementos
• Usa la propiedad CSS margin para espaciar hacia fuera de los bordes de los elementos

Etiquetas HTML relacionadas al estilo

Etiqueta	Descripción
<style>	Define información de estilo para un documento HTML
<link>	Define un enlace entre un documento HTML y un recurso externo tal, como una hoja de estilo

---

final de Estilos en HTML – con CSS, a continuación mas temas...