Se trata de escribir el estilo como un atributo dentro del elemento, de la etiqueta html.
A partir del documento que hemos creado como ejemplo en la página anterior, vamos a hacer algunas modificaciones con este tipo de CSS.
Por ejemplo, vamos a establecer el tercer párrafo a una fuente de tipo courier.
Y el fondo del <h2> a azul; el color del texto a blanco y el tamaño a 36 píxeles. El tamaño por defecto del <h1> es de 32 píxeles, con lo que, con esta modificación, hacemos que el <h2> sea mayor que el de <h1>. Aunque, como ya hemos dicho, a nivel semántico, el <h1> sigue siendo de mayor importancia.
Nuestro código quedaría así:
El primer CSS:
<p style="font-family:courier;">Si queremos hacer un salto de línea sin salir del párrafo,
El segundo CSS:
<h2 style="background-color:blue; color:white; font-size:36px;">Encabezado de segundo orden</h2>
Y este es el resultado:
Página inicial con los estilos en línea modificados.
El CSS se declara en la cabeza del documento, en el <head>.
Vamos a borrar los estilos en línea realizados y vamos ahora a modificar algunas etiquetas con esta técnica.
Por ejemplo, establecemos el <h1> con un color de fondo rosa y con una font family cursive.
.Este es el código introducido:
<title>Encabezados y párrafos</title> <style> h1{ background-color:pink; font-family:cursive; } </style> </head>
Observa que el código del CSS comienza con la etiqueta <style> y acaba en </style>. He colocado la línea anterior y la posterior para que sitúes perfectamente el sitio en el que se coloca el código CSS.
Y este es el resultado:
Página inicial con los estilos internos modificados (1).
Observa que en esta ocasión hemos declarado un CSS para un elemento <h1> pero como lo hemos hecho en la cabeza del documento, esta declaración afecta a todos los elementos <h1> que haya en esa página. En este caso hay dos... También podríamos declarar algún CSS para más de un elemento html a la vez. Por ejemplo, vamos a hacer que los párrafos y el elemento <h3> sean de estilo bastardilla, de color verde oscuro y en negrita. Conservando lo que hemos hecho anteriormente.
Este sería el código:
<style> h1{ background-color:pink; font-family:cursive; } p, h3{ font-style:italic; color:darkgreen; font-weight: bold; } </style>
Observa que, para hacer que un estilo afecte a varios elementos html a la vez, ponemos el contenido de sus etiquetas separadas por una coma.
En este caso, hacer que el <h3> se ponga en negrita es redundante porque ya todos los encabezados están en negrita por defecto, pero observa que las otras dos propiedades que hemos modificado (el color verde y la bastardilla) las ha implementado.
Este es el resultado:
Página inicial con los estilos internos modificados (2).
Tal vez te estés preguntando cómo va esto de los colores.
Los colores html se suelen referenciar, la mayoría de las veces, con el código denominado hexadecimal. Pero, en esta ocasión, hemos empleado, el nombre en inglés. Esto se puede hacer con unos cuántos colores. No muchos, la verdad. Para el resto, tendremos que usar otros códigos, por ejemplo el código hexadecimal del que hablaremos y te explicaré más adelante.
Por si te ha entrado interés en saber cuántos colores se pueden escribir con el nombre y cuáles son estos nombres, he preparado (actualizado) este listado en el que escribo el nombre, pinto el color y lo comparo con el color pintado por el código hexadecimal.
Color N. | Nombre | Color H. | Cód. Hex. |
---|---|---|---|
IndianRed | #cd5c5c | ||
LightCoral | #f08080 | ||
Salmon | #fa8072 | ||
DarkSalmon | #e9967a | ||
LightSalmon | #ffa07a | ||
Crimson | #dc143c | ||
Red | #ff0000 | ||
Firebrick | #b22222 | ||
DarkRed | #8b0000 | ||
Pink | #ffc0cb | ||
LightPink | #ffb6c1 | ||
HotPink | #ff69b4 | ||
DeepPink | #ff1493 | ||
MediumVioletRed | #c71585 | ||
PaleVioletRed | #db7093 | ||
LightSalmon | #ffa07a | ||
Coral | #ff7f50 | ||
Tomato | #ff6347 | ||
OrangeRed | #ff4500 | ||
DarkOrange | #ff8c00 | ||
Orange | #ffa500 | ||
Gold | #ffd700 | ||
Yellow | #ff0000 | ||
LightYellow | #ffffe0 | ||
LemonChiffon | #fffacd | ||
lightgoldenrodYellow | #fafad2 | ||
PapayaWhip | #ffefd5 | ||
Moccasin | #ffe4b5 | ||
PeachPuff | #ffdab9 | ||
PaleGoldenrod | #eee8aa | ||
Khaki | #f0e68c | ||
DarkKhaki | #bdb76b | ||
Lavender | #e6e6fa | ||
Thistle | #d8bfd8 | ||
Plum | #dda0dd | ||
Violet | #ee82ee | ||
Orchid | #da70d6 | ||
Fuchsia | #ff00ff | ||
Magenta | #ff00ff | ||
MediumOrchid | #ba55d3 | ||
MediumPurple | #9370db | ||
RebeccaPurple | #663399 | ||
Blueviolet | #8a2be2 | ||
DarkViolet | #9400d3 | ||
DarkOrchid | #9932cc | ||
DarkMagenta | #8b008b | ||
Purple | #800080 | ||
Indigo | #4b0082 | ||
SlateBlue | #6a5acd | ||
DarkSlateBlue | #483d8b | ||
MediumSlateBlue | #7b68ee | ||
GreenYellow | #adff2f | ||
Chartreuse | #7fff00 | ||
LawnGreen | #7cfc00 | ||
Lime | #00ff00 | ||
LimeGreen | #32cd32 | ||
PaleGreen | #98fb98 | ||
LightGreen | #90ee90 | ||
MediumSpringGreen | #00fa9a | ||
SpringGreen | #00ff7f | ||
MediumSeaGreen | #3cb371 | ||
SeaGreen | #2e8957 | ||
ForestGreen | #228b22 | ||
Green | #008000 | ||
DarkGreen | #006400 | ||
YellowGreen | #9acd32 | ||
OliveDrab | #6b8e23 | ||
Olive | #808000 | ||
DarkOliveGreen | #556b2f | ||
MediumAquamarine | #66cdaa | ||
DarkSeaGreen | #8fbc8b | ||
LightSeaGreen | #20b2aa | ||
DarkCyan | #008b8b | ||
Teal | #008080 | ||
Aqua | #00ffff | ||
Cyan | #00ffff | ||
LightCyan | #e0ffff | ||
PaleTurquoise | #afeeee | ||
Aquamarine | #7fffd4 | ||
Turquoise | #40e0d0 | ||
MediumTurquoise | #48d1cc | ||
DarkTurquoise | #00ced1 | ||
CadetBlue | #5f9ea0 | ||
SteelBlue | #4682b4 | ||
LightSteelBlue | #b0c4de | ||
Powderblue | #b0e0e6 | ||
LightBlue | #add8e6 | ||
SkyBlue | #87ceeb | ||
lightskyblue | #87cefa | ||
DeepSkyBlue | #00bfff | ||
DodgerBlue | #1e90ff | ||
CornflowerBlue | #6495ed | ||
MediumSlateBlue | #7b68ee | ||
RoyalBlue | #4169e1 | ||
Blue | #0000ff | ||
MediumBlue | #0000cd | ||
DarkBlue | #00008b | ||
Navy | #000080 | ||
MidnightBlue | #191970 | ||
Cornsilk | #fff8dc | ||
BlanchedAlmond | #ffebcd | ||
Bisque | #ffe4c4 | ||
NavajoWhite | #ffdead | ||
Wheat | #f5deb3 | ||
BurlyWood | #deb887 | ||
Tan | #d2b48c | ||
RosyBrown | #f4a460 | ||
Sandybrown | #f4a460 | ||
Goldenrod | #daa520 | ||
DarkGoldenrod | #b8860b | ||
Peru | #cd853f | ||
Chocolate | #d2691e | ||
SaddleBrown | #8b4513 | ||
Sienna | #a0522d | ||
Brown | #a52a2a | ||
Maroon | #800000 | ||
White | #ffffff | ||
Snow | #fffafa | ||
HoneyDew | #f0fff0 | ||
MintCream | #f5fffa | ||
Azure | #f0ffff | ||
AliceBlue | #f0f8ff | ||
GhostWhite | #f8f8ff | ||
WhiteSmoke | #f5f5f5 | ||
SeaShell | #fff5ee | ||
Beige | #f5f5dc | ||
OldLace | #fdf5e6 | ||
FloralWhite | #fffaf0 | ||
Ivory | #fffff0 | ||
AntiqueWhite | #faebd7 | ||
Linen | #faf0e6 | ||
LavenderBlush | #fff0f5 | ||
MistyRose | #ffe4e1 | ||
Gainsboro | #dcdcdc | ||
LightGray | #d3d3d3 | ||
Silver | #c0c0c0 | ||
DarkGray | #a9a9a9 | ||
Gray | #808080 | ||
DimGray | #696969 | ||
LightSlateGray | #778899 | ||
SlateGray | #708090 | ||
DarkSlateGray | #2f4f4f | ||
Black | #000000 |