{"id":61889,"date":"2024-01-15T05:01:18","date_gmt":"2024-01-15T04:01:18","guid":{"rendered":"https:\/\/www.aulatina.com\/estilizacion-de-texto-y-fuentes-con-css\/"},"modified":"2025-09-29T12:24:39","modified_gmt":"2025-09-29T10:24:39","slug":"text-and-font-styling-with-css","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/","title":{"rendered":"Styling text and fonts with CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenido<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #303030;color:#303030\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #303030;color:#303030\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#Estilizacion_de_texto_y_fuentes_con_CSS\" >Estilizaci\u00f3n de texto y fuentes con CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#1_Cambio_de_color_y_tamano_de_fuente\" >1. Cambio de color y tama\u00f1o de fuente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#2_Estilo_en_negrita_e_italico\" >2. Estilo en negrita e it\u00e1lico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#3_Decoracion_de_texto\" >3. Decoraci\u00f3n de texto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#4_Alineacion_de_texto\" >4. Alineaci\u00f3n de texto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#5_Especificando_fuentes\" >5. Especificando fuentes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.aulatina.com\/en\/estilizacion-de-texto-y-fuentes-con-css\/#6_Uso_de_unidades_em_y_rem\" >6. Uso de unidades em y rem<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Estilizacion_de_texto_y_fuentes_con_CSS\"><\/span>Estilizaci\u00f3n de texto y fuentes con CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La estilizaci\u00f3n de texto y fuentes con CSS es una habilidad fundamental para dise\u00f1adores y desarrolladores web. CSS (Cascading Style Sheets) nos permite controlar la apariencia de nuestros textos y fuentes, lo que nos brinda la libertad de personalizar nuestros sitios web de acuerdo a nuestras necesidades y preferencias.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Cambio_de_color_y_tamano_de_fuente\"><\/span>1. Cambio de color y tama\u00f1o de fuente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una de las formas m\u00e1s b\u00e1sicas de estilizar texto es cambiar su color y tama\u00f1o de fuente. Para cambiar el color, puedes usar la propiedad \u00abcolor\u00bb seguida de un valor hexadecimal o de nombre de color. Por ejemplo:<br \/>\n[css]<br \/>\np {<br \/>\n  color: #ff0000; \/* rojo *\/<br \/>\n}<br \/>\n[\/css]<br \/>\nPara cambiar el tama\u00f1o de fuente, utiliza la propiedad \u00abfont-size\u00bb seguida de un valor en p\u00edxeles, em o porcentaje. Por ejemplo:<br \/>\n[css]<br \/>\nh1 {<br \/>\n  font-size: 24px;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Estilo_en_negrita_e_italico\"><\/span>2. Estilo en negrita e it\u00e1lico<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS nos permite a\u00f1adir estilo en negrita e it\u00e1lico a nuestro texto. Para a\u00f1adir un estilo en negrita, utiliza la propiedad \u00abfont-weight\u00bb y asigna el valor \u00abbold\u00bb. Por ejemplo:<br \/>\n[css]<br \/>\nh2 {<br \/>\n  font-weight: bold;<br \/>\n}<br \/>\n[\/css]<br \/>\nPara a\u00f1adir estilo en it\u00e1lico, utiliza la propiedad \u00abfont-style\u00bb y asigna el valor \u00abitalic\u00bb. Por ejemplo:<br \/>\n[css]<br \/>\np {<br \/>\n  font-style: italic;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Decoracion_de_texto\"><\/span>3. Decoraci\u00f3n de texto<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Con CSS, tambi\u00e9n podemos agregar decoraciones al texto, como subrayado, tachado o resaltado. Para agregar subrayado, utiliza la propiedad \u00abtext-decoration\u00bb y asigna el valor \u00abunderline\u00bb. Por ejemplo:<br \/>\n[css]<br \/>\na {<br \/>\n  text-decoration: underline;<br \/>\n}<br \/>\n[\/css]<br \/>\nPara agregar tachado, utiliza el valor \u00abline-through\u00bb:<br \/>\n[css]<br \/>\ndel {<br \/>\n  text-decoration: line-through;<br \/>\n}<br \/>\n[\/css]<br \/>\nY para resaltado, utiliza el valor \u00abhighlight\u00bb:<br \/>\n[css]<br \/>\nmark {<br \/>\n  background-color: yellow;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Alineacion_de_texto\"><\/span>4. Alineaci\u00f3n de texto<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS nos ofrece la posibilidad de alinear nuestro texto, ya sea alinearlo a la izquierda, derecha, centro o justificarlo. Para alinear el texto a la izquierda, utiliza la propiedad \u00abtext-align\u00bb y asigna el valor \u00ableft\u00bb. Por ejemplo:<br \/>\n[css]<br \/>\np {<br \/>\n  text-align: left;<br \/>\n}<br \/>\n[\/css]<br \/>\nPara alinearlo a la derecha, utiliza el valor \u00abright\u00bb, para centrarlo, utiliza el valor \u00abcenter\u00bb y para justificarlo, utiliza el valor \u00abjustify\u00bb.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Especificando_fuentes\"><\/span>5. Especificando fuentes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Adem\u00e1s de estilizar el texto en s\u00ed, tambi\u00e9n podemos controlar las fuentes que se utilizan. CSS nos permite especificar una fuente personalizada o utilizar fuentes web externas. Para especificar una fuente personalizada, utiliza la propiedad \u00abfont-family\u00bb y asigna la fuente que desees. Por ejemplo:<br \/>\n[css]<br \/>\nbody {<br \/>\n  font-family: Arial, sans-serif;<br \/>\n}<br \/>\n[\/css]<br \/>\nPara utilizar fuentes web externas, puedes utilizar servicios como <a href=\"https:\/\/www.aulatina.com\/integrando-google-fonts-en-tu-sitio-web-para-mejorar-la-tipografia\/\">Google Fonts<\/a>. Simplemente agrega el enlace proporcionado en el head de tu <a href=\"https:\/\/www.aulatina.com\/creacion-de-tarjetas-de-presentacion-interactivas-con-html-y-css\/\">HTML y podr\u00e1s utilizar la fuente en tu CSS<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Uso_de_unidades_em_y_rem\"><\/span>6. Uso de unidades em y rem<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS utiliza diferentes unidades de medida para especificar el tama\u00f1o de fuentes. Adem\u00e1s de las unidades de p\u00edxeles (px) y porcentajes (%), tambi\u00e9n puedes utilizar las unidades em y rem.<br \/>\nLa unidad em establece el tama\u00f1o de fuente en relaci\u00f3n con el tama\u00f1o de fuente del elemento padre. Por ejemplo:<br \/>\n[css]<br \/>\nh1 {<br \/>\n  font-size: 2em;<br \/>\n}<br \/>\n[\/css]<br \/>\nEsto establecer\u00e1 el tama\u00f1o de fuente del h1 como el doble del tama\u00f1o de fuente del elemento padre.<\/p>\n<p>La unidad rem establece el tama\u00f1o de fuente en relaci\u00f3n con el tama\u00f1o de fuente del root (normalmente el elemento HTML). Por ejemplo:<br \/>\n[css]<br \/>\nh1 {<br \/>\n  font-size: 2rem;<br \/>\n}<br \/>\n[\/css]<br \/>\nEsto establecer\u00e1 el tama\u00f1o de fuente del h1 como el doble del tama\u00f1o de fuente del root.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to style text and fonts with CSS, essential for web designers and developers. Control the look and feel of your text with CSS - customise your content!<\/p>","protected":false},"author":1,"featured_media":61890,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[532],"tags":[],"class_list":["post-61889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-532","description-off"],"_links":{"self":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/comments?post=61889"}],"version-history":[{"count":0,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media\/61890"}],"wp:attachment":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media?parent=61889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/categories?post=61889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/tags?post=61889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}