Pero en ning\u00fan momento definimos el formato de cada objeto: color, tama\u00f1o, posici\u00f3n, etc.<\/p>\n
En este tutorial de HTML y CSS de W3schools<\/a>\u00a0se explican tres maneras de dar formato a una p\u00e1gina en HTML: en el encabezado, entre el contenido, y mediante el uso de una hoja de estilo externa. Esta tercera es muy superior a las otras, debido a que permite cambiar de hoja de estilo dando formato a todos los elementos de la p\u00e1gina.<\/p>\n \u00bfY para qu\u00e9 sirve cambiar de hoja de estilo? Por ejemplo, para darle alto contraste<\/strong> si uno es un usuario con problemas de visi\u00f3n<\/strong>. O para tener una hoja de estilo personalizada en el caso de ser una persona dalt\u00f3nica o con alg\u00fan tipo de ceguera del color.<\/strong><\/p>\n Vamos a necesitar un archivo HTML que tenga varios elementos, por ejemplo, este:<\/p>\n Para tener una p\u00e1gina web deberemos agregarle, como siempre, el encabezado que indica el tipo de archivo, la codificaci\u00f3n que permite ver los acentos y e\u00f1es, y esta vez le vamos a a\u00f1adir un enlace a la hoja de estilo<\/strong>:<\/p>\n El archivo miestilo.css puede contener indicaciones acerca de c\u00f3mo ser\u00e1 cada uno de los elementos (o s\u00f3lo algunos de ellos), pudiendo obtener resultados tan distintos como estos:<\/p>\n En el primer caso, el encabezado H1 es de color verde (aqu\u00ed se puede ver una tabla de colores y c\u00f3digos<\/a>), el encabezado H2 es de otro tono de verde, con un borde a la izquierda punteado (“dotted”) cuyo ancho es de un caracter (1em) y del mismo color del texto. En el segundo caso, el encabezado H2 se posiciona a la izquierda porque en su hoja de estilo dice que “flote a la izquierda” y que su ancho sea de 10 caracteres (float: left;\u00a0width: 10em;)<\/p>\n A partir de estos primeros experimentos, habr\u00e1 mucho que investigar sobre el tema. Pero lo importante ser\u00e1 tener claro que el formato debe estar separado del contenido. Aqu\u00ed hay un complet\u00edsimo tutorial de CSS<\/a> donde se explican las nociones m\u00e1s importantes de este lenguaje.<\/p>\n","protected":false},"excerpt":{"rendered":" Hasta ahora hicimos las siguientes cosas: Clase 1: p\u00e1rrafos, encabezado, y cuerpo Clase 2: negrita, cursiva, enlaces Clase 3: im\u00e1genes, t\u00edtulo de p\u00e1gina y t\u00edtulos de secciones Clase 4: Listas numeradas y \u00a0no numeradas, tablas Pero en ning\u00fan momento definimos el formato de cada objeto: color, tama\u00f1o, posici\u00f3n, etc. En este tutorial de HTML y … Continuar leyendo “HTML desde cero – Introducci\u00f3n a CSS: colores, posiciones, tama\u00f1os, y m\u00e1s”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,9],"tags":[],"class_list":["post-5475","post","type-post","status-publish","format-standard","hentry","category-cultura-libre","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=5475"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5475\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Mi primer hoja de estilo<\/h2>\n
<h1>Comienzo de clases<\/h1><\/pre>\n
<h2>Resultados del campeonato de truco<\/h2>\n<h3>Intercolegial diciembre 2015<\/h3><\/pre>\n
<ol><\/pre>\n
<li>P\u00e9rez<\/li><\/pre>\n
<li>G\u00f3mez<\/li><\/pre>\n
<li>Fern\u00e1ndez<\/li><\/pre>\n
<li>Rodr\u00edguez<\/li><\/pre>\n
<\/ol><\/pre>\n
<h2>Campamento febrero 2016<\/h2>\n<h3>Lista de elementos a traer<\/h3><\/pre>\n
<ul>\n <li>Birome<\/li>\n<\/pre>\n
<li>Cuaderno<\/li><\/pre>\n
<li>Hilo de pizza<\/li><\/pre>\n
<li>Instrumento musica (no piano)<\/li><\/pre>\n
<\/ul>\n\n<p>Se ruega a los se\u00f1ores padres enviar a sus hijos aseados y \nretirarlos al finalizar la jornada en forma puntual.<\/p>\n<p>No se aceptan mascotas.<\/p><\/pre>\n<\/div>\n
<!DOCTYPE html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=ISO-8859-1\" \/>\n<<\/span>link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"miestilo.css\"<\/span>><\/span><\/strong>\n<title>Escuela<\/title>\n<\/head>\n<body>\n..............\n<\/body>\n<\/HTML><\/pre>\n<\/div>\n![\"La](\"\/betaweblog\/wp-content\/uploads\/2016\/01\/css-2-1024x393.png\")
<\/a><\/p>\n
\nh1 {color: #0B6121;}<\/em>
\nh2 {color: #088A29; border-left: dotted 1em #088A29;}<\/strong>
\nh3 {color: #04B431; border-left: dotted 1em #04B431;}
\np {color:#170B3B; width: 60%; margin-left: 20%; border: 1px dotted #088A29;}
\nli {list-style-type:square; width: 60%; margin-left: 20%;}<\/div>\n
\nh1 {color: #B45F04; text-align: right; border: 1px solid #61210B; width: 60%; float:left;}<\/em>
\nh2 {color: #FF8000; border-right: solid 0.1em #FF8000; width: 10em; float: left; padding-top: 2em; padding-bottom: 1em;}<\/strong>
\nh3 {padding-top: 1em; padding-bottom: 1em; color: #8A4B08;}
\np {color:#000; width: 80%; padding: 0.2em; font-variant:small-caps;}
\nli {list-style-type:square; width: 60%; margin-left: 20%;}<\/div>\n<\/div>\n
\nTampoco se deben utilizar colores para brindar contenido (algo como “los alumnos que se visualizan en color rojo adeudan papeles en administraci\u00f3n”).<\/p>\n