{"id":15805,"date":"2024-07-26T21:42:17","date_gmt":"2024-07-27T01:42:17","guid":{"rendered":"https:\/\/www.stg.openenglish.com\/blog\/es\/?p=15805"},"modified":"2024-07-26T21:42:17","modified_gmt":"2024-07-27T01:42:17","slug":"que-es-css","status":"publish","type":"post","link":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/","title":{"rendered":"\u00bfQu\u00e9 es CSS y para qu\u00e9 sirve?"},"content":{"rendered":"<p class=\"ql-align-justify\">Hace algunos a\u00f1os cualquier cambio en un proyecto web ten\u00eda que hacerse de forma manual, lo que representaba un gran esfuerzo y tiempo. Todo mejor\u00f3 cuando lleg\u00f3 el lenguaje de programaci\u00f3n <strong>CSS<\/strong> \u00a1Veamos de qu\u00e9 se trata!<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10149\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10149 cp-module-inline cpro-open \" data-style=\"cp_style_10149\" data-module-type=\"inline\" data-class-id=\"10149\" data-styleslug=\"in-content-top-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10149' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10149' data-section='configure' value='[]' ><style id='cp_popup_style_10149' type='text\/css'>.cp_style_10149 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10149 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10149 #panel-1-10149 .cp-target:hover { }.cp_style_10149 #panel-1-10149 { }.cp_style_10149 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_10149 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10149 #panel-1-10149 .cp-target:hover { }.cp_style_10149 #panel-1-10149 { }.cp_style_10149 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10149 #form_field-10149 .cp-target:hover { }.cp_style_10149 #form_field-10149 placeholder { color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10149 #form_field-10149 { }@media ( max-width: 767px ) {.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_10149 #form_field-10149 .cp-target:hover { }.cp_style_10149 #form_field-10149 placeholder { color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10149 #form_field-10149 { }}.cp_style_10149 #cp_image-1-10149 .cp-target { width:700px;height:300px;}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target { }.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 { left: 0px;top: 0px;z-index:2;}@media ( max-width: 767px ) {.cp_style_10149 #cp_image-1-10149 .cp-target { width:320px;height:137px;}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target { }.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 { left: 0px;top: 0px;z-index:2;}}@media ( max-width: 767px ) {.cp_style_10149 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Curso Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-1-10149\" class=\"cp-field-html-data   cpro_count_conversion oealt-cursobnr cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/www.openenglish.com\/curso\/?utm_source=organic&#038;utm_medium=blog.openenglish.com&#038;utm_campaign=ALL-20220824-generic-curso_funnel-content_banner700x400-Adult-track1&#038;utm_term=\" data-redirect-target=\"_self\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2022\/10\/Curso-de-Ingles-Blog-Banner-v001.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-1\" alt=\"Curso de Ingles Blog Banner v001\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10149' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10149\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2 class=\"ql-align-justify\">\u00bfQu\u00e9 es CSS?<\/h2>\n<p class=\"ql-align-justify\"><em>Cascading Style Sheets<\/em> (CSS) que en espa\u00f1ol se traduce como &#8220;hojas de estilo en cascada&#8221;, es un lenguaje de programaci\u00f3n que permite crear y realizar cambios en un documento HTML de forma r\u00e1pida y sencilla.<\/p>\n<p class=\"ql-align-justify\">En otras palabras, se trata de un lenguaje para el manejo del dise\u00f1o, cambios, mejoras, presentaci\u00f3n y personalizaci\u00f3n de p\u00e1ginas web.<\/p>\n<p class=\"ql-align-justify\">Su nombre se debe a que, hace posible contar en varias hojas con las propiedades heredadas de otra. Esto en dise\u00f1o web se conoce como cascada.<\/p>\n<p class=\"ql-align-justify\"><strong>CSS<\/strong> tuvo sus inicios en el a\u00f1o 1994, cuando el pionero web noruego, H\u00e5kon Wium Lie sugiri\u00f3 hacer hojas en cascada. Present\u00f3 la idea y el cient\u00edfico en computaci\u00f3n, Bert Bos se uni\u00f3 a \u00e9l para desarrollarla. Desde entonces la vida de los programadores y dise\u00f1adores se hizo m\u00e1s sencilla.<\/p>\n<p class=\"ql-align-justify\">El lenguaje <strong>CSS<\/strong> determina el aspecto de los documentos HTML. El tipo de fuente, los colores, los fondos, bordes, l\u00edneas, entre otros elementos. Adem\u00e1s, permite cambiar la apariencia de un sitio sin tener que modificar manualmente el contenido.<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10153\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10153 cp-module-inline cpro-open \" data-style=\"cp_style_10153\" data-module-type=\"inline\" data-class-id=\"10153\" data-styleslug=\"in-content-middle-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10153' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10153' data-section='configure' value='[]' ><style id='cp_popup_style_10153' type='text\/css'>.cp_style_10153 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10153 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10153 #panel-1-10153 .cp-target:hover { }.cp_style_10153 #panel-1-10153 { }.cp_style_10153 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_10153 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10153 #panel-1-10153 .cp-target:hover { }.cp_style_10153 #panel-1-10153 { }.cp_style_10153 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10153 #form_field-10153 .cp-target:hover { }.cp_style_10153 #form_field-10153 placeholder { color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10153 #form_field-10153 { }@media ( max-width: 767px ) {.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10153 #form_field-10153 .cp-target:hover { }.cp_style_10153 #form_field-10153 placeholder { color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10153 #form_field-10153 { }}.cp_style_10153 #cp_image-1-10153 .cp-target { width:700px;height:300px;}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target { }.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 { left: 0px;top: 0px;z-index:2;}@media ( max-width: 767px ) {.cp_style_10153 #cp_image-1-10153 .cp-target { width:320px;height:137px;}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target { }.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 { left: 0px;top: 0px;z-index:2;}}@media ( max-width: 767px ) {.cp_style_10153 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Test Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-1-10153\" class=\"cp-field-html-data   cpro_count_conversion oealt-testbnr cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/www.openenglish.com\/test-de-ingles\/?utm_source=organic&#038;utm_medium=blog.openenglish.com&#038;utm_campaign=ALL-20220825-generic-leveling_test_funnel-content_banner700x400-Adult-track1&#038;utm_term=\" data-redirect-target=\"_self\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2022\/08\/Test-de-Ingles-Blog-Banner-v001.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-1\" alt=\"Test de Ingles Blog Banner v001\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10153' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10153\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2 class=\"ql-align-justify\">\u00bfPara qu\u00e9 sirve CSS?<\/h2>\n<p class=\"ql-align-justify\">Su funci\u00f3n es simple: le dice a un sitio web el estilo en que mostrar\u00e1 los contenidos. Adem\u00e1s, permite guardar los elementos que conforman el dise\u00f1o separado del contenido mismo.<\/p>\n<p class=\"ql-align-justify\">De esta manera, HTML es la estructura de la web y <strong>CSS<\/strong> el dise\u00f1o que define el aspecto de una p\u00e1gina o su parte est\u00e9tica.<\/p>\n<p class=\"ql-align-justify\">Ya que es independiente, es factible crear plantillas o formatos para plasmar las ideas de dise\u00f1o.<\/p>\n<p class=\"ql-align-justify\">Entonces podemos afirmar que <strong>CSS<\/strong> sirve para:<\/p>\n<ul>\n<li class=\"ql-align-justify\">Realizar cambios a la apariencia de una web sin alterar su contenido;<\/li>\n<li class=\"ql-align-justify\">Tener el control en el dise\u00f1o de documentos HTML;<\/li>\n<li class=\"ql-align-justify\">Hacer modificaciones a elementos similares en forma de cascada;<\/li>\n<li class=\"ql-align-justify\">Organizar las preferencias de estilo;<\/li>\n<li class=\"ql-align-justify\">Ahorrar tiempo en el dise\u00f1o y personalizaci\u00f3n de una web;<\/li>\n<li class=\"ql-align-justify\">Tener una p\u00e1gina responsiva;<\/li>\n<li class=\"ql-align-justify\">Simplificar la creaci\u00f3n de un sitio.<\/li>\n<\/ul>\n<p class=\"ql-align-justify\">Te interesar\u00e1 saber que cuando se usa este lenguaje de programaci\u00f3n, no solo se pueden hacer cambios de manera m\u00e1s sencilla, sino que tambi\u00e9n el sitio obtiene ventajas. Pasa que <strong>CSS<\/strong> permite que la p\u00e1gina tenga un mejor rendimiento.<\/p>\n<p class=\"ql-align-justify\">La raz\u00f3n es que al no tener que escribir etiquetas HTML de forma continua y utilizar menos c\u00f3digos, las actualizaciones se hacen al momento y el mantenimiento se minimiza.<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_13581\" class=\"cp-popup-container cp-popup-live-wrap cp_style_13581 cp-module-inline cpro-open \" data-style=\"cp_style_13581\" data-module-type=\"inline\" data-class-id=\"13581\" data-styleslug=\"in-content-bottom-700x400-banner-5\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '13581' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '13581' data-section='configure' value='[]' ><style id='cp_popup_style_13581' type='text\/css'>.cp_style_13581 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_13581 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_13581 #panel-1-13581 .cp-target:hover { }.cp_style_13581 #panel-1-13581 { }.cp_style_13581 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_13581 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_13581 #panel-1-13581 .cp-target:hover { }.cp_style_13581 #panel-1-13581 { }.cp_style_13581 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_13581 #form_field-13581 .cp-target:hover { }.cp_style_13581 #form_field-13581 placeholder { color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_13581 #form_field-13581 { }@media ( max-width: 767px ) {.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_13581 #form_field-13581 .cp-target:hover { }.cp_style_13581 #form_field-13581 placeholder { color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_13581 #form_field-13581 { }}.cp_style_13581 #cp_image-2-13581 .cp-target { width:700px;height:300px;}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target { }.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target:hover ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 { left: 0px;top: 0px;z-index:4;}@media ( max-width: 767px ) {.cp_style_13581 #cp_image-2-13581 .cp-target { width:320px;height:137px;}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target { }.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target:hover ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 { left: 0px;top: 0px;z-index:4;}}@media ( max-width: 767px ) {.cp_style_13581 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content LFA Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-2-13581\" class=\"cp-field-html-data   cpro_count_conversion  cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/openenglish-adult.app.link\/gaF0xpUrODb?~channel=organic&#038;~feature=blog&#038;~campaign=iclfabnradlt\" data-redirect-target=\"_blank\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2023\/11\/Descargar-Mejor-App-para-aprender-ingles-v005.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-2\" alt=\"Descargar Mejor App para aprender ingles v005\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_13581' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"13581\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2 class=\"ql-align-justify\">Ventajas de usar CSS en una p\u00e1gina web<\/h2>\n<p class=\"ql-align-justify\">Adem\u00e1s de hacer m\u00e1s sencillos los cambios y la personalizaci\u00f3n de una p\u00e1gina web, hay otras razones por las que usar <strong>CSS<\/strong> representa una ventaja en el dise\u00f1o de sitios online.<\/p>\n<p class=\"ql-align-justify\">\u00a1Veamos cu\u00e1les son sus beneficios!<\/p>\n<ul>\n<li class=\"ql-align-justify\">Optimiza el rendimiento de las p\u00e1ginas web al mejorar los tiempos de carga y tr\u00e1fico del servidor;<\/li>\n<li class=\"ql-align-justify\">Hace posible la personalizaci\u00f3n de una p\u00e1gina en su totalidad;<\/li>\n<li class=\"ql-align-justify\">Es compatible con todos los navegadores y plataformas;<\/li>\n<li class=\"ql-align-justify\">Permite separar el contenido y del dise\u00f1o;<\/li>\n<li class=\"ql-align-justify\">Posibilita de una manera flexible los cambios de una p\u00e1gina en cualquier momento y en un solo lugar;<\/li>\n<li class=\"ql-align-justify\">Ayuda a mantener una misma apariencia en todas las secciones de un sitio;<\/li>\n<li class=\"ql-align-justify\">Aporta mayor precisi\u00f3n con los tipos y tama\u00f1os de letras, al igual con los colores;<\/li>\n<li class=\"ql-align-justify\">Hace posible que la p\u00e1gina web se vea de forma correcta empleando o no hojas de estilo;<\/li>\n<li class=\"ql-align-justify\">Contribuye a mejorar las t\u00e9cnicas SEO y, por lo tanto, la escalabilidad de la p\u00e1gina.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10158\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10158 cp-module-inline cpro-open \" data-style=\"cp_style_10158\" data-module-type=\"inline\" data-class-id=\"10158\" data-styleslug=\"in-content-bottom-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10158' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10158' data-section='configure' value='[]' ><style id='cp_popup_style_10158' type='text\/css'>.cp_style_10158 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10158 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_10158 #panel-1-10158 .cp-target:hover { }.cp_style_10158 #panel-1-10158 { }.cp_style_10158 .cp-popup-content { width:700px;height:300px;background-color:rgba(255,255,255,0.01);background-blend-mode: overlay;background-repeat :no-repeat;background-position :center;background-size :cover;}@media ( max-width: 767px ) {.cp_style_10158 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_10158 #panel-1-10158 .cp-target:hover { }.cp_style_10158 #panel-1-10158 { }.cp_style_10158 .cp-popup-content { width:320px;height:137px;background-color:#8c8c8c;background-blend-mode: overlay;background-repeat :repeat;background-position :center;background-size :contain;}}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10158 #form_field-10158 .cp-target:hover { }.cp_style_10158 #form_field-10158 placeholder { color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10158 #form_field-10158 { }@media ( max-width: 767px ) {.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_10158 #form_field-10158 .cp-target:hover { }.cp_style_10158 #form_field-10158 placeholder { color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10158 #form_field-10158 { }}.cp_style_10158 #cp_button-1-10158 .cp-target { font-family:inherit;font-style:Bold;font-weight:Bold;font-size:14px;letter-spacing:0px;text-align:center;color:#ffffff;background:#ff8800;width:207px;height:38px;padding:0px 15px 0px 15px;}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { color:#ffffff;background:#ffbb00;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-link { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-image { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target { }.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { }.cp_style_10158 #cp_button-1-10158 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 { left: 393.5px;top: 237px;z-index:3;}@media ( max-width: 767px ) {.cp_style_10158 #cp_button-1-10158 .cp-target { font-family:inherit;font-style:Bold;font-weight:Bold;font-size:6px;letter-spacing:0px;text-align:center;color:#ffffff;background:#ff8800;width:93px;height:17px;padding:0px 15px 0px 15px;}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { color:#ffffff;background:#ffbb00;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-link { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-image { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target { }.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { }.cp_style_10158 #cp_button-1-10158 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 { left: 177px;top: 111px;z-index:3;}}@media ( max-width: 767px ) {.cp_style_10158 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step cp-img-lazy cp-bg-lazy cp-inline    cp-middle  cp-panel-1\"  data-cp-src=\"[&quot;16425|https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2025\/02\/MOAC-448-Design-In-content-Promo-700_300-v2.jpg|full&quot;,&quot;16425|https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2025\/02\/MOAC-448-Design-In-content-Promo-700_300-v2.jpg|full&quot;]\" data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Promo Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_button-1-10158\" class=\"cp-field-html-data   cpro_count_conversion cp-none\" data-type=\"cp_button\"   data-action=\"goto_url\" data-step=\"1\"   data-redirect=\"https:\/\/www.openenglish.com\/promociones\/?utm_source=organic&#038;utm_medium=blog&#038;utm_campaign=blog-Banner_In-Content_Promo-adult&#038;utm_term=Oferta-Especial_02052025\" data-redirect-target=\"_self\"    >\r\n\t<div class=\"cp-rotate-wrap\"><button type=\"button\" class=\" cp-target cp-field-element cp-button cp-button-field\"  data-success-message=\"Thank You for Subscribing!\" data-get-param=\"false\">\u00a1Quiero mi oferta!<\/button>\r\n\t<div class=\"cp-btn-tooltip\"><\/div>\r\n<\/div><\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10158' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10158\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2 class=\"ql-align-justify\">\u00bfPor qu\u00e9 aprender a usar CSS?<\/h2>\n<p class=\"ql-align-justify\">Es cierto que actualmente hay opciones que permiten que una p\u00e1gina web sea m\u00e1s din\u00e1mica y sencilla de programar. Por ejemplo, sitios como WordPress te dan la posibilidad de usar plantillas predise\u00f1adas que con solo arrastrar y soltar aporta buenos resultados sin tener que ingresar c\u00f3digos.<\/p>\n<p class=\"ql-align-justify\">Sin embargo, para desarrollar un sitio desde cero necesitas tener experiencia en <strong>CSS. <\/strong>Lo mismo ocurre si trabajas en una p\u00e1gina y es necesario personalizarla.<\/p>\n<p class=\"ql-align-justify\">Para toda p\u00e1gina web en la que trabajes con lenguaje de programaci\u00f3n HTML, su complemento indispensable es <strong>CSS<\/strong>. Sin este, unicamente podr\u00e1s hacer un esqueleto de contenido.<\/p>\n<p class=\"ql-align-justify\">Te repetimos, para el dise\u00f1o y el estilo, el lenguaje <strong>CSS <\/strong>es la clave o, \u00bfrecurrir\u00e1s a la forma manual en la que ten\u00edas que cambiar elemento por elemento?<\/p>\n<p class=\"ql-align-justify\">En programaci\u00f3n, este lenguaje es intuitivo y, por lo tanto, sencillo de aplicar. Sucede que siempre se usa un indicador de etiqueta seguido del estilo que queremos usar y una vez que se aprende este principio lo dem\u00e1s lo hace la pr\u00e1ctica.<\/p>\n<h2 class=\"ql-align-justify\">\u00bfCu\u00e1les son los componentes de una hoja de estilo CSS?<\/h2>\n<p class=\"ql-align-justify\">Las hojas de estilo CSS se componen de dos elementos: la primera parte que se llama declaraci\u00f3n y la segunda denominada selector.<\/p>\n<p class=\"ql-align-justify\">Conozcamos a continuaci\u00f3n un poco m\u00e1s al respecto:<\/p>\n<h3 class=\"ql-align-justify\">Declaraci\u00f3n<\/h3>\n<p class=\"ql-align-justify\">Es el elemento que indica lo qu\u00e9 se debe hacer. Est\u00e1 compuesta por una propiedad que puede ser el color, el tipo de fuente, tama\u00f1o, entre otros elementos.<\/p>\n<h3 class=\"ql-align-justify\">Selector<\/h3>\n<p class=\"ql-align-justify\">Es la fase que indica a qu\u00e9 elemento se le aplica una declaraci\u00f3n.<\/p>\n<p class=\"ql-align-justify\">En otras palabras, es la segunda fase de las reglas aplicadas y le se\u00f1ala al navegador cu\u00e1les son los elementos HTML a los que se le atribuye la regla.<\/p>\n<p class=\"ql-align-justify\">Existen varios tipos de selectores, estos son los b\u00e1sicos:<\/p>\n<ul>\n<li class=\"ql-align-justify\"><strong>Universal<\/strong>: Se usa para elegir todos los elementos de una p\u00e1gina web.<\/li>\n<li class=\"ql-align-justify\"><strong>De tipo o etiqueta<\/strong>: Escoge todos los elementos de un sitio cuya etiqueta HTML tiene un mismo valor.<\/li>\n<li class=\"ql-align-justify\"><strong>Descendente<\/strong>: Ayuda a que el selector etiqueta sea m\u00e1s preciso, porque elige a todos los elementos dentro de otros elementos.<\/li>\n<li class=\"ql-align-justify\"><strong>De clase: <\/strong>Se utilizan para buscar secciones basadas en un atributo. Para evitar que se confunda con otros selectores, el valor se prefija con un punto.<\/li>\n<li class=\"ql-align-justify\"><strong>De ID:<\/strong> Se emplean para seleccionar componentes en una p\u00e1gina a los que se les haya dado como valor ID.<\/li>\n<\/ul>\n<p class=\"ql-align-justify\">\u00bfTe gust\u00f3 este contenido? Es momento de darle un plus a tu aprendizaje.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hace algunos a\u00f1os cualquier cambio en un proyecto web ten\u00eda que hacerse de forma manual, lo que representaba un gran esfuerzo y tiempo. Todo mejor\u00f3 cuando lleg\u00f3 el lenguaje de programaci\u00f3n CSS \u00a1Veamos de qu\u00e9 se trata! &nbsp; &nbsp; \u00bfQu\u00e9 es CSS? Cascading Style Sheets (CSS) que en espa\u00f1ol se traduce como &#8220;hojas de estilo [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":15917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"post-2021.php","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[204],"tags":[],"class_list":["post-15805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-habilidades-profesionales"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English<\/title>\n<meta name=\"description\" content=\"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English\" \/>\n<meta property=\"og:description\" content=\"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Open English\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-27T01:42:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1110\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"anamanjarres\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anamanjarres\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/\",\"name\":\"CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English\",\"isPartOf\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg\",\"datePublished\":\"2024-07-27T01:42:17+00:00\",\"author\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86\"},\"description\":\"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#breadcrumb\"},\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg\",\"contentUrl\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg\",\"width\":1110,\"height\":450,\"caption\":\"Que es el CSS v001\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQu\u00e9 es CSS y para qu\u00e9 sirve?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#website\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/\",\"name\":\"Open English\",\"description\":\"Aprende Ingles con Open English\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-ES\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86\",\"name\":\"anamanjarres\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g\",\"caption\":\"anamanjarres\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English","description":"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English","og_description":"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.","og_url":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/","og_site_name":"Open English","article_published_time":"2024-07-27T01:42:17+00:00","og_image":[{"width":1110,"height":450,"url":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg","type":"image\/jpeg"}],"author":"anamanjarres","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anamanjarres","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/","name":"CSS: \u00bfqu\u00e9 es y para qu\u00e9 sirve? | Open English","isPartOf":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage"},"image":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg","datePublished":"2024-07-27T01:42:17+00:00","author":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86"},"description":"CSS permite dise\u00f1ar y personalizar p\u00e1ginas web de forma r\u00e1pida y sencilla. Optimiza rendimiento, es compatible con todos los navegadores.","breadcrumb":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#breadcrumb"},"inLanguage":"es-ES","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/"]}]},{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#primaryimage","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg","contentUrl":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-el-CSS-v001.jpg","width":1110,"height":450,"caption":"Que es el CSS v001"},{"@type":"BreadcrumbList","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.stg.openenglish.com\/blog\/es\/"},{"@type":"ListItem","position":2,"name":"\u00bfQu\u00e9 es CSS y para qu\u00e9 sirve?"}]},{"@type":"WebSite","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#website","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/","name":"Open English","description":"Aprende Ingles con Open English","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.stg.openenglish.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-ES"},{"@type":"Person","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86","name":"anamanjarres","image":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g","caption":"anamanjarres"}}]}},"modified_by":"anamanjarres","_links":{"self":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=15805"}],"version-history":[{"count":1,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15805\/revisions"}],"predecessor-version":[{"id":15806,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15805\/revisions\/15806"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/media\/15917"}],"wp:attachment":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=15805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=15805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=15805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}