# data[].attributes.body
Estilo 1: Embedded
<style type=»text/css»>
p {
color: #00f;
}
</style>

Estilo 2: External
<link rel=»stylesheet» type=»text/css» href=»styles.css» />

# data[].attributes.body
Estilo 1: Opacity
Estilo 2: selector de identificación(ID) #mi-id
seleciona <p id="mi-id"> y <a id="mi-id">

# data[].attributes.body
Estilo 1: Formato a Botón
.button {
background-color: #4CAF50;
border              : none;
color                : white;
padding             : 15px 32px;
text-align          : center;
font-size            : 16px;
}
Estilo 2: Formato a Formulario
form{
width             :300px;
padding          :16px;
border-radius  :10px;
margin           :auto;
background-colo r:#562A2A;
}

# data[].attributes.body
Estilo 1.-Cambiar color a la página

html {

background-color: #00539F;

}

Estilo 2.-Envejecer imágenes: Código HTML
<div class=”antiguo”>
<a href=”URL_ENLACE”><img src=”URL_IMAGEN” /></a>
</div>

# data[].attributes.body
Estilo 1: opacity
img.opacity {
opacity: 1;
filter: alpha(opacity=50);
zoom: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=100);
zoom: 1;
}

Estilo 2: :hover
a {
background-color: powderblue;
transition: background-color .5s;
}

a:hover {
background-color: gold;
}

# data[].attributes.body
*{

margin: 0;
padding: 0;

box-sizing: border-box;

}

body{
background-image:url("sport.jpg");

}

.form-register{
width: 400 px;

background: #474747   ;
padding: 30px;
margin:auto;
margin-top:100px;
border-radius:'calibri';
color:white;
box-shadow: 7px 13px 37px  #000;

}

.form-register{

font-size:22px;
margin-bottom: 20px;
}

.controls{

width: 100%;
background: #16D7C8;

padding:10px;

border-radius: 4px;
margin-bottom: 16px;
border: 1px solid #1f53c5;
font-family: 'calibri';
font-size: 18px;

}

.form-register p {
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
background: #001083 ;

}

.form-register a:hover {

color: white;
text-decoration: underline;

}

.form-register.botons{

width: 100%;
background: #1f53c5;
border: none;
padding: 12px;
color:white;

margin: 16px  0;

font-size: 16px;

text-align: center;

}

# data[].attributes.body
<body bgcolor="#91109C">

</body>

<font color="black" size= 5><p align="justify"> jdghc7nynvucryrxcnmcnmyxcrnmyxcrynm </p></font>

# data[].attributes.body
Estilo 1: centrar la imagen

img {
  display: block;
  margin: 0 auto;
}

estilo 2:  dar estilo al cuerpo de documento:

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

# data[].attributes.body
Para el fondo se colocará un color estático y relajante para el usuario, mientras que en el texto solo tendrán color fijo (negro o blanco dependiendo del primer factor) y, aquellas palabras importantes que requieran algún resaltado se harán con un color acordé al estilo de la página, es decir todos los colores en aspecto estético serán monocromáticos a excepción de que se añadan tablas que requieran algún color para remarcar la categoría a mostrar.
El título y el subtítulo se le darán unos fonts que se puedan distinguir entre ellos, por ejemplo, el título con un estilo de font lettering y los subtítulos/categorías con una fuente minimalista.
En caso de haber una introducción está será igual de diferente que la de los demás textos para no perder al usuario. Y para no aburrir al usuario en cada categoría que haya después de la introducción (obvio, si es que hay) se incruste una imagen llamativa conforme al tema a hablar en la categorías/subtítulos
Supongo que es una idea base xd

# data[].attributes.body
Estilo 1: Alineado con la línea base del texto

textarea {
  vertical-align: top;
}

Estilo 2: El elemento legend

legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

# data[].attributes.body
Karime.irving
Para elementos gráficos de la web..
background-image: imagen de fondo para un elemento.
Ej.: #content {background-image:

background-position: posición de la imagen dentro del fondo. Se puede definir al centro, izquierda o derecha. También con píxeles y porcentajes.

# data[].attributes.body
Angel López y Márco Polo

(estilo a un tipo concreto de botón dentro de mi sitio)
#boton {
background-color: #ccc;
color: #fff;
width: 100px;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}

Cambiar interniliado, tipo de letra, color, tamaño etc.

p {
font-family: 'Arial';
font-size: 14px;
color: #ccc;
line-height: 18px;
margin-bottom: 20px;
}

# data[].attributes.body
Estilo 1: Margen CSS
p{
border:2px solid powderblue
margin: 50px;

Estilo 2: Gráficos y bloques flotantes
p { color: red:
font- size: 10px:
font - family : Verdana :
border: 2px:
border - color : blue:
border - style : solid:
width :200px
height : 100px :
}
img {float : right:}

# data[].attributes.body
texto 1: poner color a las letras

<p>
parrafo con varias letras <span style="color:green">en color verde</span>.
</p>

# data[].attributes.body
Efectos especiales con el texto:

all.texto {
  margin-top:-24px;
  color:yellow;
  font-size:20px;
  font-family:Verdana;
}
all.sombra {
  margin-top:2px;
  margin-left:2px;
  color:black;
  font-size:20px;
  font-family:Verdana;
}

<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto sombreado</DIV>
<DIV ALIGN="CENTER" CLASS="texto">Prueba de texto sombreado</DIV>

Estilos en los links:

a {text-decoration: none;}

a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}

# data[].attributes.body
si quieres añadir una imagen banner enlazada a una URL concreta de tu sitio web o externa, y que se vea en una zona de widgets de tu sitio, dentro de la caja texto que arrastras al área de widgets correspondiente escribes lo siguiente:

<a href="URL DEL ENLACE" target="_blank">

<img src="URL DE LA IMAGEN">

</a>

# data[].attributes.body
Fannyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

# data[].attributes.body
Para el fondo se colocará un color estático y relajante para el usuario, mientras que en el texto solo tendrán color fijo (negro o blanco dependiendo del primer factor) y, aquellas palabras importantes que requieran algún resaltado se harán con un color acordé al estilo de la página, es decir todos los colores en aspecto estético serán monocromáticos a excepción de que se añadan tablas que requieran algún color para remarcar la categoría a mostrar.

# data[].attributes.body
Yeray es gay

# data[].attributes.body
https://youtu.be/PRpLSygw_eY