AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Cómo agregar CSS


Next Page >>
HTML images

CSS Tutorial » Cómo agregar CSS

CSS puede adjuntarse como un documento separado o incrustarse en el propio documento HTML. Hay tres métodos para incluir CSS en un documento HTML:

1. Estilos en línea: uso del atributo de estilo en la etiqueta de inicio HTML.
2. Estilos incrustados: uso del elemento <style> en la sección del encabezado de un documento.
3. Hojas de estilo externas: usando el elemento <link>, apuntando a un archivo CSS externo.

En este tutorial cubriremos estos tres métodos para insertar CSS uno por uno.

Nota: Los estilos en línea tienen la prioridad más alta y las hojas de estilo externas tienen la más baja. Significa que si especifica estilos para un elemento tanto en hojas de estilo incrustadas como externas, las reglas de estilo en conflicto en la hoja de estilo incrustada anularán la hoja de estilo externa.

 

Estilos en línea

Los estilos en línea se utilizan para aplicar las reglas de estilo únicas a un elemento colocando las reglas CSS directamente en la etiqueta de inicio. Se puede adjuntar a un elemento mediante el atributo de estilo.

El atributo de estilo incluye una serie de propiedades CSS y pares de valores.
Cada par "propiedad: valor" está separado por un punto y coma (;), tal como lo escribiría en una hoja de estilo incrustada o externa. Pero debe estar todo en una línea, es decir, sin salto de línea después del punto y coma, como se muestra aquí:

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de estilos CSS en línea</title>
</head>
<body>
<h1 style="color:red; font-size:30px;">Este es un titulo</h1>
<p style="color:green; font-size:22px;">Este es un párrafo.</p>
<div style="color:blue; font-size:14px;">Este es un contenido de texto.</div>
</body>
</html>

El uso de estilos en línea generalmente se considera una mala práctica. Como las reglas de estilo están incrustadas directamente dentro de la etiqueta HTML, hace que la presentación se mezcle con el contenido del documento; lo que hace que el código sea difícil de mantener y niega el propósito de usar CSS.

Etiquetas: como agregar css a html, ejemplos de paginas web en html y css, etiqueta style html

 

Hojas de estilo incrustadas

Las hojas de estilo integradas o internas solo afectan al documento en el que están integradas.

Las hojas de estilo incrustadas se definen en la sección de un documento HTML utilizando el elemento <style>. Puede definir cualquier número de elementos
<style> en un documento HTML, pero deben aparecer entre las etiquetas <head> y </head>.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi documento HTML</title>
<style>
body {
background-color: #09F;
}
p {
color: #E5E5E5;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Este es un titulo</h1>
<p>Este es un párrafo de texto.<br />
Este es un párrafo de texto.</p>
</body>
</html>
Note:  El atributo de tipo de la etiqueta <style> y <link> (es decir, type = "text / css") define el idioma de la hoja de estilo. Este atributo es puramente informativo. Puede omitir esto ya que CSS es el lenguaje de hoja de estilo estándar y predeterminado en HTML5.

 

Hojas de estilo externas

Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas del sitio web.

Una hoja de estilo externa contiene todas las reglas de estilo en un documento separado que puede vincular desde cualquier archivo HTML en su sitio. Las hojas de estilo externas son las más flexibles porque con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.

Puede adjuntar hojas de estilo externas de dos formas: vinculando e importando.

Vinculación de hojas de estilo externas

Antes de vincular, primero debemos crear una hoja de estilo. Abramos su editor de código favorito y creemos un nuevo archivo. Ahora escriba el siguiente código CSS dentro de este archivo y guárdelo como "style.css".

style.css
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background-color: #9FF;
}
h1 {color: green;
font-family: Arial, Sans-Serif;
font-size: 22px;
margin: 0px;
}
h2 {color: red;
font-family: Arial, Sans-Serif;
font-size: 22px;
margin: 0px;
}
p {
color: purple;
}

Una hoja de estilo externa se puede vincular a un documento HTML mediante la etiqueta <link>. La etiqueta <link> va dentro de la sección <head>, como puede ver en el siguiente ejemplo:

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi documento HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Este es un titulo h1 </h1>
<h2>Este es un titulo h2 </h2>
<p>Este es un párrafo de texto.</p>
</body>
</html>
Nota: Entre los tres métodos, el uso de hojas de estilo externas es el mejor método para definir y aplicar estilos a los documentos HTML.

 



como agregar css a html, ejemplos de paginas web en html y css, etiqueta style html
Cómo agregar CSS a HTML - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...