AdNow

loading...

Estilos HTML - CSS

-

Estilos HTML - CSS

❮ AnteriorSiguiente ❯

CSS = Estilos y colores

Manipular texto
Colores,  cajas

Estilo HTML con CSS

CSS significa C ascading S tyle S heets.
CSS describe cómo los elementos HTML se mostrarán en la pantalla, papel o en otros medios .
CSS ahorra mucho trabajo . Puede controlar el diseño de múltiples páginas web a la vez.
CSS se puede agregar a los elementos HTML de 3 maneras:
  • En línea : utilizando el atributo de estilo en elementos HTML
  • Interno : utilizando un elemento style en la sección head
  • Externo : utilizando un archivo CSS externo
La forma más común de agregar CSS es mantener los estilos en archivos CSS separados. Sin embargo, aquí utilizaremos el estilo en línea e interno, porque es más fácil de demostrar y más fácil para usted que Pruebelo usted mismo.
Consejo: Puede aprender mucho más sobre CSS en nuestro tutorial de CSS.

CSS en línea

Un CSS en línea se usa para aplicar un estilo único a un solo elemento HTML.
Un CSS en línea usa el atributo de estilo de un elemento HTML.
Este ejemplo establece el color del texto del elemento h1 en azul:

Ejemplo

<h1 style="color:blue;">This is a Blue Heading</h1>
Pruebelo usted mismo »

CSS interno

Un CSS interno se usa para definir un estilo para una sola página HTML.
Un CSS interno se define en la sección head de una página HTML, dentro de un elemento style:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Pruebelo usted mismo »

CSS externo

Una hoja de estilo externa se utiliza para definir el estilo de muchas páginas HTML.
Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo, cambiando un solo archivo.
Para usar una hoja de estilo externa, agregue un enlace a ella en la sección head de la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Pruebelo usted mismo »
Se puede escribir una hoja de estilo externa en cualquier editor de texto. El archivo no debe contener ningún código HTML, y debe guardarse con una extensión .css.
Así es como se ve el "styles.css":
body {
    background-color: powderblue;}
h1 {
    color: blue;}
p {
    color: red;}

Fuentes CSS

La propiedad de color CSS define el color del texto que se utilizará.
La propiedad de la familia de fuentes CSS define la fuente que se utilizará.
La propiedad de tamaño de fuente CSS define el tamaño de texto que se utilizará.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Pruebelo usted mismo »

Borde de CSS

La propiedad de borde CSS define un borde alrededor de un elemento HTML:

Ejemplo

p {
    border: 1px solid powderblue;}
Pruebelo usted mismo »

CSS Relleno

La propiedad de relleno de CSS define un relleno (espacio) entre el texto y el borde:

Ejemplo

p {
    border: 1px solid powderblue;
    padding: 30px;}
Pruebelo usted mismo »

Margen de CSS

La propiedad de margen CSS define un margen (espacio) fuera del borde:

Ejemplo

p {
    border: 1px solid powderblue;
    margin: 50px;}
Pruebelo usted mismo »

El atributo de id.

Para definir un estilo específico para un elemento especial, agregue un atributo de identificación al elemento:
<p id="p01">I am different</p>
luego defina un estilo para el elemento con la identificación específica:

Ejemplo

#p01 {
    color: blue;}
Pruebelo usted mismo »
Nota: ¡ La identificación de un elemento debe ser única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!

La clase Atributo

Para definir un estilo para un tipo especial de elementos, agregue un atributo de clase al elemento:
<p class="error">I am different</p>
luego defina un estilo para los elementos con la clase específica:

Ejemplo

p.error {
    color: red;}
Pruebelo usted mismo »

Referencias externas

Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.
Este ejemplo usa una URL completa para vincular a una hoja de estilos:

Ejemplo

<link rel="stylesheet"href="https://www.w3schools.com/html/styles.css">
Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html en el sitio web actual:

Ejemplo

<link rel="stylesheet" href="/html/styles.css">
Este ejemplo vincula a una hoja de estilo ubicada en la misma carpeta que la página actual:

Ejemplo

<link rel="stylesheet" href="styles.css">
Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .

Resumen del capítulo

  • Use el atributo de estilo HTML para el estilo en línea
  • Utilice el elemento HTML style para definir CSS interno
  • Use el elemento HTML link para referirse a un archivo CSS externo
  • Utilice el elemento HTML head para almacenar elementos style y link
  • Use la propiedad de color CSS para colores de texto
  • Utilice la propiedad de la familia de fuentes CSS para fuentes de texto
  • Use la propiedad de tamaño de fuente CSS para tamaños de texto
  • Use la propiedad de borde CSS para bordes
  • Use la propiedad de relleno CSS para espacio dentro del borde
  • Use la propiedad de margen CSS para espacio fuera del borde

Ponte a prueba con ejercicios!

Etiquetas de estilo HTML

TagDescription
styleDefines style information for an HTML document
linkDefines a link between a document and an external resource

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la séptima línea de
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente, una pági
Leer más

Visitas a este blog