{"id":170,"date":"2019-07-16T14:18:20","date_gmt":"2019-07-16T19:18:20","guid":{"rendered":"https:\/\/isaac-g.tech\/blog\/?p=170"},"modified":"2019-07-19T10:51:54","modified_gmt":"2019-07-19T15:51:54","slug":"aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web","status":"publish","type":"post","link":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/","title":{"rendered":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web."},"content":{"rendered":"\n

Cascading Style Sheet.<\/em><\/h4>\n\n\n\n
\n\n\n\n

Hola de nuevo, si has estado siguiendo este blog, sabr\u00e1s que he estado publicando los conceptos b\u00e1sicos para que aprendas a hacer tu web<\/a>, en esta ocasi\u00f3n nos toca aprender como usar las hojas de estilo en cascada (CSS)<\/strong><\/p>\n\n\n\n

\u00bfQue es CSS?<\/h2>\n\n\n\n

Al igual que HTML CSS no<\/strong> es un lenguaje de programaci\u00f3n, sirve para mostrar de manera estilizada tu p\u00e1gina web, aplicando estilos a diferentes elementos del documento y existen cientos de propiedades CSS que se pueden aplicar, aqu\u00ed solo veremos las que en base a mi experiencia son las que mas te ayudan.<\/p>\n\n\n\n

Empezando con CSS.<\/h2>\n\n\n\n

Para llevar un orden en nuestros archivos, vamos a crear una carpeta llamada css donde guardaremos nuestra hoja de estilos, y crearemos un archivo index.html<\/p>\n\n\n\n

\"Aprende<\/figure>\n\n\n\n
\n\n\n\n

Crea un documento llamado style.css (puede ser el nombre que quieras pero la extensi\u00f3n .css debe respetarse) y lo guardamos dentro de la carpeta que acabamos de crear.<\/p>\n\n\n\n

copia y pega el siguiente c\u00f3digo en tu documento HTML.<\/p>\n\n\n\n

<html>\n\t<head> \n\t\t<title>mi p\u00e1gina con CSS <\/title>\n\t\t<meta charset=\"utf-8\">\n\t\t<link href=\"css\/style.css\" rel=\"stylesheet\" type=\"text\/css\">\n\t<\/head>\n\t<body>\n\t\t<div>\n\t\t\t<h1> Aplicando estilos CSS <\/h1>\n\t\t\t<br>\n\t\t\t<hr>\n\t\t\t<img src=\"buho.jpg\">\n\t\t\t<br>\n\t\t\t<hr>\n\t\t\t<p>\n\t\t\t\tSe cree que los b\u00fahos son los m\u00e1s inteligentes de todas las aves.\n\t\t\t<\/p>\n\t\t\t<p>\n\t\t\t\tLos b\u00fahos son, casi siempre, nocturnos, lo que significa que s\u00f3lo est\u00e1n \n\t\t\t\tactivos durante la noche. Es muy raro que usted vea uno durante el d\u00eda.\n\t\t\t<\/p>\n\t\t\t<p>\n\t\t\t\tLas lechuzas hembras de casi todas las especies son aproximadamente 25% \n\t\t\t\tm\u00e1s grandes que los machos.\n\t\t\t<\/p>\n\t\t\t<hr>\n\t\t\t\n\t\t\t<h2>Esta es mi p\u00e1gina web con estilo ;).\n\t\t<\/div>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Guarda la imagen del b\u00faho con el nombre buho en el mismo lugar que tu archivo index.html<\/p>\n\n\n\n
\"Aprende<\/figure>\n\n\n\n
Vinculando CSS con HTML.<\/h2>\n\n\n\n
Antes de empezar a dar estilo a la p\u00e1gina web , tenemos que vincular la hoja estilos con el documento HTML, para hacerlo, copia y pega el siguiente codigo dentro de la etiqueta <head> de tu documento HTML.<\/p>\n\n\n\n
<link href=\"css\/style.css\" rel=\"stylesheet\" type=\"text\/css\"><\/code><\/pre>\n\n\n\n
Dando estilo a la p\u00e1gina.<\/h2>\n\n\n\n
Para empezar a dar estilo a la p\u00e1gina web pega el siguiente c\u00f3digo en tu hoja de estilos .css<\/p>\n\n\n\n
body{\n\twidth:100%;\n\tbackground-color:#202020;\n\tmargin:0;\n}                            \n\ndiv{\n\twidth:60%;\n\tmargin: 0 auto;\n\tbackground-color:lightgray;\n\ttext-align: center;\n\tpadding:20px;\n}\t<\/code><\/pre>\n\n\n\n
Como puedes ver, estamos seleccionando las etiquetas de nuestro documento HTML, pero vamos a ver m\u00e1s a detalle nuestro c\u00f3digo CSS.<\/p>\n\n\n\n
\"Aprende<\/figure>\n\n\n\n
A toda la estructura completa se le llama regla predeterminada<\/strong> o para mayor facilidad simplemente regla.<\/p>\n\n\n\n
Selector:<\/strong> Es el elemento que empieza con la regla, determina a que elemento se le va a dar estilo, en este caso el elemento div<\/strong>. Puedes cambiar el selector para dar estilo a un elemento diferente.<\/p>\n\n\n\n
Propiedad: <\/strong>Son las maneras en que puedes dar estilo a tu elemento HTML tiene ciertas propiedad especificas para dar estilo, pero existen otras que son compartidas entre los elementos, por ejemplo width<\/strong> que en espa\u00f1ol es anchura, y le dice al navegador que ancho va a tener el elemento seleccionado.
Algunas propiedades que comparten los elementos son:<\/p>\n\n\n\n
Para los elementos.<\/strong>
\u2022 margin.
\u2022 padding.
\u2022 width.
\u2022 height.
\u2022 background-color.
\u2022 border.<\/p>\n\n\n\n
Para el texto<\/strong>.
\u2022 color.
\u2022 font-family.
\u2022 font-size.
\u2022 text-shadow.
\u2022 font-weight.<\/p>\n\n\n\n
Valor de la propiedad:<\/strong> Despu\u00e9s de los dos puntos (:), se encuentra el valor de la propiedad<\/strong>, el cual define como va a comportarse el elemento HTML, para width (anchura) en este caso, le decimos que tenga el ancho de 80% de la pantalla, aunque tambi\u00e9n podemos ponerlo en pixeles: width: 180px;<\/strong><\/p>\n\n\n\n
Declaraci\u00f3n:<\/strong> Especifica cual de las propiedad del elemento HTML vas a modificar.<\/p>\n\n\n\n
Sintaxis de la hoja de estilos.<\/h3>\n\n\n\n
Es importante que tomes en cuenta que cada una de las siguientes reglas: <\/p>\n\n\n\n
  • Las declaraciones de estar encapsuladas en corchetes ({}<\/strong>)
    <\/li>
  • Separa con  dos puntos (:<\/strong>)  la propiedad de su valor 
    <\/li>
  • Al terminar una declaraci\u00f3n debes finalizar con punto y coma (;<\/strong>) para separarlas unas de otras.<\/li><\/ul>\n\n\n\n
    body{\n\twidth:100%;\n\tbackground-color:#202020;\n}  <\/code><\/pre>\n\n\n\n
    Seleccionando varios elementos.<\/strong><\/h3>\n\n\n\n
    Puedes seleccionar varios elementos HTML simplemente separ\u00e1ndolos por comas(,<\/strong>), ejemplo:<\/p>\n\n\n\n
    h1, p, li{\n\tcolor:green;\n}<\/code><\/pre>\n\n\n\n
    Selectores.<\/strong><\/h3>\n\n\n\n
    Hay diferentes tipos de selectores que puedes usar para modificar el estilo un elemento HTML, veamos dos de ellos.<\/p>\n\n\n\n
    Selector por clase: <\/strong>a cada etiqueta HTML puedes asignarle una clase que puedes compartir con diferentes elementos, por ejemplo: <\/p>\n\n\n\n
    <p class=\"texto\">Texto con clase <\/p><\/code><\/pre>\n\n\n\n
    La case \u00abTexto<\/em>\u00bb puede ser usada por otro elemento como <h1> y para que puedas seleccionar una clase en CSS debes escribir un punto (.<\/strong>) antes del nombre de la clase.<\/p>\n\n\n\n
    .Texto{\n\tcolor:green;\n}<\/code><\/pre>\n\n\n\n
    Selecci\u00f3n por identificador (ID):<\/strong> As\u00ed como podemos asignar clases, podemos asignar identificadores, la diferencia es que el identificador solamente se puede usar en un elemento especifico y no <\/strong>se debe repetir, por ejemplo:<\/p>\n\n\n\n
    <div id=\"cabecera\"> Texto de cabecera <\/div><\/code><\/pre>\n\n\n\n
    Para poder usar el ID<\/strong> en tu hoja de estilos, lo puedes llamar con signo de gato seguido del ID:<\/p>\n\n\n\n
    #cabecera {\n\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Tutorial.<\/strong><\/h2>\n\n\n\n
    Ahora que ya sabemos lo b\u00e1sico para usar CSS, vamos a continuar la modificando nuestra p\u00e1gina web.<\/p>\n\n\n\n
    Pega esta nueva regla en tu hoja de estilos .css y guarda los cambios.<\/p>\n\n\n\n
    h1{\n\twidth:100%;\n\tcolor:darkred;\n\tfont-size:48px;\n}<\/code><\/pre>\n\n\n\n
    Como puedes ver, en esta regla estamos modificando varias propiedades de la etiqueta h1, para que puedas ver los cambios abre tu archivo index.html.<\/p>\n\n\n\n
    Ahora vamos a modificar el tama\u00f1o de la imagen para que se vea mejor.<\/p>\n\n\n\n
    img{\n\twidth:100%;\n}<\/code><\/pre>\n\n\n\n
    Si vas siguiendo los cambios, veras que las letras no se ven bien acomodadas en la pantalla, pero vamos a ajustarlas con el siguiente codigo:<\/p>\n\n\n\n
    p{\n\ttext-align:left;\n\tfont-weight:bold;\n}<\/code><\/pre>\n\n\n\n
    Alineamos las letras a la izquierda y las ponemos en negritas.<\/p>\n\n\n\n
    Ahora vamos a cambiar el tipo de letra a todo el documento HTML.<\/p>\n\n\n\n
    html{\n\tfont-family:calibri;\n}<\/code><\/pre>\n\n\n\n
    Si todo ha ido bien la p\u00e1gina web deber\u00eda verse as\u00ed:<\/p>\n\n\n\n
    \"Aprende<\/figure>\n\n\n\n
    \n\n\n\n
    Conclusi\u00f3n.<\/h2>\n\n\n\n
    Como puedes darte cuenta, hacer una p\u00e1gina web aplicando estilos tambi\u00e9n es muy sencillo.<\/p>\n\n\n\n
    Puedes jugar con los valores hasta que el contenido sea de tu agrado. Con esto ya puedes crear tu pagina web con un bonito estilo o incluso hacer la p\u00e1gina web de tu negocio, el \u00fanico limite te lo impones tu. <\/p>\n\n\n\n
    Isaac G.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    Aprende a darle estilo a tu p\u00e1gina web.<\/p>\n","protected":false},"author":1,"featured_media":176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[22,6,20],"yoast_head":"\nAprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech<\/title>\n<meta name=\"description\" content=\"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech\" \/>\n<meta property=\"og:description\" content=\"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\" \/>\n<meta property=\"og:site_name\" content=\"isaac-g.tech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/IsaacGTech\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-16T19:18:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-19T15:51:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/design-development-electronics-326424-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"4032\" \/>\n\t<meta property=\"og:image:height\" content=\"3024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/14eefd333940214f03cbfb7d96a65b52\"},\"headline\":\"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web.\",\"datePublished\":\"2019-07-16T19:18:20+00:00\",\"dateModified\":\"2019-07-19T15:51:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\"},\"wordCount\":879,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/#organization\"},\"keywords\":[\"Aprende algo nuevo\",\"Desarrollo independiente\",\"Desarrollo web\"],\"articleSection\":[\"Desarrollo\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\",\"url\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\",\"name\":\"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech\",\"isPartOf\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/#website\"},\"datePublished\":\"2019-07-16T19:18:20+00:00\",\"dateModified\":\"2019-07-19T15:51:54+00:00\",\"description\":\"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.\",\"breadcrumb\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/isaac-g.tech\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#website\",\"url\":\"https:\/\/isaac-g.tech\/blog\/\",\"name\":\"isaac-g.tech\",\"description\":\"Un peque\u00f1o espacio para compartir.\",\"publisher\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/isaac-g.tech\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#organization\",\"name\":\"Isaac-g.tech\",\"url\":\"https:\/\/isaac-g.tech\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/IsaacGTech\/\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/LogoNT.png\",\"contentUrl\":\"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/LogoNT.png\",\"width\":792,\"height\":612,\"caption\":\"Isaac-g.tech\"},\"image\":{\"@id\":\"https:\/\/isaac-g.tech\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/14eefd333940214f03cbfb7d96a65b52\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/765dff14bfe679eb553a0f69b1353227?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/765dff14bfe679eb553a0f69b1353227?s=96&d=identicon&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/isaac-g.tech\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech","description":"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.","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:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/","og_locale":"es_ES","og_type":"article","og_title":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech","og_description":"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.","og_url":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/","og_site_name":"isaac-g.tech","article_publisher":"https:\/\/www.facebook.com\/IsaacGTech\/","article_published_time":"2019-07-16T19:18:20+00:00","article_modified_time":"2019-07-19T15:51:54+00:00","og_image":[{"width":4032,"height":3024,"url":"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/design-development-electronics-326424-1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#article","isPartOf":{"@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/"},"author":{"name":"admin","@id":"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/14eefd333940214f03cbfb7d96a65b52"},"headline":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web.","datePublished":"2019-07-16T19:18:20+00:00","dateModified":"2019-07-19T15:51:54+00:00","mainEntityOfPage":{"@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/"},"wordCount":879,"commentCount":0,"publisher":{"@id":"https:\/\/isaac-g.tech\/blog\/#organization"},"keywords":["Aprende algo nuevo","Desarrollo independiente","Desarrollo web"],"articleSection":["Desarrollo"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/","url":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/","name":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web. - isaac-g.tech","isPartOf":{"@id":"https:\/\/isaac-g.tech\/blog\/#website"},"datePublished":"2019-07-16T19:18:20+00:00","dateModified":"2019-07-19T15:51:54+00:00","description":"Aprende a usar las hojas de estilo CSS, enterate de lo b\u00e1sico que tienes que saber para darle un estilo \u00fanico a tu p\u00e1gina web.","breadcrumb":{"@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/isaac-g.tech\/blog\/desarrollador-independiente\/aprende-a-usar-las-hojas-de-estilo-css-en-tu-pagina-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/isaac-g.tech\/blog\/"},{"@type":"ListItem","position":2,"name":"Aprende a usar las hojas de estilo CSS en tu p\u00e1gina web."}]},{"@type":"WebSite","@id":"https:\/\/isaac-g.tech\/blog\/#website","url":"https:\/\/isaac-g.tech\/blog\/","name":"isaac-g.tech","description":"Un peque\u00f1o espacio para compartir.","publisher":{"@id":"https:\/\/isaac-g.tech\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/isaac-g.tech\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/isaac-g.tech\/blog\/#organization","name":"Isaac-g.tech","url":"https:\/\/isaac-g.tech\/blog\/","sameAs":["https:\/\/www.facebook.com\/IsaacGTech\/"],"logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/isaac-g.tech\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/LogoNT.png","contentUrl":"https:\/\/isaac-g.tech\/blog\/wp-content\/uploads\/2019\/07\/LogoNT.png","width":792,"height":612,"caption":"Isaac-g.tech"},"image":{"@id":"https:\/\/isaac-g.tech\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/14eefd333940214f03cbfb7d96a65b52","name":"admin","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/isaac-g.tech\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/765dff14bfe679eb553a0f69b1353227?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/765dff14bfe679eb553a0f69b1353227?s=96&d=identicon&r=g","caption":"admin"},"url":"https:\/\/isaac-g.tech\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/posts\/170"}],"collection":[{"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":5,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions\/212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/media\/176"}],"wp:attachment":[{"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isaac-g.tech\/blog\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}