{"id":9970,"date":"2022-09-20T13:00:00","date_gmt":"2022-09-20T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=9970"},"modified":"2024-03-13T17:25:34","modified_gmt":"2024-03-13T16:25:34","slug":"que-significa-css-guia-basica","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/","title":{"rendered":"\u00bfQu\u00e9 significa CSS? Gu\u00eda b\u00e1sica"},"content":{"rendered":"\n

Si quieres comenzar en el mundo del dise\u00f1o web hay tres tecnolog\u00edas que vas a manejar continuamente: HTML<\/a>, CSS y JavaScript. Hoy le dedicamos un art\u00edculo (\u00abmetaart\u00edculo\u00bb) al segundo, para aprender CSS y conocer sus aspectos b\u00e1sicos<\/strong>, qu\u00e9 significa, para qu\u00e9 sirve… pero, tambi\u00e9n, para ofrecerte una serie de art\u00edculos donde puedes profundizar en cada uno de los temas<\/strong>.<\/p>\n\n\n\n

\u00bfQu\u00e9 significa CSS?<\/h2>\n\n\n\n

CSS son las siglas de Cascading Style Sheets<\/strong><\/em>, traducido, hojas de estilo en cascada<\/strong>.<\/p>\n\n\n\n

\u00bfPara qu\u00e9 sirve CSS?<\/h2>\n\n\n\n

Los estilos CSS sirven para dar forma visual a las etiquetas HTML<\/strong> de las p\u00e1ginas web. Normalmente estas declaraciones se insertan en un archivo de extensi\u00f3n .css, pero tambi\u00e9n pueden ir declaradas dentro del HTML dentro de etiquetas <style> o como propiedad de un elemento HTML.<\/p>\n\n\n\n

\n<style type=\"text\/css\">\n   .fondo-oscuro {\n      background:#000;\n\n      color:#fff;\n   }\n   h1 {\n      margin-bottom: 15rem\n   }\n<\/style>\n\n<h1 style=\"font-size:2rem\" class=\"fondo-oscuro\">T\u00edtulo<\/h1><\/code><\/pre>\n\n\n\n
\u00bfQu\u00e9 versiones hay?<\/h2>\n\n\n\n
Aunque coloquialmente las nombramos como versiones, realmente deber\u00edamos llamarlos niveles. Actualmente disponemos de CSS3, y es posible que sea la \u00faltima, ya que se ha construido mediante un sistema de m\u00f3dulos que permite que se le vayan a\u00f1adiendo nuevas funcionalidades, como flexbox o css grid<\/a>.<\/p>\n\n\n\n
Te lo contamos en este art\u00edculo:<\/p>\n\n\n
\n
\"Versiones<\/a><\/figure>\n<\/div>\n\n\n
Novedades de las nuevas versiones<\/h2>\n\n\n\n
Como hemos explicado en otros art\u00edculos, CSS3 est\u00e1 en desarrollo constante<\/strong>. Desde su lanzamiento ya se solventaron limitaciones en las alineaciones verticales o declaraciones sobre columnas. Estas novedades hacen que, continuamente, haya que estar aprendiendo nuevos m\u00e9todos y recursos.<\/p>\n\n\n\n
Para ampliar informaci\u00f3n, te dejamos dos art\u00edculos, uno sobre las novedades de CSS para 2024<\/a> y otro sobre dos de los m\u00f3dulos m\u00e1s exitosos, una comparativa entre flexbox y CSS grid<\/a> \u00bfcu\u00e1l usar?<\/p>\n\n\n\n
\n
\n
\"Novedades<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Flexbox<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Los frameworks<\/h2>\n\n\n\n
Ahora bien, no confundamos las versiones con los frameworks<\/em>. Hay una serie de bibliotecas <\/strong>muy populares que usan el CSS para crear conjuntos de reglas predefinidas<\/strong>. De esta manera podemos tener, por ejemplo, un bot\u00f3n predise\u00f1ado con varias reglas que luego podemos pisar y modificar. Estos frameworks <\/em>facilitan mucho la creaci\u00f3n de p\u00e1ginas web, no solo en cuanto a la velocidad a la que se puede dar forma a la p\u00e1gina, sino, tambi\u00e9n, en cuanto a legibilidad, armon\u00eda y funcionalidad.<\/p>\n\n\n\n
Algunos de los m\u00e1s famosos son Bootstrap<\/a> o Materialize.<\/p>\n\n\n\n
\n
\n
\"Conoce<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"C\u00f3mo<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\u00bfComo funciona?<\/h2>\n\n\n\n
B\u00e1sicamente funciona creando una serie de reglas para los diferentes elementos<\/strong>. Es decir, por un lado seleccionamos el elemento y, por otro, le decimos qu\u00e9 hacer.<\/p>\n\n\n\n
Selectores<\/h3>\n\n\n\n
Tenemos varias maneras b\u00e1sicas de encontrar los elementos:<\/p>\n\n\n\n
    \n
  1. Mediante la etiqueta HTML<\/li>\n\n\n\n
  2. Mediante una clase<\/li>\n\n\n\n
  3. Mediante el ID<\/li>\n\n\n\n
  4. Mediante atributos<\/li>\n\n\n\n
  5. …<\/li>\n<\/ol>\n\n\n\n
    Vamos a ver los tres m\u00e1s sencillos:<\/p>\n\n\n\n
    Selector HTML<\/h4>\n\n\n\n
    Se trata de crear una regla buscando una etiqueta HTML<\/a> sobre la que se aplicar\u00e1. Estas son reglas muy gen\u00e9ricas, normalmente se usan para definir elementos muy b\u00e1sicos de inicio, como los enlaces.<\/p>\n\n\n\n
    Se identifica escribiendo, directamente, la etiqueta HTML correspondiente.<\/p>\n\n\n\n
    a{\n   color: #f00;\n}<\/code><\/pre>\n\n\n\n
    Selector de clase<\/h4>\n\n\n\n
    Podemos crear una regla llamando a una clase. Es la manera m\u00e1s habitual de trabajar el CSS. Una clase es un identificador con la que etiquetamos ciertos elementos para \u00abagruparlos\u00bb bajo un mismo estilo visual<\/strong>. La clase no es \u00fanica, por lo que podemos usarla para denominar elementos que se repiten dentro de la p\u00e1gina.<\/p>\n\n\n\n
    Se identifica con un punto delante del nombre.<\/p>\n\n\n\n
    En el siguiente ejemplo podemos ver que a todos los elementos etiquetados con la clase \u00abresaltado\u00bb les hemos aplicado una negrita y un color.<\/p>\n\n\n\n
    .resaltado{\n   font-weight:bold;\n   color:#ff0;\n}<\/code><\/pre>\n\n\n\n
    Selector ID<\/h4>\n\n\n\n
    Finalmente, podemos realizar un selector que busque un ID. Estos identificadores deben ser \u00fanicos<\/strong> dentro de la p\u00e1gina mostrada, por tanto se trata de reglas muy espec\u00edficas para elementos muy puntuales.<\/p>\n\n\n\n
    Se identifica con la almohadilla (#) delante del nombre.<\/p>\n\n\n\n
    #menu-principal{\n   font-size:1.4rem;\n}<\/code><\/pre>\n\n\n\n
    Otros selectores y mezclas<\/h4>\n\n\n\n
    Hemos visto s\u00f3lo tres formas b\u00e1sicas de hacer un selector, pero tambi\u00e9n est\u00e1 el selector universal<\/a>, por atributos<\/a>… La cosa no acaba ah\u00ed, puedes conocer m\u00e1s sobre los selectores CSS en este art\u00edculo de selectores avanzados<\/a>. La cuesti\u00f3n es que, una vez conocidos todos ellos, se pueden mezclar para realizar selectores compuestos o pisar reglas con otras de m\u00e1s autoridad.<\/p>\n\n\n\n
    Te dejamos enlace a ambos art\u00edculos sobre selectores CSS:<\/p>\n\n\n\n
    \n
    \n
    \"Tipos<\/a><\/figure>\n<\/div>\n\n\n\n
    \n
    \"Selectores<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    Propiedades<\/h3>\n\n\n\n
    El otro elemento b\u00e1sico de la regla es el qu\u00e9 hacer<\/strong>. Para ello hay toda una serie de propiedades que debemos conocer para cambiar el tama\u00f1o de letra, color, fondo, alineaci\u00f3n, m\u00e1rgenes, etc.<\/p>\n\n\n\n
    a.btn{\n   background-color:#3300ff;\n   padding: 2rem;\n   border-radius: 5px;\n   margin-bottom:0.5rem;\n   width:100%;\n}<\/code><\/pre>\n\n\n\n
    En este art\u00edculo puedes encontrar una lista de propiedades CSS<\/a>:<\/p>\n\n\n
    \n
    \"Listado<\/a><\/figure>\n<\/div>\n\n\n
    CSS seg\u00fan dispositivos<\/h2>\n\n\n\n
    Actualmente, con la importancia de la navegaci\u00f3n a trav\u00e9s de los m\u00f3viles, es b\u00e1sico que una web se adapte a los diferentes tama\u00f1os de pantalla. Esto se consigue, principalmente, con el dise\u00f1o responsive<\/em><\/strong>, y para ello son clave las media queries<\/strong><\/em>, una serie de indicaciones en nuestro CSS para condicionar las diferentes reglas a diferentes anchuras de pantalla.<\/p>\n\n\n\n
    Aqu\u00ed puedes leer m\u00e1s sobre el dise\u00f1o responsive y adaptativo<\/a>:<\/p>\n\n\n
    \n
    \"Dise\u00f1o<\/figure>\n<\/div>\n\n\n
    CSS Minificado<\/h2>\n\n\n\n
    Minificar el CSS implica eliminar todo aquello que no aporta informaci\u00f3n relevante. B\u00e1sicamente es eliminar lo que no aporta informaci\u00f3n<\/strong>, los espacios en blanco y comentarios del CSS y presentar todo el c\u00f3digo en una sola l\u00ednea. Puedes consultar nuestro art\u00edculo donde desarrollamos este tema<\/a>.<\/p>\n\n\n
    \n
    \"Minificar<\/a><\/figure>\n<\/div>\n\n\n
    Efectos CSS y mezclas<\/h2>\n\n\n\n
    Con todo lo visto podemos ver el potencial del CSS. No solo es capaz de dar un aspecto agradable a nuestra p\u00e1gina web, sino que, cada vez m\u00e1s, dispone de funcionalidades y efectos que har\u00e1n de la navegaci\u00f3n toda una experiencia: Adaptabilidad, dise\u00f1os personalizados, animaci\u00f3n, transiciones, efectos de superposici\u00f3n…<\/strong> Puedes ver, por ejemplo, este tutorial de c\u00f3mo crear un efecto cristal<\/a>.<\/p>\n\n\n
    \n
    \"Efecto<\/a><\/figure>\n<\/div>\n\n\n
    Con la interacci\u00f3n que ofrece JavaScript, puedes a\u00f1adir, por ejemplo, un bot\u00f3n para alternar entre modo normal y modo oscuro<\/a>. Te lo contamos en su d\u00eda en un tutorial:<\/p>\n\n\n
    \n
    \"Tema<\/a><\/figure>\n<\/div>\n\n\n
    Los bordes redondeados pueden dar un estilo m\u00e1s informal y flexible a tu sitio web. Se asignan con la propiedad ‘border-radius’<\/em>, a la que se le asigna un valor en p\u00edxeles, porcentaje, rem… Si eres fan de las esquinas redondeadas en CSS<\/a>, te dejamos un art\u00edculo donde profundizar en el tema.<\/p>\n\n\n
    \n
    \"C\u00f3mo<\/a><\/figure>\n<\/div>\n\n\n
    Conclusi\u00f3n<\/h2>\n\n\n\n
    Con estos bonitos efectos de CSS cerramos esta recopilaci\u00f3n. Esperamos que te sirva para aprender las bases del dise\u00f1o web. Si necesitas ayuda para aprender, tambi\u00e9n impartimos un curso CSS avanzado<\/a>. <\/p>\n\n\n
    \n
    \"Curso<\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"
    \u00bfQuieres aprender CSS? Te presentamos una gu\u00eda b\u00e1sica de introducci\u00f3n, recopilando varios art\u00edculos sobre el tema: Qu\u00e9 es, c\u00f3mo se usa, cu\u00e1les son sus componentes… \u00bfComenzamos?<\/p>\n","protected":false},"author":2,"featured_media":11168,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-9970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"\nQu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n (actualizada 2024)<\/title>\n<meta name=\"description\" content=\"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n | Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-20T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-13T16:25:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alberto Bravo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n | Caronte Web Studio\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alberto Bravo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/\"},\"author\":{\"name\":\"Alberto Bravo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\"},\"headline\":\"\u00bfQu\u00e9 significa CSS? Gu\u00eda b\u00e1sica\",\"datePublished\":\"2022-09-20T11:00:00+00:00\",\"dateModified\":\"2024-03-13T16:25:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/\"},\"wordCount\":1083,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/que-es-css.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/\",\"name\":\"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n (actualizada 2024)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/que-es-css.jpg\",\"datePublished\":\"2022-09-20T11:00:00+00:00\",\"dateModified\":\"2024-03-13T16:25:34+00:00\",\"description\":\"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/que-es-css.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/que-es-css.jpg\",\"width\":1250,\"height\":737,\"caption\":\"\u00bfQu\u00e9 siginifica CSS?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-significa-css-guia-basica\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQu\u00e9 significa CSS? Gu\u00eda b\u00e1sica\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\",\"name\":\"Alberto Bravo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"caption\":\"Alberto Bravo\"},\"sameAs\":[\"http:\\\/\\\/albertobravoart.com\",\"https:\\\/\\\/www.instagram.com\\\/albertobravoart\\\/\",\"https:\\\/\\\/es.linkedin.com\\\/in\\\/albertobravobarreiro\",\"https:\\\/\\\/www.youtube.com\\\/@albertobravoart224\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/alberto\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n (actualizada 2024)","description":"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.","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:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/","og_locale":"es_ES","og_type":"article","og_title":"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n | Caronte Web Studio","og_description":"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.","og_url":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2022-09-20T11:00:00+00:00","article_modified_time":"2024-03-13T16:25:34+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","type":"image\/jpeg"}],"author":"Alberto Bravo","twitter_card":"summary_large_image","twitter_title":"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n | Caronte Web Studio","twitter_description":"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.","twitter_image":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","twitter_misc":{"Escrito por":"Alberto Bravo","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/"},"author":{"name":"Alberto Bravo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350"},"headline":"\u00bfQu\u00e9 significa CSS? Gu\u00eda b\u00e1sica","datePublished":"2022-09-20T11:00:00+00:00","dateModified":"2024-03-13T16:25:34+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/"},"wordCount":1083,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/","url":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/","name":"Qu\u00e9 significa CSS. Gu\u00eda b\u00e1sica de iniciaci\u00f3n (actualizada 2024)","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","datePublished":"2022-09-20T11:00:00+00:00","dateModified":"2024-03-13T16:25:34+00:00","description":"\u00bfQu\u00e9 significa CSS? \u00bfPara qu\u00e9 sirve? \u00bfC\u00f3mo se usa? Te traemos una gu\u00eda b\u00e1sica de introducci\u00f3n al CSS con enlaces para ampliar la informaci\u00f3n.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg","width":1250,"height":737,"caption":"\u00bfQu\u00e9 siginifica CSS?"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfQu\u00e9 significa CSS? Gu\u00eda b\u00e1sica"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350","name":"Alberto Bravo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","caption":"Alberto Bravo"},"sameAs":["http:\/\/albertobravoart.com","https:\/\/www.instagram.com\/albertobravoart\/","https:\/\/es.linkedin.com\/in\/albertobravobarreiro","https:\/\/www.youtube.com\/@albertobravoart224"],"url":"https:\/\/carontestudio.com\/blog\/author\/alberto\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/9970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=9970"}],"version-history":[{"count":10,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/9970\/revisions"}],"predecessor-version":[{"id":19340,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/9970\/revisions\/19340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/11168"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=9970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=9970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=9970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}