{"id":216,"date":"2014-08-08T20:00:22","date_gmt":"2014-08-09T01:00:22","guid":{"rendered":"http:\/\/giogui.com\/blog\/?p=216"},"modified":"2014-08-18T19:30:02","modified_gmt":"2014-08-19T00:30:02","slug":"como-hacer-una-pagina-web-4-que-es-css","status":"publish","type":"post","link":"http:\/\/giogui.com\/blog\/como-hacer-una-pagina-web-4-que-es-css\/","title":{"rendered":"C\u00f3mo Hacer Una P\u00e1gina Web &#8211; #4 \u00bfQu\u00e9 es CSS?"},"content":{"rendered":"<div id=\"attachment_222\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-4-que-es-css-giogui-soluciones-en-linea.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-222\" class=\"size-full wp-image-222\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-4-que-es-css-giogui-soluciones-en-linea.jpg\" alt=\"\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |#4 \u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea\" width=\"630\" height=\"200\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-4-que-es-css-giogui-soluciones-en-linea.jpg 630w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-4-que-es-css-giogui-soluciones-en-linea-300x95.jpg 300w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-4-que-es-css-giogui-soluciones-en-linea-624x198.jpg 624w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><p id=\"caption-attachment-222\" class=\"wp-caption-text\">\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |#4 \u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p><strong>CSS es un lenguaje que complementa a HTML<\/strong> y es utilizado para hacer que las p\u00e1ginas web se vean de la forma como se quiere que se vean. Con CSS se puede dar alineaci\u00f3n a los elementos de HTML, se les puede dar colores, se puede mejorar la tipograf\u00eda, y se pueden hacer much\u00edsimas cosas m\u00e1s con \u00e9l.<\/p>\n<p>La raz\u00f3n por la que existe CSS es porque HTML no es capaz de darle estas caracter\u00edsticas a las p\u00e1ginas web. Estos dos lenguajes son complementarios, HTML hace que se puede utilizar CSS y <strong>CSS hace que el HTML se vea de la forma que un dise\u00f1ador web quiere que se vea.<\/strong> Con solo HTML y CSS, se pueden construir p\u00e1ginas web muy avanzadas que se vean completamente profesionales. Digamos que HTML y CSS son la sal y la pimienta de las p\u00e1ginas web.<\/p>\n<h2>\u00bfC\u00f3mo funciona CSS?<\/h2>\n<p>Utilicemos el ejemplo del art\u00edculo anterior de una Hamburguesa. As\u00ed es como se ver\u00eda si la hamburguesa estuviera hecha con solo HTML:<\/p>\n<div id=\"attachment_217\" style=\"width: 481px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-solo-html.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-217\" class=\"size-full wp-image-217\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-solo-html.jpg\" alt=\"\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea\" width=\"471\" height=\"250\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-solo-html.jpg 471w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-solo-html-300x159.jpg 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><p id=\"caption-attachment-217\" class=\"wp-caption-text\">\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>Con CSS podemos decirle por ejemplo de qu\u00e9 colores queremos que se vea la hamburguesa, pero tenemos que a\u00f1adirle clases al HTML para que CSS sepa de qu\u00e9 clase es cada elemento.\u00a0 La imagen con clases quedar\u00eda as\u00ed ahora:<\/p>\n<div id=\"attachment_219\" style=\"width: 481px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-clases.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-219\" class=\"size-full wp-image-219\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-clases.jpg\" alt=\"\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea\" width=\"471\" height=\"245\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-clases.jpg 471w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-clases-300x156.jpg 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><p id=\"caption-attachment-219\" class=\"wp-caption-text\">\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>Una vez que estas clases han sido definidas en HTML, ahora podemos hacer que se muestren los colores que queremos al utilizar especificarles colores a las clases en CSS. Funcionar\u00eda algo as\u00ed:<\/p>\n<p><span class=\"magazine\">Clase \u00abpan\u00bb <\/span> = color, caf\u00e9 claro.<\/p>\n<p><span class=\"magazine\">Clase \u00abjitomate\u00bb<\/span> = color, rojo<\/p>\n<p><span class=\"magazine\">Clase \u00abcarne\u00bb <\/span> = color, caf\u00e9-oscuro<\/p>\n<div id=\"attachment_218\" style=\"width: 481px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-clases.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-218\" class=\"size-full wp-image-218\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-clases.jpg\" alt=\"\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea\" width=\"471\" height=\"245\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-clases.jpg 471w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-giogui-soluciones-en-linea-con-clases-300x156.jpg 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><p id=\"caption-attachment-218\" class=\"wp-caption-text\">\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? |\u00bfQu\u00e9 es CSS? | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>Esto es lo que har\u00eda CSS, le pondr\u00eda colores a las partes de la hamburguesa y estos colores podr\u00edan ser cambiados despu\u00e9s cuando fuera necesario.<\/p>\n<p>Esta es una de las cosas m\u00e1s b\u00e1sicas que se pueden hacer con CSS, cambiar colores de los elementos de HTML, sin embargo, hay muchos cosas m\u00e1s que CSS puede hacer<strong>. CSS es un lenguaje muy completo y muy amplio<\/strong>.<\/p>\n<p>En el siguiente art\u00edculo de esta serie veremos un poco m\u00e1s de c\u00f3mo funciona CSS con HTML.<\/p>\n<p>Conozca m\u00e1s de nuestro servicios de <a title=\"Dise\u00f1o Web en Guadalajara\" href=\"http:\/\/www.giogui.com\/diseno-de-paginas-web-en-guadalajara-por-giogui.php\" target=\"_blank\">Dise\u00f1o de P\u00e1ginas Web Giogui<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS es un lenguaje que complementa a HTML y es utilizado para hacer que las p\u00e1ginas web se vean de la forma como se quiere que se vean. Con CSS se puede dar alineaci\u00f3n a los elementos de HTML, se les puede dar colores, se puede mejorar la tipograf\u00eda, y se pueden hacer much\u00edsimas cosas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,47],"tags":[28,41,23,8,9,18,11,10,19,40],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-como-hacer-una-pagina-web","category-cursos-de-entrenamiento-en-linea","tag-como-hacer-una-pagina-web-3","tag-cascading-style-sheets","tag-como-hacer-una-pagina-web-2","tag-diseno-web-2","tag-diseno-web-en-guadalajara","tag-e-marketing-2","tag-paginas-web","tag-paginas-web-en-guadalajara","tag-posicionamiento-web","tag-que-es-css"],"_links":{"self":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":2,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":223,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/216\/revisions\/223"}],"wp:attachment":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}