{"id":14652,"date":"2019-05-05T12:19:29","date_gmt":"2019-05-05T10:19:29","guid":{"rendered":"https:\/\/marabelia.com\/?p=14652"},"modified":"2025-06-19T12:56:52","modified_gmt":"2025-06-19T10:56:52","slug":"how-to-create-a-new-css-style-for-images","status":"publish","type":"post","link":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/","title":{"rendered":"How to create a new CSS style for images"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column][vc_column_text]\n<p style=\"text-align: justify;\">To create a new style for images, the first steps to follow are the same as I explain in my post <a href=\"http:\/\/gooddesign.es\/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/gooddesign.es\/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes\/<\/a>.<\/p>\n<p style=\"text-align: justify;\">I am going to create a new style for images so that the images defined with this style are inside a black rounded frame and have a predefined size.<\/p>\n<p style=\"text-align: justify;\">Specifically, I want to achieve this effect for my images:<\/p>\n<p><img decoding=\"async\" class=\"redondo\" src=\"http:\/\/gooddesign.es\/wp-content\/uploads\/2015\/02\/gif-volador.gif\" alt=\"\" \/><\/p>\n<p style=\"text-align: justify;\">These are the attributes I need to work with:<\/p>\n<pre><code>height: \/*image height*\/\r\nwidth: \/*image width*\/\r\nborder \/*border style (color, size, type)*\/\r\nborder-radius: \/*rounded corners*\/<\/code><\/pre>\n<p style=\"text-align: justify;\">As always, I will give a name to my style. In this case, the name will be <em>redondo<\/em> (rounded):<\/p>\n<pre><code>\/*----------- REDONDO. Rounded images with predefined size ----------- *\/\r\n.redondo {\r\n height: 400px;\r\n width: 400px;\r\n border: 2px solid black;\r\n border-radius: 800px;\r\n }\r\n<\/code><\/pre>\n<p>I call the style from the text editor of my WordPress post or page:<\/p>\n<pre><code>\r\n&lt;img class=\"redondo\" src=\"http:myimage\" &gt;\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>Voil\u00e1. Piece of cake!<\/p>\n<p><img decoding=\"async\" class=\"redondo\" src=\"http:\/\/gooddesign.es\/wp-content\/uploads\/2015\/01\/grafico2.gif\" alt=\"\u00a1ole ole! :-P\" \/>[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"[vc_row][vc_column][vc_column_text] To create a new style for images, the first steps to follow are the same as I explain in my post http:\/\/gooddesign.es\/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes\/. I am going to create a new style for images so that the images defined with this style are inside a black rounded frame and have a predefined size. Specifically, I want [&#8230;]\n","protected":false},"author":1,"featured_media":13359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[98],"tags":[],"class_list":["post-14652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"[vc_row][vc_column][vc_column_text] To create a new style for images, the first steps to follow are the same as I explain in my post http:\/\/gooddesign.es\/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes\/. I am going to create a new style for images so that the images defined with this style are inside a black rounded frame and have a predefined size. Specifically, I want [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-05T10:19:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-19T10:56:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"829\" \/>\n\t<meta property=\"og:image:height\" content=\"419\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin-mbl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-mbl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/\"},\"author\":{\"name\":\"admin-mbl\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\"},\"headline\":\"How to create a new CSS style for images\",\"datePublished\":\"2019-05-05T10:19:29+00:00\",\"dateModified\":\"2025-06-19T10:56:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/\"},\"wordCount\":134,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/redondo.jpg\",\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/\",\"name\":\"How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/redondo.jpg\",\"datePublished\":\"2019-05-05T10:19:29+00:00\",\"dateModified\":\"2025-06-19T10:56:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#primaryimage\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/redondo.jpg\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/redondo.jpg\",\"width\":829,\"height\":419},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/how-to-create-a-new-css-style-for-images\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/marabelia.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a new CSS style for images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"name\":\"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.\",\"description\":\"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.\",\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"alternateName\":\"MARABELIA. Dise\u00f1o Web Valencia.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/marabelia.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\",\"name\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"width\":1080,\"height\":1080,\"caption\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\",\"name\":\"admin-mbl\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"caption\":\"admin-mbl\"},\"sameAs\":[\"https:\\\/\\\/marabelia.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia","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:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/","og_locale":"en_US","og_type":"article","og_title":"How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia","og_description":"[vc_row][vc_column][vc_column_text] To create a new style for images, the first steps to follow are the same as I explain in my post http:\/\/gooddesign.es\/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes\/. I am going to create a new style for images so that the images defined with this style are inside a black rounded frame and have a predefined size. Specifically, I want [...]","og_url":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_published_time":"2019-05-05T10:19:29+00:00","article_modified_time":"2025-06-19T10:56:52+00:00","og_image":[{"width":829,"height":419,"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg","type":"image\/jpeg"}],"author":"admin-mbl","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin-mbl","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#article","isPartOf":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/"},"author":{"name":"admin-mbl","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c"},"headline":"How to create a new CSS style for images","datePublished":"2019-05-05T10:19:29+00:00","dateModified":"2025-06-19T10:56:52+00:00","mainEntityOfPage":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/"},"wordCount":134,"commentCount":0,"publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"image":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg","articleSection":["Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/","url":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/","name":"How to create a new CSS style for images &#8226; Marabelia | Agencia Digital en Valencia","isPartOf":{"@id":"https:\/\/marabelia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#primaryimage"},"image":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg","datePublished":"2019-05-05T10:19:29+00:00","dateModified":"2025-06-19T10:56:52+00:00","breadcrumb":{"@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#primaryimage","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2015\/07\/redondo.jpg","width":829,"height":419},{"@type":"BreadcrumbList","@id":"https:\/\/marabelia.com\/en\/how-to-create-a-new-css-style-for-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/marabelia.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to create a new CSS style for images"}]},{"@type":"WebSite","@id":"https:\/\/marabelia.com\/#website","url":"https:\/\/marabelia.com\/","name":"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.","description":"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.","publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"alternateName":"MARABELIA. Dise\u00f1o Web Valencia.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marabelia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/marabelia.com\/#organization","name":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.","url":"https:\/\/marabelia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","width":1080,"height":1080,"caption":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital."},"image":{"@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c","name":"admin-mbl","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","caption":"admin-mbl"},"sameAs":["https:\/\/marabelia.com"]}]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/comments?post=14652"}],"version-history":[{"count":1,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14652\/revisions"}],"predecessor-version":[{"id":14653,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14652\/revisions\/14653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media\/13359"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=14652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/categories?post=14652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/tags?post=14652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}