{"id":124045,"date":"2021-11-20T10:00:00","date_gmt":"2021-11-20T08:00:00","guid":{"rendered":"https:\/\/quondos.com\/mag\/?p=124045"},"modified":"2021-12-21T18:57:20","modified_gmt":"2021-12-21T16:57:20","slug":"aprender-html-y-css-desde-0","status":"publish","type":"post","link":"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/","title":{"rendered":"\u00bfC\u00f3mo aprender html y css desde 0?"},"content":{"rendered":"\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- Quondos p\u00e1rrafo 3 -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6254091683254316\" data-ad-slot=\"7379133043\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p>Aprender html y css hoy en d\u00eda es algo elemental si est\u00e1s en el mundo del dise\u00f1o web, aun si utilizas CMS como WordPress o Joomla que ya nos facilitan incre\u00edblemente el trabajo de creaci\u00f3n de p\u00e1ginas web.<\/p>\n\n\n\n<p>Saber estos lenguajes son necesarios para dejar nuestro sitio cien por cien a nuestro gusto. Con las m\u00e1rgenes, espacios, tipograf\u00edas, efectos, colores y dem\u00e1s estilos que hacen que nuestras webs se vean profesionales y generen confianza en nuestros clientes y usuarios.&nbsp;<\/p>\n\n\n\n<p>Al terminar de leer este art\u00edculo entender\u00e1s los conceptos b\u00e1sicos para poder crear o editar el c\u00f3digo html y css de tu p\u00e1gina web, a\u00fan si desconoces completamente estos t\u00e9rminos.&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u00cdndice de contenidos<\/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=\"Alternar tabla de contenidos\"><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: #999;color:#999\" 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: #999;color:#999\" 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:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Diseno_de_paginas_web_en_HTML_y_CSS\" >Dise\u00f1o de p\u00e1ginas web en HTML y 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:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#%C2%BFComo_ver_el_codigo_html_de_una_pagina_web\" >\u00bfC\u00f3mo ver el c\u00f3digo html de una p\u00e1gina web?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Estructura_html_basica_de_todo_sitio_web\" >Estructura html b\u00e1sica de todo sitio web&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Etiquetas_en_HTML\" >Etiquetas en HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Atributos\" >Atributos&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Conceptos_basicos_de_CSS\" >Conceptos b\u00e1sicos de CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#%C2%BFComo_funciona_el_CSS\" >\u00bfC\u00f3mo funciona el CSS?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#En_linea\" >En l\u00ednea<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Embebido\" >Embebido<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#Externo\" >Externo<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#%C2%BFQue_puedes_lograr_con_el_CSS\" >\u00bfQu\u00e9 puedes lograr con el CSS?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diseno_de_paginas_web_en_HTML_y_CSS\"><\/span>Dise\u00f1o de p\u00e1ginas web en HTML y CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Es importante comenzar explicando que existen lenguajes de programaci\u00f3n como el php y el javascript, que no se deben confundir con los&nbsp; lenguajes de maquetaci\u00f3n como el c\u00f3digo html y css, en los que profundizaremos a continuaci\u00f3n.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Html significa lenguaje de etiquetas de hipertexto. Es la parte m\u00e1s esencial de una p\u00e1gina web. Es el contenido y la estructura de nuestra web.&nbsp;<\/li><li>Css significa hojas de estilo en cascada (<strong><em>C<\/em><\/strong><em>ascading <\/em><strong><em>S<\/em><\/strong><em>tyle <\/em><strong><em>S<\/em><\/strong><em>heets<\/em>). El css es otro lenguaje de maquetaci\u00f3n el cual nos permite darle la apariencia, presentaci\u00f3n, funcionalidades o comportamiento que&nbsp; se aplicar\u00e1 a nuestro c\u00f3digo html de la p\u00e1gina web.&nbsp; Es decir, el css son aquellos efectos o detalles est\u00e9ticos de lo que estamos viendo en nuestro sitio.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_ver_el_codigo_html_de_una_pagina_web\"><\/span>\u00bfC\u00f3mo ver el c\u00f3digo html de una p\u00e1gina web?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Para ver el c\u00f3digo html de cualquier sitio web basta con presionar F12 o hacer clic izquierdo y presionar en <\/strong><strong><em>ver c\u00f3digo fuente de la p\u00e1gina (Ctrl +U).&nbsp;<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83c\udfa8 Dise\u00f1o web - Introducci\u00f3n a HTML y CSS\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/80iLm9nOumE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Estructura_html_basica_de_todo_sitio_web\"><\/span>Estructura html b\u00e1sica de todo sitio web&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Todo sitio web tiene una estructura elemental con ciertas etiquetas como las que veremos a continuaci\u00f3n. Puedes abrir un bloc de notas, escribir lo que quieras y luego guardarlo con el nombre de <strong>index.html<\/strong>. As\u00ed al abrirlo en tu navegador podr\u00e1s ver los cambios que hayas guardado. De esta manera podr\u00e1s ir experimentando con las siguientes etiquetas. Tambi\u00e9n puedes usar un editor de c\u00f3digo gratuito como <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">visual studio code<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Etiquetas_en_HTML\"><\/span>Etiquetas en HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Actualmente existen 142 etiquetas de HTML con las cuales se pueden crear p\u00e1rrafos, cajas, secciones, listas, im\u00e1genes, tablas, etc. Las etiquetas se conforman por 3 partes:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>La etiqueta de apertura <strong>&lt;header&gt;<\/strong>,&nbsp;<\/li><li><strong>El contenido<\/strong> (que es lo que ver\u00e1 el usuario).&nbsp;<\/li><li>La etiqueta de cierre <strong>&lt;\/header&gt;.&nbsp;<\/strong><\/li><\/ol>\n\n\n\n<p>Veamos las etiquetas m\u00e1s comunes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;!DOCTYPE html&gt;<\/strong> Esta etiqueta sirve para indicar a la p\u00e1gina web cu\u00e1l ser\u00e1 la versi\u00f3n de HTML que se va a ejecutar. Si utilizamos esta etiqueta tendremos la versi\u00f3n html5, que es&nbsp; la m\u00e1s actual hasta el momento.&nbsp;<\/li><li><strong>&lt;head&gt;&nbsp; &lt;\/head&gt; <\/strong>En esta etiqueta se muestra informaci\u00f3n&nbsp; para que lea el navegador y no el usuario, como scripts de Google analytics o search console. Adem\u00e1s podemos agregar metadatos como por ejemplo <strong>&lt;meta charset=\u00bbutf-8&#8243; \/&gt; <\/strong>. Lo que har\u00e1 esta etiqueta es que identificar\u00e1 correctamente las tildes y las \u00f1 de todos los textos en espa\u00f1ol que coloquemos.&nbsp;<\/li><li><strong>&lt;title&gt; &lt;\/title&gt; <\/strong>Ser\u00e1 el t\u00edtulo del sitio web.<\/li><li><strong>&lt;body&gt; &lt;\/body&gt; <\/strong>Aqu\u00ed colocaremos la informaci\u00f3n y contenido que queremos que vea el usuario. Como p\u00e1rrafos, im\u00e1genes, tablas, etc.&nbsp;<\/li><li><strong>&lt;header&gt;&nbsp; &lt;\/header&gt;<\/strong> Dentro del body agregaremos esta etiquetas de header. Como su nombre lo indica, es la cabecera del sitio web. Es lo que se repetir\u00e1 en todas las p\u00e1ginas de la web. En la cabecera podemos encontrar el logo, el men\u00fa de navegaci\u00f3n, botones, etc.&nbsp;<\/li><li><strong>&lt;content&gt;&nbsp; &lt;\/content&gt; E<\/strong>s el contenido que habr\u00e1 en la p\u00e1gina web.<\/li><li><strong>&lt;div&gt; &lt;\/div&gt;<\/strong> Ser\u00e1 una secci\u00f3n o bloque de nuestra p\u00e1gina web. Es una de las etiquetas m\u00e1s utilizadas.<\/li><li><strong>&lt;h1&gt; &lt;\/h1&gt;, &lt;h2&gt; &lt;\/h2&gt; , &lt;h3&gt; &lt;\/h3&gt;, &lt;h4&gt; &lt;\/h4&gt;, &lt;h5&gt; &lt;\/h5&gt;, &lt;h6&gt; &lt;\/h6&gt; <\/strong>Son las etiquetas de encabezados de manera jer\u00e1rquica.<\/li><li><strong>&lt;hr&gt; <\/strong>&nbsp;Nos agrega una l\u00ednea divisoria en toda la p\u00e1gina<\/li><li><strong>&lt;p&gt; &lt;\/p&gt; <\/strong>Es un p\u00e1rrafo de contenido.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=\u00bbutf-8&#8243; \/&gt;<br>&lt;title&gt; <\/strong>C\u00f3mo aprender html y CSS desde 0<strong> &lt;\/title&gt;<\/strong><br><br><strong>&lt;h1&gt; <\/strong>h1 T\u00edtulo del art\u00edculo&nbsp; <strong>&lt;\/h1&gt;&nbsp;<\/strong><br><strong>&lt;h2&gt;<\/strong> h2 Subt\u00edtulo<strong> &lt;\/h2&gt;&nbsp;&lt;h3&gt;<\/strong> h3 Subt\u00edtulo secundario <strong>&lt;\/h3&gt;&lt;h4&gt; <\/strong>h4 Subt\u00edtulo secundario <strong>&lt;\/h4&gt;&lt;h5&gt;<\/strong> h5 Subt\u00edtulo secundario <strong>&lt;\/h5&gt;&lt;h6&gt;<\/strong> h6 Subt\u00edtulo secundario <strong>&lt;\/h6&gt;<br>&lt;\/html&gt;<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" class=\"wp-image-124040\" style=\"width: 1200px;\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-doctype.jpg\" alt=\"\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-doctype.jpg 1200w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-doctype-300x169.jpg 300w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-doctype-1024x576.jpg 1024w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-doctype-768x432.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>&lt;ul&gt; &lt;\/ul&gt;<\/strong> Crear\u00e1 listados. Y si dentro de esta etiqueta agregamos los elementos <strong>&lt;li&gt;&lt;\/li&gt;, <\/strong>el listado ser\u00e1 desordenado. Si quieres un listado ordenado coloca lo siguiente <strong>&lt;ol&gt;&lt;\/ol&gt;.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Listados desordenados&nbsp;<br><strong>&lt;ul&gt;&nbsp;<\/strong><br><strong>&lt;li&gt;<\/strong> Rosa <strong>&lt;\/li&gt;&nbsp;&lt;li&gt; <\/strong>Blanco<strong> &lt;\/li&gt;&nbsp;&lt;li&gt; <\/strong>Rojo<strong> &lt;\/li&gt;&nbsp;&lt;li&gt;<\/strong> Caf\u00e9<strong> &lt;\/li&gt;&nbsp;<\/strong><br><strong>&lt;\/ul&gt;<\/strong><br><br>Listados ordenados&nbsp;<br><strong>&lt;ol&gt;&nbsp;<\/strong><br><strong>&lt;li&gt;<\/strong> Rosa <strong>&lt;\/li&gt;&nbsp;&lt;li&gt;<\/strong> Blanco <strong>&lt;\/li&gt;&nbsp;&lt;li&gt;<\/strong> Rojo <strong>&lt;\/li&gt;&nbsp;&lt;li&gt;<\/strong> Caf\u00e9 <strong>&lt;\/li&gt;&nbsp;<\/strong><br><strong>&lt;\/ol&gt;<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" class=\"wp-image-124042\" style=\"width: 1200px;\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-listados.jpg\" alt=\"\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-listados.jpg 1200w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-listados-300x169.jpg 300w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-listados-1024x576.jpg 1024w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-listados-768x432.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>&lt;img <\/strong>width=\u00bb100px alt=\u00bbcontenido de la imagen\u00bb src=\u00bbhttps:\/\/www.cocinacaserayfacil.net\/wp-content\/uploads\/2020\/03\/Platos-de-comida-que-pides-a-domicilio-y-puedes-hacer-en-casa.jpg <strong>(url de la imagen a insertar)\u00bb \/&gt;<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" class=\"wp-image-124041\" style=\"width: 1200px;\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-imagen.jpg\" alt=\"aprender html y css - imagen\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-imagen.jpg 1200w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-imagen-300x169.jpg 300w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-imagen-1024x576.jpg 1024w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2021\/11\/aprender-html-y-css-imagen-768x432.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>&lt;a&gt; &lt;\/a&gt;<\/strong> Agregando estas etiquetas podr\u00e1s ponerle enlaces a tu propia p\u00e1gina web o a cualquier otro sitio web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atributos\"><\/span>Atributos&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Las etiquetas de HTML tienen atributos que aportan mayor informaci\u00f3n sobre un elemento en particular. Por ejemplo en la etiqueta &lt;img podemos agregar el atributo width=\u201d80px\u201d. Le estamos diciendo a nuestro c\u00f3digo que la imagen debe medir 80 pixeles. As\u00ed que b\u00e1sicamente los atributos son esas \u201ccaracter\u00edsticas extra\u201d de lo que indicamos en la etiqueta.&nbsp;<\/p>\n\n\n\n<p>Algunos de los atributos en HTML m\u00e1s utilizados son href,&nbsp; class, src, id, style y lang.<\/p>\n\n\n\n<p>Con estos ejemplos ya has aprendido a crear encabezados, listas, p\u00e1rrafos, im\u00e1genes y enlaces. Ahora conoceremos en profundidad otro lenguaje de maquetaci\u00f3n con el cual definiremos la apariencia, efectos y funciones de nuestra p\u00e1gina web, es decir, el c\u00f3digo CSS.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- Quondos p\u00e1rrafo 3 -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6254091683254316\" data-ad-slot=\"7379133043\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conceptos_basicos_de_CSS\"><\/span>Conceptos b\u00e1sicos de CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>El c\u00f3digo CSS est\u00e1 compuesto por reglas, y cada una de ellas est\u00e1 formada por el selector del elemento,&nbsp; el bloque declarativo, la propiedad y el valor. Con el selector podemos elegir a qu\u00e9 parte del documento se aplica la regla. Mientras que en el bloque declarativo podemos colocar las propiedades, como el color, tipograf\u00eda, tama\u00f1o, etc. Y con el valor cambiamos la caracter\u00edstica, por ejemplo si hablamos de color: verde a rojo.<\/p>\n\n\n\n<p>El CSS de nuestro sitio web lo podemos ver en los archivos de nuestro theme de wordpress, en la hoja de estilos que podr\u00e1s reconocer con la terminaci\u00f3n style.css. Cualquier cambio que desees realizar a nivel de CSS podr\u00e1s hacerlo en este archivo. Si deseas hacerlo directamente en WordPress puedes hacerlo desde el apartado de apariencia \u21e8 personalizar&nbsp; \u21e8&nbsp; CSS personalizado.&nbsp;&nbsp;<\/p>\n\n\n\n<p>El c\u00f3digo CSS se caracteriza por heredar jer\u00e1rquicamente sus propiedades a las etiquetas html. Esto nos ayuda a ahorrar mucho trabajo, ya que con unas l\u00edneas de c\u00f3digo podemos indicar el dise\u00f1o para varias p\u00e1ginas de nuestra web.<\/p>\n\n\n\n<p>Hoy existen CMS como WordPress en lo que tienes la opci\u00f3n de elegir entre miles de plantillas gratuitas que ya incluyen todo el c\u00f3digo html y css, para que de esta forma te ahorres mucho tiempo. Sin embargo, es recomendable conocer los aspectos b\u00e1sicos de CSS para dejar las p\u00e1ginas web justo como las quieren nuestros clientes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_funciona_el_CSS\"><\/span>\u00bfC\u00f3mo funciona el CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Para incorporar el c\u00f3digo CSS al documento existen tres maneras:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"En_linea\"><\/span>En l\u00ednea<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Consiste en escribir el c\u00f3digo CSS como valor del atributo style de un elemento html pero el estilo definido s\u00f3lo se aplicar\u00e1 en ese elemento. Es decir, el c\u00f3digo CSS solo \u201ctendr\u00e1 efecto\u201d en el c\u00f3digo HTML de ese elemento. Por ejemplo, si queremos que una imagen en particular tenga un borde y un efecto, utilizamos esta forma de insertar el c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Embebido\"><\/span>Embebido<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Consiste en incrustar un elemento style en alguna parte del documento html. Y entre sus etiquetas de apertura y cierre, ir\u00e1 el c\u00f3digo CSS pero el estilo definido s\u00f3lo se aplicar\u00e1 a los elementos de ese documento. Esto no es una buena pr\u00e1ctica porque es recomendable tener el HTML y el CSS separados para evitar errores y confusi\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Externo\"><\/span>Externo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- Quondos p\u00e1rrafo 3 -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6254091683254316\" data-ad-slot=\"7379133043\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p>Es incorporar nuestro c\u00f3digo CSS en un archivo independiente al HTML, que luego puede ser enlazado a todos los documentos HTML que se requieran. Por ejemplo, si tenemos nuestra p\u00e1gina de contacto y nuestra p\u00e1gina de inicio y queremos que se ejecute la misma apariencia en ambas p\u00e1ginas, esta es la forma adecuada de conseguir el resultado deseado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_puedes_lograr_con_el_CSS\"><\/span>\u00bfQu\u00e9 puedes lograr con el CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Con el c\u00f3digo CSS se pueden lograr dise\u00f1os infinitos, ya que podemos modificar colores, bordes, m\u00e1rgenes, fondos, layouts, fuentes, tama\u00f1os, alineaci\u00f3n de texto, degradados, sombras, transparencias, bordes redondeados, transformaciones y animaciones. As\u00ed que con el CSS puedes trabajar la apariencia de tu web hasta dejarla a tu gusto.&nbsp;<\/p>\n\n\n\n<p>No es un secreto que insertar c\u00f3digo CSS es algo muy laborioso, es por eso que actualmente se recomiendan otras opciones (como ya te hemos mencionado), tales como WordPress o Joomla.<\/p>\n\n\n\n<p>Si deseas aprender html y css desde 0 en profundidad este tipo de lenguaje, te recomendamos ver videos en YouTube o tomar cursos especializados para que puedas personalizar al 100% tu p\u00e1gina web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprender html y css hoy en d\u00eda es algo elemental si est\u00e1s en el mundo del dise\u00f1o web, aun si &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"\u00bfC\u00f3mo aprender html y css desde 0?\" class=\"read-more button\" href=\"https:\/\/quondos.com\/mag\/aprender-html-y-css-desde-0\/#more-124045\" aria-label=\"Leer m\u00e1s sobre \u00bfC\u00f3mo aprender html y css desde 0?\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":848,"featured_media":124043,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-124045","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/users\/848"}],"replies":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/comments?post=124045"}],"version-history":[{"count":3,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124045\/revisions"}],"predecessor-version":[{"id":124105,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124045\/revisions\/124105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media\/124043"}],"wp:attachment":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media?parent=124045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/categories?post=124045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/tags?post=124045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}