HTML/CSS básico (II) - Aplicando estilos

Poco a poco, me va picando la curiosidad sobre los códigos HTML/CSS, y recogiendo información por Google, voy a hablar un poco de las 'posibilidades' del atributo 'style' colocado dentro de una etiqueta.
Me voy a basar en este magnífico Manual de HTML, de Angel Ricardo Puente, que anda por Google...
http://roble.pntic.mec.es/apuente/html/paginas/contenidos.htm
a quien hay que agradecer vivamente su aportación. 
(Por cierto, 'mec.es' es el Ministerio de Educación y Ciencia español y 'pntic' es 'Programa de Nuevas Tecnologías de la Información y de la Comunicación).
(y, también por cierto, el que quiera profundizar en el tema... ahí tiene ese Manual, que es bastante prolijo. Yo solo voy a extractar aquí una serie de conceptos básicos sobre el uso más común de 'style' dentro de una etiqueta.
Y es que el atributo style, colocado en muchas etiquetas, como p (párrafo), div, span, class, img (imagen), etc, etc, de esta forma (por ejemplo, con 'div')
<div style=”...”>contenido al que queremos aplicar el estilo</div>
nos permite asignar unas propiedades (estilo) a ese contenido.
Bien y... ¿qué 'propiedades' podemos meter entre las comillas...?
Los a tributos más comunes (hay más) que podemos definir son...

Si hablamos de texto

“font-family: Verdana, sans serif;"> (a veces se ponen varias, de la misma familia, la elegida, otra alternativa y/o la genérica de esa familia (serif, sans serif) por si no existe, eventualmente, alguna)
“font-size: 12;"> (12 pixeles), si queremos darle un valor absoluto, o bien small, x-small, larger, etc, si queremos darle un valor relativo respecto al tamaño que hayamos definido como 'normal'.
“font align: left;"> (o right, o center). También se podría poner en valor absoluto align: center
<“color= #dddddd;"> (o el código que decidas. Puedes ver algunos aquí. O mira por Google).

Si hablamos de bloques (span), secciones (div), o clases (class)...

<div style= “background-color: #dddddd;">
<div style= “margin-left: 2em;"> (para margen izquierdo)
<div style= “margin: 30;"> (en pixeles, y para todos los márgenes)
<div style= “padding: 5px;">
<div style= “text-align: justify;"> (o left, center...)
<div style= “width: 550px;"> (fija la anchura. También, height (altura))
Todos estos atributos con font, div, span, class... se pueden colocar:

juntos (dentro de las mismas comillas) separados por un punto y coma, mas un espacio en blanco, es decir, así
<span style= “background-color: #dddddd; text-align: justify; width: 550px;>... … </span>
o por separado, que es como se suele ver en la edición HTML de las entradas del blog, o sea así
<span style= “background-color:...”><span style= “width: 550px;”>

Y, por supuesto, tendremos que cerrar, con las correspondientes etiquetas de cierre </...> para delimitar hasta donde debe aplicarse ese estilo definido. (cada una de las etiquetas abiertas (del tipo (por ejemplo) '<span style="...>) debe cerrarse con su propia etiqueta de cierre '</span>': una sola, si las ponemos 'juntos' o las que correspondan, si las panemos por separado)

Y si hablamos de imágenes

Las imágenes se añaden con la etiqueta: <a href= “URL de la imagen” , donde se puede añadir, a continuación, el atributo style= ... para, como antes, poder incorporar las propiedades...
margin: … . Por cierto, por la 'potencia' de CSS, escribiendo, por ejemplo, margin: 2 (un solo valor) entiende que se debe dar ese valor a todos los márgenes (left, right, top y botton). Y hay más posibilidades, mira aquí
align= left, right, center
float este es un elemento muy interesante, permite hacer discurrir el texto a izquierda o derecha de una imagen, si ésta no está centrada. Por defecto el valor es 'none' y el texto no 'fluye' alrededor de la caja, pero se puede cambiar y controlar su uso. Eligiendo que las imágenes se posicionen, de entrada, a derecha o izquierda, Blogger anula el 'none' y lo incorpora automáticamente. Si te resulta una explicación compleja,  puedes verlo aquí.
Y, añadida la imagen, aparece la propia etiqueta de la imagen, con <img scr=“URL de la imagen”, donde podemos añadir los parámetros
border="..." (por defecto, "0" )
height="..." (altura, en pixeles)
width="..." (ancho, en pixeles)

En fin que, como ves, hay muchas posibilidades. Pero te voy a dar un consejo: Blogger es muy cómodo porque te permite automatizar muchas 'a golpe de clic de ratón', pero te las presenta muy confusas, incluso poco optimizadas. Yo me imagino que un 'bloguero Pro' que escriba (e incorpore estilos) directamente desde el código HTML lo pondrá todo muy ordenadito, para aclararse mejor.
Pero este no es el caso si el que lo hace es, directamente, Blogger... y lo que ves es muy lioso. Además, usa normalmente la etiqueta <span> en vez de la etiqueta <div>, por lo que configura 'cada bloque', en vez de 'cada sección', y aparecen muchímas etiquetas de 'SPAN'.
El consejo es que primero escribas todo el texto de la entrada, sin ningún (o muy pocos) 'estilos', porque así lo verás bastante más claro en la vista 'Editar HTML', y vayas metiendo las etiquetas para incluir los estilos que quieras, poco a poco, al final. Es mucho más cómodo.