Usando el atributo "style"
El atributo "style" permite a los autores declarar propiedades de estilo "en línea" como valor de un atributo. Es útil cuando el autor necesita declarar un conjunto único de propiedades para un elemento específico. La sintaxis para las propiedades CSS son las mismas.
Código
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Contenido del párrafo</p>
Vista
Contenido del párrafo
Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior. La diferencia es que este último sólo afecta al elemento contenedor y el primero afecta implícitamente a todos los párrafos.
Usando el elemento HTML style
El elemento HTML style define un bloque donde las declaraciones de estilo pueden ser contenidas. El bloque de estilo debe ser declarado en algún lugar del encabezado del documento (elemento HTML head) y definirá estilos y clases para el documento actual.
<style type="text/css">
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
a {
font-size: 12px;
font-weight: bold;
}
</style>
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
a {
font-size: 12px;
font-weight: bold;
}
</style>
Nota que estas dos definiciones afectarán a todos los elementos "a" y "p" presentes en el documento.
Usando archivos externos
Los archivos externos también pueden ser utilizados para definir propiedades de estilo para uno o más documentos. El archivo, usalmente presenta la extensión "css" (por ejemplo, "basic.css") y el conjunto de propiedades puede ser definido de la misma forma que en el contenido del elemento HTML style. Esta práctica separa completamente la parte semántica de la presentación del documento, mientras ayuda a los autores a compartir definiciones de estilo entre varias páginas de sitio.
Para hacer referencia a un archivo CSS desde el documento HTML, puedes usar el tag HTML link en el encabezado del mismo. Esta declaración le dice al agente de usuario, dónde se pueden encontrar las declaraciones de estilo de este documento.
<link type="text/css" href="basico.css" />
Usar esta misma línea en diferentes documentos, te permitirá especificar atributos comunes a un conjunto de páginas (o inclusive a un sitio entero), lo que puede resultar en actualizaciones más sencillas.
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Contenido del párrafo</p>
<style type="text/css">
mitexto {
padding: 10px;
border-style: solid;
border-color: red;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
</style>
<br />
<mitexto>Este es otro ejemplo que aplico</mitexto>
See the Pen blDjq by vonbeitthia (@vonbeitthia) on CodePen.
