{"id":45969,"date":"2024-02-20T01:54:39","date_gmt":"2024-02-20T06:54:39","guid":{"rendered":"https:\/\/niixer.com\/?p=45969"},"modified":"2024-02-20T01:54:39","modified_gmt":"2024-02-20T06:54:39","slug":"html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/","title":{"rendered":"CSS una herramienta  para personalizar tus paginas web"},"content":{"rendered":"\n<p><strong><em>Introducci\u00f3n.<\/em><\/strong><\/p>\n\n\n\n<p>A lo largo del siglo XXI el desarrollo de p\u00e1ginas web desarrolladas con HTML y CSS han ido revolucionando el mundo por medio de la globalizaci\u00f3n, lo que ha permitido a la sociedad una manera m\u00e1s f\u00e1cil de comunicarse e informarse <\/p>\n\n\n\n<p>Las p\u00e1ginas web han evolucionado el mundo por medio de lenguajes como HTML, CSS y JavaScript que le permiten a cualquier persona crear su propia p\u00e1gina web ya sea para informar acerca de una noticia o simplemente vender sus productos por medio de marketing, anuncios y otras maneras de publicitar productos, pero para saber realizar las diferentes p\u00e1gina web primero necesitamos conocer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es CSS?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"168\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/hero.png\" alt=\"Logo CSS\" class=\"wp-image-46073\"\/><\/figure>\n\n\n\n<p>CSS o tambi\u00e9n conocido por sus siglas (Cascading Style Sheets) es un lenguaje de dise\u00f1o web que le permite utilizar estilos gr\u00e1ficos en p\u00e1ginas web creadas por la misma, por lo cual le permite realizar cambios en cuanto a dise\u00f1o, presentaci\u00f3n y personalizaci\u00f3n de las p\u00e1ginas web aplicando diferentes estilos como: (Colores, formas, fuentes, etc.\u2026) generalmente a p\u00e1ginas de HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>\u00bfPor qu\u00e9 se usa CSS?<\/em><\/strong><\/h3>\n\n\n\n<p>CSS se usa principalmente para mostrar los estilos del contenido, de esta manera HTML es la estructura de la p\u00e1gina web y CSS vendr\u00eda siendo todo lo relacionado con el dise\u00f1o de nuestra p\u00e1gina web,  en esta se pueden crear plantillas propias que faciliten o gu\u00eden de mejor manera la forma de la cual queremos el dise\u00f1o,  representando el contenido de una forma enriquecedora\u00a0 en forma de texto. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p> A\u00f1adiendo tambi\u00e9n que se pude complementar nuestro texto por medio de im\u00e1genes\u00a0 teniendo en cuenta que este programa tambi\u00e9n admite dispositivos no tradicionales\u00a0 los cuales podemos encontrar\u00a0 los tel\u00e9fonos inal\u00e1mbricos o cualquier tipo de m\u00f3vil capaz de conectarse una red de internet o de wifi, adem\u00e1s de ser una de las m\u00e1s usadas debido a su gran variedad de ventajas.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ventajas HTML y CSS<\/h3>\n\n\n\n<p>Adem\u00e1s de facilitar la personalizaci\u00f3n CSS tiene gran variedad de ventajas proporcionadas a los usuarios como el tipo de optimizaci\u00f3n que esta le da a los tiempos de carga del servidor siendo as\u00ed bastante utilizada por muchos usuarios debido a que este lenguaje viene incluido con todo tipo de navegadores y plataformas sin contar que esta se correlaciona con las <a href=\"https:\/\/es.semrush.com\/blog\/que-es-seo\/\">t\u00e9cnicas SEO<\/a> por lo que mejora la escalabilidad de la p\u00e1gina.<\/p>\n\n\n\n<p>Tambi\u00e9n permite al usuario interactuar&nbsp; por medio de interfaces graficas tanto simples como complejas y a la vez controlar formularios&nbsp; adem\u00e1s de tener un intercambio interactivo lo que inmersa mas al usuario y le produzca un mayor&nbsp; inter\u00e9s sobre lo que este leyendo o lo que este viendo&nbsp; en el momento.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong><em>\u00bfCu\u00e1l es la diferencia entre <strong><em>JAVASCRIPT<\/em><\/strong><\/em><\/strong> <strong><em>HTML y CSS  ?<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"401\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/lenguajes_1.webp\" alt=\"Logos lenguajes de programaci\u00f3n\" class=\"wp-image-46070\" style=\"width:569px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/lenguajes_1.webp 795w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/lenguajes_1-300x151.webp 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/lenguajes_1-768x387.webp 768w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>En cuanto a estas 3 encontramos mas que diferenciarlas verlas como un complemento entre si ya que con estas podemos hacer diferentes tipos de funcionalidades que al final nos dan un producto final muy desarrollado y completo.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML5(El lenguaje marcado de hipertexto) es un lenguaje que nos ayuda a\u00a0 hacer la debida estructuraci\u00f3n de la informaci\u00f3n en \u00a0nuestro sitio web, en donde nos referimos al marcado de hipertexto en la manera en la que podemos subrayar una palabra desconocida para posteriormente \u00a0al darle clic desde nuestra p\u00e1gina web nos llevara a otra enlace \u00a0donde se definir\u00e1 la palabra anteriormente subrayada llamadas<a href=\"https:\/\/rockcontent.com\/es\/blog\/que-es-un-hipervinculo\/\">(Hiperv\u00ednculos)<\/a> donde se realizan por medio de etiquetas que le permite formar una maquetaci\u00f3n\u00a0 a la informaci\u00f3n que deseemos integrar.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"523\" height=\"440\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/image-112.png\" alt=\"Pagina hecha con HTML\" class=\"wp-image-46024\" style=\"width:365px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/image-112.png 523w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/image-112-300x252.png 300w\" sizes=\"auto, (max-width: 523px) 100vw, 523px\" \/><\/figure>\n\n\n\n<p>En la imagen anterior podemos identificar una pagina web hecha con HTML5, como podemos observar podemos elegir la informaci\u00f3n que necesitemos para la p\u00e1gina, sin embargo, vemos que tiene un estilo demasiado simple, no podemos identificar si pertenecen alguna marca o producto solo encontramos la informaci\u00f3n. Pero aqu\u00ed nos surge una pregunta \u00bfC\u00f3mo podemos darles diferentes estilos a nuestros textos e im\u00e1genes?<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>En este punto es necesario de usar otra herramienta para poder personalizarla, como ya hemos mencionado anteriormente aqu\u00ed es donde entra el lenguaje CSSEl lenguaje que nos permite personalizarla a nuestro antojo, donde los usuarios pueden encontrar la informaci\u00f3n mucho m\u00e1s r\u00e1pido y en donde las empresas puedan dise\u00f1ar en varias l\u00edneas de dise\u00f1o que los permita diferenciar de otras empresas.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-full is-resized wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"180\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/iphone12-1.webp\" alt=\"P\u00e1gina de Apple\" class=\"wp-image-46066\" style=\"width:353px;height:auto\"\/><\/figure>\n\n\n\n<p>Como un claro ejemplo podemos encontrar la p\u00e1gina oficial de Apple donde ya podemos identificar por medio de una interfaz intuitiva ya podemos reconocer la empresa de la que se trata, en la parte superior izquierda podemos encontrar el logo original de Apple. <\/p>\n\n\n\n<p>Donde a diferencia de HTML, CSS es un lenguaje de hoja de estilo de cascada que define los estilos de la p\u00e1gina.<\/p>\n\n\n\n<p>Para dejarlo m\u00e1s simple pongamos el siguiente ejemplo: En una construcci\u00f3n hay una serie de pasos que se deben seguir en donde primero se ponen los cimientos las columnas y toda la infraestructura, esto vendr\u00eda siendo la parte de HTML5 creando la estructura de nuestra p\u00e1gina web, continuando con nuestro ejemplo despu\u00e9s de que toda la infraestructura est\u00e9 completa se necesita alguien que lo decore que lo amueble, algo as\u00ed como un dise\u00f1ador de interiores.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Por \u00faltimo, encontramos  <a href=\"https:\/\/niixer.com\/index.php\/2024\/02\/15\/que-es-javascript\/\">JavaScript <\/a> que es un lenguaje de programaci\u00f3n con el que podemos a\u00f1adir m\u00e1s funciones a nuestra p\u00e1gina web que podemos concatenar con las l\u00edneas de nuestro c\u00f3digo fuente creado con HTLM y CSS, ya que esta puede complementar nuestra p\u00e1gina web con otras funciones como pueden ser animaciones que la hagan m\u00e1s interactivas y le permitan una mayor comunicaci\u00f3n con el usuario que la est\u00e9 maniobrando en el momento.  <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Etiquetas:<\/strong><\/h3>\n\n\n\n<p>Las etiquetas en CSS son aquellas utilizadas en lenguajes de programaci\u00f3n como HTML en donde tienen como funci\u00f3n darles las caracter\u00edsticas y darle instrucciones para moldear cualquier sitio web de la manera que el usuario desee, principalmente para darle estilo.<\/p>\n\n\n\n<p>En este lenguaje hay muchas etiquetas principales como lo son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;COLOR&gt;: Define el color de la tipograf\u00eda donde podemos encontrar colores b\u00e1sicos donde lo \u00fanico que habr\u00eda que hacer es escribir el color en ingl\u00e9s y la etiqueta hace su magia, por otro lado, tambi\u00e9n se pueden aplicar por sistemas hexadecimal.<\/li>\n\n\n\n<li>&lt;WIDTH&gt;: Esta etiqueta nos permite elegir el ancho de un elemento que podemos elegir la cual se puede escribir por medio de porcentajes o por medio de los p\u00edxeles que se requiera.<\/li>\n\n\n\n<li>&lt;HEIGHT&gt;: A diferencia de la anterior esta permite configurar el alto de un elemento<\/li>\n\n\n\n<li>&lt;BORDER&gt;: Esta etiqueta nos permite crear el tipo de estilo que queramos para nuestros bordes tanto el color que escojamos como el estilo y tambi\u00e9n su grosor.<\/li>\n\n\n\n<li>&lt;BACKGROUND&gt;: Esta es una de las etiquetas m\u00e1s usadas ya que nos permite elegir o especificar una imagen, un color u elemento que deseemos en el fondo de nuestra p\u00e1gina.<\/li>\n\n\n\n<li>&lt;PADDING&gt;: Se refiere a la distancia que se puede encontrar desde el borde y un elemento que el desarrollador haya digitado.<\/li>\n<\/ul>\n\n\n\n<p>Como hay cientos de etiquetas que tienen diferentes funciones, el l\u00edmite esta en la mente del desarrollador.<\/p>\n\n\n\n<p>A continuaci\u00f3n, se mostrar\u00e1 un video explicativo en el cual se ver\u00e1 presentado una breve explicaci\u00f3n que contiene los principios b\u00e1sicos de las etiquetas en cuanto a HTML y CSS para realizar los primeros pasos del desarrollo de una p\u00e1gina web.<\/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 loading=\"lazy\" title=\"HTML y CSS | \u00bfQu\u00e9 es una etiqueta? | Estructura B\u00e1sica \u2705 | Infobae Clon | #5\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/ChxXpeM_334?start=1&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Estructura CSS<\/strong>:<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"164\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/queescssinline-1.webp\" alt=\"C\u00f3digo CSS\" class=\"wp-image-46067\" style=\"width:488px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/queescssinline-1.webp 723w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/queescssinline-1-300x68.webp 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/figure>\n\n\n\n<p>Aqu\u00ed tenemos un ejemplo de la estructura b\u00e1sica del inicio de una pagina web en la cual tenemos l\u00edneas de c\u00f3digo bastante intuitivas respecto al encabezado de esta, sin embargo, se requiere de pr\u00e1ctica para poder memorizar los diferentes tipos de etiquetas y las distintas formas de organizar las l\u00edneas de c\u00f3digo.<\/p>\n\n\n\n<p>Primeramente, encontramos la etiqueta head en donde se encontrar\u00e1 la informaci\u00f3n b\u00e1sica del documento la cual no se ve dentro del documento, en este caso encontramos que dentro de la etiqueta &lt;head&gt; encontramos otra vi\u00f1eta llamada div donde principalmente se utiliza en la creaci\u00f3n de bloques de contenido como podr\u00edan ser dentro de columnas, filas (Tablas).<\/p>\n\n\n\n<p>Dentro de nuestras etiquetas podremos personalizar atributos b\u00e1sicos como el color de fondo que queremos para nuestro encabezado adem\u00e1s de la alineaci\u00f3n del texto y por supuesto las medidas exactas que requerimos para nuestro encabezado de p\u00e1gina.<\/p>\n\n\n\n<p>El siguiente paso despu\u00e9s de nuestro encabezado es crear el cuerpo de nuestra p\u00e1gina web en la cual utilizaremos la etiqueta &lt;body&gt; donde ya podremos escribir la informaci\u00f3n que deseemos respecto a los bloques de contenido creados anteriormente.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Conclusiones:<\/p>\n\n\n\n<p>Para concluir con el art\u00edculo se har\u00e1 una retroalimentaci\u00f3n en cuanto que tan recomendable es CSS frente a otros lenguajes.<\/p>\n\n\n\n<p>HTML y CSS est\u00e1 ubicado entre los primeros y m\u00e1s utilizados lenguajes en cuanto al desarrollo de p\u00e1ginas web junto con JavaScript <\/p>\n\n\n\n<p> sin embargo HTML CSS es considerado como un lenguaje bastante m\u00e1s sencillo e intuitivo en cuanto a personalizar las paginas web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ditos:<\/h3>\n\n\n\n<p>Autor: <a href=\"https:\/\/niixer.com\/?s=Sebastian+Alvarez\">Juan Sebastian Alvarez<\/a><\/p>\n\n\n\n<p>Editor:&nbsp;<a href=\"https:\/\/niixer.com\/?s=Carlos+Iv%C3%A1n+Pinz%C3%B3n+Romero\">Carlos Iv\u00e1n Pinz\u00f3n Romero<\/a><\/p>\n\n\n\n<p>&nbsp;C\u00f3digo: <a href=\"https:\/\/niixer.com\/?s=+UCPAG4-1\">UCPAG4-1<\/a><\/p>\n\n\n\n<p><strong>Universidad :<\/strong><a href=\"https:\/\/niixer.com\/?s=universidad+central\"> universidad central<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bibliograf\u00edas:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">Est\u00e1ndares de dise\u00f1o web,02\/08\/2010) :https:\/\/www.redalyc.org\/articulo.oa?id=181421569009\n\n(Editor web visual para HTML, CSS y JavaScript,2007):\nhttps:\/\/rebiun.baratz.es\/OpacDiscovery\/public\/catalog\/detail\/b2FpOmNlbGVicmF0aW9uOmVzLmJhcmF0ei5yZW4vMzEzNzgxNDk?tabId=1707838283874\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Im\u00e1genes:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">portada: https:\/\/www.google.com\/url?sa=i&amp;url=https%3A%2F%2Fgitconnected.com%2Flearn%2Fcss%2Fget-styling-with-css-bfb43e&amp;psig=AOvVaw1_P9NYV92quVviyc8YCOF4&amp;ust=1708494084521000&amp;source=images&amp;cd=vfe&amp;opi=89978449&amp;ved=0CBIQjRxqFwoTCKDMwcmauYQDFQAAAAAdAAAAABAE\n\nhttps:\/\/www.google.com\/search?q=GET+STYLIN+WITH+CSS&tbm=isch&ved=2ahUKEwjdrpDTnayEAxX6NGIAHdKWCSYQ2-cCegQIABAA&oq=GET+STYLIN+WITH+CSS&gs_lp=EgNpbWciE0dFVCBTVFlMSU4gV0lUSCBDU1NIq8EBUJkKWNe7AXAAeACQAQCYAcoCoAHqEaoBCDIuMTQuMC4xuAEDyAEA-AEBigILZ3dzLXdpei1pbWfCAgQQIxgnwgIKEAAYgAQYigUYQ8ICBRAAGIAEwgIGEAAYBxgewgIHEAAYgAQYGIgGAQ&sclient=img&ei=6W3NZZ2WLvrpiLMP0q2msAI&bih=903&biw=2025#imgrc=xDIqDM_UGP04FM\n\nhttps:\/\/www.google.com\/url?sa=i&url=http%3A%2F%2Fwww.edu4java.com%2Fes%2Fweb%2Fhtml5-cuerpo-aside.html&psig=AOvVaw0cpbzLYNGyywQG6AN_QsQB&ust=1707929911587000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCPCX5-7kqIQDFQAAAAAdAAAAABAE\n\nhttps:\/\/rockcontent.com\/br\/wp-content\/uploads\/sites\/2\/2021\/08\/sites-de-grandes-empresas-1-1024x661.png\n\nhttps:\/\/www.google.com\/search?q=etiquetas+html&tbm=isch&ved=2ahUKEwjV7JT4oayEAxXmBGIAHQMZBqkQ2-cCegQIABAA&oq=etiquetas+html&gs_lp=EgNpbWciDmV0aXF1ZXRhcyBodG1sMgsQABiABBixAxiDATIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABEjzEVDXAViuD3AAeACQAQCYAXKgAY8FqgEDMC42uAEDyAEA-AEBigILZ3dzLXdpei1pbWfCAgQQIxgnwgIQEAAYgAQYigUYQxixAxiDAcICDRAAGIAEGIoFGEMYsQPCAgoQABiABBiKBRhDiAYB&sclient=img&ei=aXLNZZWUCuaJiLMPg7KYyAo&bih=903&biw=2025#imgrc=4Sl_gJeLsg66LM\n\nhttps:\/\/www.google.com\/url?sa=i&url=https%3A%2F%2Fblog.hubspot.es%2Fwebsite%2Fque-es-css&psig=AOvVaw27WPGm5Hi8u1bOBygCBKS_&ust=1707878641767000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCLjry--lp4QDFQAAAAAdAAAAABAS\n\nVIDEO:https:\/\/www.youtube.com\/watch?v=ChxXpeM_334&amp;t=1s<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n. A lo largo del siglo XXI el desarrollo de p\u00e1ginas web desarrolladas con HTML y CSS han ido revolucionando el mundo por medio de la globalizaci\u00f3n, lo que ha permitido a la sociedad una manera m\u00e1s f\u00e1cil de comunicarse e informarse Las p\u00e1ginas web han evolucionado el mundo porSeguir Leyendo<\/p>\n","protected":false},"author":1234,"featured_media":46074,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[2867,30],"tags":[196,3254,3246,274,2876,364,329,602,228],"class_list":["post-45969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lenguaje-de-programacion","category-niixer","tag-css","tag-diseno-de-paginas-web-2","tag-html-5","tag-javascript","tag-lenguajes-de-programacion","tag-paginas-web-2","tag-programacion","tag-sistemas","tag-tecnologia-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS una herramienta para personalizar tus paginas web &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos<\/title>\n<meta name=\"description\" content=\"CSS la herramienta de HTML que revoluciono la manera de personalizar las p\u00e1ginas web de manera creativa y sencilla\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS una herramienta para personalizar tus paginas web &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"og:description\" content=\"CSS la herramienta de HTML que revoluciono la manera de personalizar las p\u00e1ginas web de manera creativa y sencilla\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-20T06:54:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Sebastian Alvarez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Alvarez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS una herramienta para personalizar tus paginas web &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","description":"CSS la herramienta de HTML que revoluciono la manera de personalizar las p\u00e1ginas web de manera creativa y sencilla","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/","og_locale":"es_ES","og_type":"article","og_title":"CSS una herramienta para personalizar tus paginas web &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","og_description":"CSS la herramienta de HTML que revoluciono la manera de personalizar las p\u00e1ginas web de manera creativa y sencilla","og_url":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2024-02-20T06:54:39+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","type":"image\/webp"}],"author":"Sebastian Alvarez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Sebastian Alvarez","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/"},"author":{"name":"Sebastian Alvarez","@id":"https:\/\/niixer.com\/#\/schema\/person\/6d3b29f87f7a5538c1962db403d69e48"},"headline":"CSS una herramienta para personalizar tus paginas web","datePublished":"2024-02-20T06:54:39+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/"},"wordCount":1593,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","keywords":["CSS","Dise\u00f1o de p\u00e1ginas web","html 5","JavaScript","Lenguajes de programaci\u00f3n","Paginas web","Programaci\u00f3n","Sistemas","Tecnologia"],"articleSection":["Lenguaje de Programaci\u00f3n","Niixer"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/","url":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/","name":"CSS una herramienta para personalizar tus paginas web &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","datePublished":"2024-02-20T06:54:39+00:00","description":"CSS la herramienta de HTML que revoluciono la manera de personalizar las p\u00e1ginas web de manera creativa y sencilla","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","width":1280,"height":720,"caption":"Logo de CSS par el desarrollo de paginas web"},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2024\/02\/20\/html-con-css-un-forma-de-personalizar-paginas-web-de-manera-creativa-y-sencilla\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"CSS una herramienta para personalizar tus paginas web"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/6d3b29f87f7a5538c1962db403d69e48","name":"Sebastian Alvarez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/220c3b9021a2855b40ef2b4e12e53a2e71977a0083e8f65f36b2007939e951b2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/220c3b9021a2855b40ef2b4e12e53a2e71977a0083e8f65f36b2007939e951b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/220c3b9021a2855b40ef2b4e12e53a2e71977a0083e8f65f36b2007939e951b2?s=96&d=mm&r=g","caption":"Sebastian Alvarez"},"url":"https:\/\/niixer.com\/index.php\/author\/sebastian-alvarez\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/02\/LOGO-CSS-1.webp","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/45969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/1234"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=45969"}],"version-history":[{"count":7,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/45969\/revisions"}],"predecessor-version":[{"id":47129,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/45969\/revisions\/47129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/46074"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=45969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=45969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=45969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}