Las hojas de estilo en cascada<\/strong> (CSS<\/strong>) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web.<\/p>\n\n\n\n Con CSS<\/strong>, puede controlar el color, la fuente, el tama\u00f1o del texto, el espaciado entre elementos, c\u00f3mo se colocan y distribuyen los elementos, qu\u00e9 im\u00e1genes de fondo o colores de fondo se utilizar\u00e1n, diferentes pantallas para diferentes dispositivos y tama\u00f1os de pantalla, y \u00a1mucho m\u00e1s!.<\/p>\n\n\n\n\n\n\n\n Sugerencia<\/strong>: La palabra en cascada significa que un estilo aplicado a un elemento principal tambi\u00e9n se aplicar\u00e1 a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del cuerpo del texto en \u00abazul\u00bb, todos los encabezados, p\u00e1rrafos y otros elementos de texto dentro del cuerpo tambi\u00e9n obtendr\u00e1n el mismo color (a menos que especifique algo m\u00e1s).<\/p>\n<\/blockquote>\n\n\n\n CSS<\/strong> se puede agregar a documentos HTML<\/strong> de 3 maneras:<\/p>\n\n\n\n La forma m\u00e1s com\u00fan de agregar CSS<\/strong> es mantener los estilos en archivos CSS externos<\/strong>.<\/p>\n\n\n\n Se utiliza un CSS<\/strong> en l\u00ednea<\/strong> para aplicar un estilo \u00fanico a un \u00fanico elemento HTML<\/strong>. CSS<\/strong> en l\u00ednea usa el atributo style<\/em><\/strong> de un elemento HTML<\/strong>. El siguiente ejemplo establece el color del texto del elemento <h1><\/em><\/strong> en azul y el color del texto del elemento <p><\/em><\/strong> en rojo:<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Se utiliza un CSS interno<\/strong> para definir un estilo para una sola p\u00e1gina HTML<\/strong>. Un CSS<\/strong> interno<\/strong> se define en la secci\u00f3n <head><\/em><\/strong> de una p\u00e1gina HTML<\/strong>, dentro de un elemento <style><\/em><\/strong>. El siguiente ejemplo establece el color del texto de TODOS los elementos <h1><\/em><\/strong> (en esa p\u00e1gina) en azul y el color del texto de TODOS los elementos <p><\/em><\/strong> en rojo. Adem\u00e1s, la p\u00e1gina se mostrar\u00e1 con un color de fondo \u00abpowderblue\u00bb.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Se utiliza una hoja de estilo externa<\/strong> para definir el estilo de muchas p\u00e1ginas HTML<\/strong>. Para usar una hoja de estilo externa, agrega un enlace en la secci\u00f3n <head><\/em><\/strong> de cada p\u00e1gina HTML<\/strong>.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n La hoja de estilo externa<\/strong> se puede escribir en cualquier editor de texto. El archivo no debe contener ning\u00fan c\u00f3digo HTML<\/strong> y debe guardarse con una extensi\u00f3n .css<\/em><\/strong>. As\u00ed es como se ve el archivo styles.css<\/em>:<\/p>\n\n\n\n Sugerencia<\/strong>: con una hoja de estilo externa<\/strong>, puedes cambiar la apariencia de un sitio web completo, \u00a1cambiando un archivo!<\/p>\n<\/blockquote>\n\n\n\n Aqu\u00ed, demostraremos algunas propiedades CSS<\/strong> de uso com\u00fan. Aprender\u00e1s m\u00e1s sobre ellos m\u00e1s adelante. La propiedad CSS color<\/em> <\/strong>define el color del texto que se utilizar\u00e1. La propiedad CSS font-family<\/em><\/strong> define la fuente que se utilizar\u00e1. La propiedad CSS font-size<\/em><\/strong> define el tama\u00f1o del texto que se utilizar\u00e1.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n La propiedad CSS border<\/em><\/strong> define un borde alrededor de un elemento HTML<\/strong>.<\/p>\n\n\n\n Sugerencia<\/strong>: puedes definir un borde para casi todos los elementos HTML<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n La propiedad de CSS padding<\/em> <\/strong>define un relleno (espacio) entre el texto y el borde.<\/p>\n\n\n\n La propiedad de CSS margin<\/em><\/strong> define un margen (espacio) fuera del borde.<\/p>\n\n\n\n Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la p\u00e1gina web actual.<\/p>\n\n\n\n Ejm con ruta absoluta en URL<\/strong><\/p>\n\n\n\n Ejm con ruta relativa en URL en distinta carpeta<\/strong><\/p>\n\n\n\n Ejm con ruta relativa en URL en la misma carpeta<\/strong><\/p>\n\n\n\n Qu\u00e9 es CSS Las hojas de estilo en cascada (CSS) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web. Con CSS,…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu\u00e9 es CSS Las hojas de estilo en cascada (CSS) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web. Con CSS,...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions\/132"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Usar CSS<\/h2>\n\n\n\n
\n
Estilos en l\u00ednea<\/h2>\n\n\n\n
<h1 style=\"color:blue;\">A Blue Heading<\/h1>\n<p style=\"color:red;\">A red paragraph.<\/p><\/pre>\n\n\n\n
CSS interno<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {background-color: powderblue;}\nh1 {color: blue;}\np {color: red;}\n<\/style>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\nCSS esterno<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"styles.css\"><\/strong>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
body {\n background-color: powderblue;\n}\nh1 {\n color: blue;\n}\np {\n color: red;\n}<\/pre>\n\n\n\n\n
Tama\u00f1os, fuentes y colores con CSS<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nh1 {\n color: blue;\n font-family: verdana;\n font-size: 300%;\n}\np {\n color: red;\n font-family: courier;\n font-size: 160%;\n}\n<\/style>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\nLa propiedad CSS border<\/h2>\n\n\n\n
\n
p {\n border: 2px solid powderblue;\n}<\/pre>\n\n\n\nLa propiedad CSS padding<\/h2>\n\n\n\n
p {\n border: 2px solid powderblue;\n padding: 30px;\n}<\/pre>\n\n\n\nLa propiedad CSS margin<\/h2>\n\n\n\n
p {\n border: 2px solid powderblue;\n margin: 50px;\n}<\/pre>\n\n\n\nEnlace a CSS externo<\/h2>\n\n\n\n
<link rel=\"stylesheet\" href=\"https:\/\/www.sutilweb.eu\/html\/styles.css\"><\/pre>\n\n\n\n
<link rel=\"stylesheet\" href=\"\/html\/styles.css\"><\/pre>\n\n\n\n
<link rel=\"stylesheet\" href=\"styles.css\"><\/pre>\n","protected":false},"excerpt":{"rendered":"