Modifying CSS in Wordpress theme

Text seems to remain the same size.

Are you going to make the subheadings <h3>?

While HTML allows <h1> to <h6>, are you going to use <h4>, <h5> and <h6>? If so, it would be a little odd for heading text to be smaller than <p> text.

I suggest <li> elements should be the same size as <p> elements, but they could differ.

When I ran Page Speed Insights the poor score seemed to be due to Twitter:

fotov6-twitter

Just as an exercise, I have tried coding your Hasselblad blog (without other page content):

<!DOCTYPE html>
<html lang="es">
<head>
<title>FOTOV60 - El blog del fotografo de Barcelona Agustí Pardo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descubre noticias, tutoriales y opiniones de expertos en técnicas fotográficas. Conviértete en un mejor fotógrafo con FOTOV60."/>
<style>
* {box-sizing: border-box; margin:0; font: 1.0rem Orkney, sans-serif;}
body>div {max-width: 650px; margin: 0 auto; padding: 1%;}   /* centering web page, avoiding excessive text line lengths */
h1 {font-size: 3rem; margin: 10px 0;}
h2 {font-size: 1.5rem; color:red; margin: 15px 0;}
h3 {font-size: 1.125rem; color:red; margin: 10px 0;}
p {margin: 10px 0;}
li {margin: 5px 0;}
figcaption {font-size: 0.875rem; text-align: center;}
td {border: 2px solid #ccc; padding: 5px; text-align: center; vertical-align: top;}
td img {width: 95%;}
.posted {font-size: 0.875rem; margin: 0 0 20px 20px;}
.bold {font-weight: bold;}
.photo1 {display: flex; justify-content: center;}
.photo1 figure {border: 2px solid #ccc; padding: 10px;}
.photo1 img {display: block; margin: 0 auto;}
.photos3 {border-spacing: 8px 4px;}
.photos3 col {width: 33.33%;}
</style>
</head>
<body>
<div>
<h1>FOTOV60</h1>
<article id="blog">
<h2>Explorando las Posibilidades de la Hasselblad 907X & CFV 100C</h2>
<p class="posted">Posted: 25/01/2024 by <span class="bold">Agusti Pardo</span> in <span class="bold">Hasselblad</span></p>
<p>Sum√©rgete en el mundo de la fotograf√≠a con la Hasselblad 907X & CFV 100C, una combinaci√≥n √ļnica que fusiona dise√Īo ic√≥nico y tecnolog√≠a avanzada. Esta c√°mara de formato medio de 100 megap√≠xeles te invita a explorar tres capacidades fotogr√°ficas distintas, marcando un hito en la herencia de Hasselblad.</p>
<h3>Un Vistazo a las Características Clave</h3>
<ul>
  <li>Sensor CMOS BSI de 100MP para im√°genes detalladas.</li>
  <li>Solución de colores naturales Hasselblad para una reproducción auténtica.</li>
  <li>Enfoque automático PDAF para escenas nítidas y eficientes.</li>
</ul>
<div class="photo1">
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Back-view-RIght-45-907X-CFV-100C-1_md-150x150.webp">
    <figcaption>Back View Right 45 907X & CFV 100C</figcaption>
  </figure>
</div>
<h3>Un Dise√Īo que Rinde Homenaje al Pasado y Abraza el Futuro</h3>
<p>Con su cuerpo vintage, la 907X & CFV 100C ofrece una experiencia √ļnica al combinar la est√©tica cl√°sica de las c√°maras de pel√≠cula con la versatilidad de la fotograf√≠a digital. Al capturar un momento, esta c√°mara logra inmortalizar la esencia del pasado sin renunciar a la innovaci√≥n.</p>
<p>La pantalla t√°ctil abatible permite perspectivas inigualables, brindando creatividad sin l√≠mites. Ya sea con la inclinaci√≥n de 40¬į para composiciones √ļnicas o la inclinaci√≥n de 90¬į que recuerda el estilo cl√°sico de disparo a la altura de la cintura, cada imagen se convierte en una obra de arte.</p>
<h3>Versatilidad en Cada Captura</h3>
<p>El respaldo digital CFV 100C ofrece tres configuraciones fotográficas en una, desde la conexión con el cuerpo de la cámara 907X hasta la integración con cámaras de película clásicas Hasselblad V System. La versatilidad se extiende incluso a cámaras técnicas para capturas de precisión.</p>
<div class="photo1">
  <figure>
    <img style="aspect-ratio: 300/240;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Front-view-907X-CFV-100C-without-Lens_md-300x240.webp">
    <figcaption>Back View (image needs clipping)</figcaption>
  </figure>
</div>
<h3>Rendimiento de 100 Megapíxeles</h3>
<p>El sensor CMOS de 100 megapíxeles ofrece una calidad de imagen excepcional. Con un rango dinámico de 15 pasos, conserva detalles en sombras y luces. El ISO nativo de hasta 64 asegura imágenes delicadas y transparentes, mientras que la profundidad de color de 16 bits permite gradaciones naturales en paisajes vastos.</p>
<table class="photos3">
<colgroup><col span="3">
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Left-45-907X-CFV-100C-with-OVF-and-Grip_md-150x150.webp">
    <figcaption>Left 45 907X & CFV 100C with OVF and Grip md</figcaption>
  </figure>
</td>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Back-view-RIght-45-907X-CFV-100C-1_md-150x150.webp">
    <figcaption>Back View Right 45 907X & CFV 100C</figcaption>
  </figure>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Left-CFV-100C-503CW_md-150x150.webp">
    <figcaption>Left CFV 100C & 503CW md</figcaption>
  </figure>
</td>
</table>
<h3>Colores Auténticos con Hasselblad Natural Colour Solution (HNCS)</h3>
<p>La soluci√≥n de colores naturales de Hasselblad optimiza la autenticidad de los colores, capturando transiciones suaves y delicadas. Cuando se combina con c√°maras de pel√≠cula cl√°sicas, el HNCS resalta el encanto √ļnico de cada objetivo, trascendiendo el tiempo y recreando la magia de la fotograf√≠a cinematogr√°fica.</p>
<table class="photos3">
<colgroup><col span="3">
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Bart-Kuykens-503CW-CFV-100C-CFE-40mm-1-_md-150x150.webp">
    <figcaption>Bart Kuykens 503CW & CFV 100C + CFE 40mm 1 md</figcaption>
  </figure>
</td>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Benjamin-Everett-907X-CFV-100C-XCD-38V-2_md-150x150.webp">
    <figcaption>Benjamin Everett 907X & CFV 100C + XCD 38V 2 md</figcaption>
  </figure>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Junsong-He-907X-CFV-100C-XCD-55V-2_md-150x150.webp">
    <figcaption>Junsong He 907X & CFV 100C +XCD 55V 2 md</figcaption>
  </figure>
</td>
</table>
<table class="photos3">
<colgroup><col span="3">
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/MatsLind-503CW-CFV100C-CFE-80-3_md-150x150.webp">
    <figcaption>MatsLind 503CW & CFV100C + CFE 80 3 md</figcaption>
  </figure>
</td>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Qiyi-Chen-500CM-CFV-100C-CF-50-FLE_md-150x150.webp">
    <figcaption>Qiyi Chen 500CM & CFV 100C + CF 50 FLE md</figcaption>
  </figure>
<td>
  <figure>
    <img style="aspect-ratio: 150/150;" src="https://www.fotov60.com/wp-content/uploads/2024/01/Qiyi-Chen-907X-CFV-100C-XCD-38V_md-150x150.webp">
    <figcaption>Qiyi Chen 907X & CFV 100C + XCD 38V md</figcaption>
  </figure>
</td>
</table>
<h3>Enfoque R√°pido y Eficiente</h3>
<p>Equipada con enfoque automático PDAF, la 907X & CFV 100C garantiza nitidez y agilidad en cada toma. Con 294 zonas PDAF, la velocidad de enfoque ha aumentado significativamente, logrando un 300% más en comparación con generaciones anteriores. La detección de rostros facilita la captura de retratos eficientes y perfectamente enmarcados.<p>
<h3>Almacenamiento y Conectividad</h3>
<p>La unidad SSD de 1 TB proporciona velocidades de lectura/escritura excepcionales, satisfaciendo las demandas de almacenamiento para imágenes de alta calidad. La ranura para tarjetas CFexpress Tipo B amplía las opciones de almacenamiento. Además, la conexión Wi-Fi integrada permite la transmisión de imágenes y la edición fácil a través de Phocus Mobile 2 con dispositivos iOS.</p>
<h3>Notas Importantes:</h3>
<ol>
  <li>Estado de la información: enero 2024.</li>
  <li>Al utilizar el respaldo digital CFV 100C con c√°maras cl√°sicas, el enfoque es manual.</li>
  <li>La velocidad de enfoque se midi√≥ con un objetivo XCD 55V seg√ļn el est√°ndar de prueba CIPA DCG-002.</li>
  <li>La velocidad de lectura/escritura se midió con IOmeter 1.1 para garantizar un rendimiento óptimo.</li>
  <li>Se recomienda el uso de tarjetas de memoria CFexpress Tipo B para un rendimiento ideal..</li>
  <li>Compatibilidad de flashes de alta velocidad (TTL) con zapata Nikon. Consulta ¬ęDATASHEET¬Ľ para obtener detalles de compatibilidad.</li>
  <li>Phocus Mobile 2 requiere iOS 15.0 o posterior en iPad o iPhone X o superior.</li>
</ol>
<p>*Todos los datos y fuentes anteriores son resultados de los laboratorios Hasselblad.</p>
<p>En resumen, la Hasselblad 907X & CFV 100C no es solo una cámara; es una obra maestra que fusiona el pasado con el presente, ofreciendo a los fotógrafos una tríada de posibilidades creativas. Desde la captura de paisajes impresionantes hasta la inmersión en la estética clásica de las cámaras de película, esta herramienta es una puerta a la exploración artística.</p>
<p>¬ŅQu√© opinas de esta fusi√≥n entre lo cl√°sico y lo contempor√°neo? ¬ŅTe ha inspirado a explorar nuevas formas de expresi√≥n fotogr√°fica? Nos encantar√≠a conocer tus pensamientos y experiencias. ¬°Deja tu comentario a continuaci√≥n y √ļnete a la conversaci√≥n sobre el arte de la fotograf√≠a con la Hasselblad 907X & CFV 100C!</p>
</article>
</div>
</body>
</html>
1 Like

But I only could use this code if I didn’t use WordPress, right?

Do you pass Insight with the URL by adding ?LSCWP_CTRL=before_optm at the end, or with the original URL?
When I run it with the natural link, this is the result I get: https://pagespeed.web.dev/analysis/https-www-fotov60-com/8wn2uvde1j?form_factor=mobile. I don’t understand the one for best practices because I replaced it with a file in webp format and it still detects a jpeg.


I‚Äôm not sure if I‚Äôm going to use all the headings up to h6, but from what I‚Äôve read, there‚Äôs a heading that should be a bit larger than the <p> text, and the following headings up to h6 should be smaller. I don‚Äôt remember exactly if it referred to h3, but that‚Äôs why I wanted to start by defining all the sizes and styles that can be defined and then fix the CSS definitively with the appropriate ‚Äúem‚ÄĚ units. After that, I‚Äôll proceed with cleaning up the inline CSS. For example, before fixing the issue that post titles in h2 and h2 in the text appear in different sizes, I need to define what size I want them to be and then correct the necessary CSS.

Yes.

I tested with ?LSCWP_CTRL=before_optm.

As the post titles are <h2>, why do you not make the main headings (‚Äúsubheadings‚ÄĚ) <h3>? Is that too much work?

Yes, because I must review near thousand posts. I think is better to found a solution to make h2 post titles and h2 text titles the same size. And in terms of SEO, I imagine that it won’t rank the importance of h2 the same as h3, right?

Unless it follows the new HTML5 regulations regarding headers explained in these articles.

https://www.whitespider.ie/multiple-h1-tags-wordpress-seo-html5/

https://blogger3cero.com/la-verdad-sobre-como-tener-un-seo-on-page-perfecto-con-multiples-h1-por-pagina/

https://cmorales.es/general/encabezados-en-html5/

https://socialxpl.com/seo/solucionar-multiple-h1-wordpress/

https://lenguajehtml.com/html/semantica/etiqueta-html-h1/

https://webdesign.tutsplus.com/es/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824a

I see that MDN are still saying you should avoid multiple <h1> tags here.

In the circumstances it seems best to have multiple <h1> tags where necessary, even if they are not within sectioning content elements such as <section> or <article>.

We should bear in mind that while <h1> to <h6> tags may help SEO, they are also used by screenreading software for blind people: but aria labels may also be used.

WebAIM also recommends using just one <h1> element and emphasises the importance of semantic headings for accessibility purposes. https://webaim.org/techniques/semanticstructure/#headings

1 Like

Anyway, before getting into the point of whether to use h2 or h1, I think I should define the sizes of the styles first and then think about it.

These are all the elements in the CSS stylesheet that have font-size in them. Could you help me define the optimal sizes?

p - 18px
H1 - 
H2 - 
H3 - 
H4 - 
H5 - 
H6 - 
li -
ul - 
body - 
#header .description -
#header .rss -
small - 
.fourofour - 
.commentlabel -
.commentlist li - 
.commentlist li ul li - 
#commentform p -
#sidebar -
code - 
.form-message -
input.message-field - 
.message-box textarea - 
h2.archivetitle - 
#sidebar h2 - 
#sidebar h3 - 
#commentform input - 
#commentform textarea -
#commentform #submit - 
.socialfooter ul li a - 
.blogroll-foot ul li - 
.footerlinks - 
.footerlinks ul li - 
.footerhome - 
#wp-calendar #next a - 
#wp-calendar caption - 
.postmetadata - 
th -
.wp-caption p.wp-caption-text - 
Desktop only
div#nav ul li -
*Extra large tablet screen only*/
#header .rss - 
#menu.show - 
/*for tablet screen*/
/* .column .entry p span em strong - 
Responsive for mobile
/* .column .entry p span em strong -

Is there a way to define an element like p for paragraph text and, for bold text, associate the font loaded in the corresponding @font-face for bold without directly defining the style by the font name?

In my view there is a better way to approach this. Start by saving back-up copies of your HTML and CSS files in case you wish to cancel all edits.

I suggest you start with the font size of the ordinary paragraphs within your blogs. I have pointed out to you that under 12px may be regarded as having insufficient legibility. I have also pointed out to you that you need to be careful of how a fairly large font appears on small smartphones, especially as you are justifying the text.

There is no optimal size for ordinary paragraph text in blogs or articles. The BBC tends to use 16px whereas rtve tends to use 20px, but 17px on mobiles.

I would start by removing the 1.2em multiplication factor for all text within each blog (except blog title and "Posted: . … " text). Using Developer Tools, this is found in the CSS rule starting on line 148. So change this to 1.0em rather than deleting it. This will make the list text even smaller but we need to sort that out later anyway. The paragraph text will reduce from 22.8px to 19px. If you wish to further reduce the paragraph text to say 18px, this can be done by changing the 1.9em to 1.8em in the CSS rule starting on line 290. Are you then happy with the size of ordinary paragraph text? If you wish you can try reducing it to 16px like the BBC by using 1.6em instead of 1.9em or 1.8em.

After that we can move on to adjusting the appearance of the subheadings.

Backup done!

Do you mean leaving the code like this? In this way, have I removed the multiplication of the size? Do I leave the rest of the styles as they are?

.column .entry {
  clear: left;
  line-height: 1.4em;
  font-size: 1em;
  line-height: 1.8em;
  padding-bottom: 10px;
}

Now the font size is like this. Looks good?

p {
   font-family: Orkney, Raleway, Sans-Serif;
   font-size : 1.6em;
   line-height: 1.3em;
   font-style: normal;
   text-align: justify;
}

To define the li font size its ok to make this change at line 828? (I haven’t done it yet, I’ve tested it from the dev tools only)

html>body .entry li {
  margin: 7px 0 8px 10px;
  font-size: 1.4em;
}

Yes.

Ok too?

Yes. Hopefully that will make the ordinary paragraph text font size to be16px.

If that, together with the change to the li font size, makes the paragragh text and list text look good, we can turn our attention to sorting out the subheading text.

Are you sure you want to set the line-height smaller than the font-size? That’s generally a bad idea. https://tympanus.net/codrops/css_reference/line-height/

So according to the text you linked, should I write it like this?

p {
   font-family: Orkney, Raleway, Sans-Serif;
   font-size: 1.6em;
   line-height: 1.6;
   font-style: normal;
   text-align: justify;
}

With the same size and without units?

I would certainly use a unitless line height, but I would make it larger than the font size for readability. Try 1.2 or 1.4 and see how it looks.

1.2 or 1.4 is not smaller than 1.6 em?

1.2 or 1.4 is not smaller than 1.6 em?

What do you think about @Archibald ?

It occurs to me also that the line-height is set in <p> and in .column entry. Won’t it give the same problem I had when I had to change the font-size to 1 in .column entry?

No. It means 1.2 times or 1.4 times 16.em.

Minimum should be 1.5 for accessibility (reference). Anyway the precise value in unimportant at this stage as it can be edited very quickly.

It means 1.2 or 1.4 times the font size (reference)

I suggested changing the font size in .column .entry to 1em because I could see no reason to have an unneccesary 1.2 multiplication factor. By changing it to 1em, default font sizes can now be adjusted simply by multiplying by 10. So for example to get 16px font size use 1.6em. Those with poor eyesight will still be able to change font size. Actually font-size: 1.2em; line could be deleted but I suggested keeping it with 1em in case we find there is a reason someone set it to 1.2. Without the 1.2 multiplication, font sizes will be based on 10px because of line 30 in the CSS file:

body-font-size

Oops! Yes, 1.6em :blush: