{"id":2498422,"date":"2024-10-17T12:30:39","date_gmt":"2024-10-17T19:30:39","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2498422"},"modified":"2024-10-17T10:49:03","modified_gmt":"2024-10-17T17:49:03","slug":"beginner-steps-for-adding-color-to-pop-ups-with-html","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html","title":{"rendered":"Beginner steps for adding color to pop-ups with HTML"},"author":7411,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[29101,27361,29091,366492,29041],"industry":[],"product":[36551],"class_list":["post-2498422","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-code","tag-design","tag-html","tag-pop-up","tag-style","product-arcgis-online"],"acf":{"short_description":"A short tutorial that teaches how to enhance a web map pop-up with HTML.","flexible_content":[{"acf_fc_layout":"content","content":"<p>You don\u2019t need to be a coding expert to add a bit of flair to your pop-ups with HTML. In this short tutorial, I\u2019ll share step-by-step instructions and explanations suitable for learners who have never used HTML.<\/p>\n<p>I don\u2019t typically craft an entire pop-up with HTML. Instead, I insert small amounts of code to achieve finishing touches that aren\u2019t possible to do otherwise. In the example below, I used HTML to add color highlighting to some text:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498442,"id":2498442,"title":"Picture1","filename":"Picture1.png","filesize":46298,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture1-91","alt":"Pop-up before and after formatting","author":"7411","description":"","caption":"Pop-up before and after HTML formatting","name":"picture1-91","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:16:46","modified":"2024-09-23 15:21:46","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1011,"height":265,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","medium-width":464,"medium-height":122,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","medium_large-width":768,"medium_large-height":201,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","large-width":1011,"large-height":265,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","1536x1536-width":1011,"1536x1536-height":265,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","2048x2048-width":1011,"2048x2048-height":265,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1-826x217.png","card_image-width":826,"card_image-height":217,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture1.png","wide_image-width":1011,"wide_image-height":265}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Follow the steps below to learn how to make this formatting change with HTML.<\/p>\n<p>1. Open the <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=c833264d324d460792118868c9a5fc86\" target=\"_blank\" rel=\"noopener\">HTML pop-ups<\/a> web map.<\/p>\n<p>This map shows the peaks (also known as \u201cfells\u201d) of the Lake District in England. You can learn how to make this map by following \u00a0the tutorial series <a href=\"https:\/\/learn.arcgis.com\/en\/paths\/cartographic-creations-with-web-maps\/\" target=\"_blank\" rel=\"noopener\">Cartographic creations with web maps<\/a>.<\/p>\n<p>If you want to save your work, you must sign in first. You can also complete the tutorial without saving your work.<\/p>\n<p>2. Optionally, sign in and save a copy of the map. (On the <strong>Contents <\/strong>(dark) toolbar, click the <strong>Save and open<\/strong> button and click <strong>Save as<\/strong>.)<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498482,"id":2498482,"title":"Picture2","filename":"Picture2.png","filesize":12056,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture2-56","alt":"Save as button","author":"7411","description":"","caption":"","name":"picture2-56","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:21:05","modified":"2024-09-23 15:21:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":405,"height":317,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","medium-width":333,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","medium_large-width":405,"medium_large-height":317,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","large-width":405,"large-height":317,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","1536x1536-width":405,"1536x1536-height":317,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","2048x2048-width":405,"2048x2048-height":317,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","card_image-width":405,"card_image-height":317,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture2.png","wide_image-width":405,"wide_image-height":317}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>3. On the <strong>Contents<\/strong>\u00a0toolbar, click the <strong>Layers<\/strong> button. In the <strong>Layers<\/strong> pane, select the <strong>Fells<\/strong> layer.<\/p>\n<p>A blue bar appears next to the layer when it\u2019s selected.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498492,"id":2498492,"title":"Picture3","filename":"Picture3.png","filesize":26437,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture3-53","alt":"Blue selection bar in the Layers pane","author":"7411","description":"","caption":"","name":"picture3-53","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:24:19","modified":"2024-09-23 15:27:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":517,"height":319,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","medium-width":423,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","medium_large-width":517,"medium_large-height":319,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","large-width":517,"large-height":319,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","1536x1536-width":517,"1536x1536-height":319,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","2048x2048-width":517,"2048x2048-height":319,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","card_image-width":517,"card_image-height":319,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture3.png","wide_image-width":517,"wide_image-height":319}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. On the <strong>Settings<\/strong> (light) toolbar, click the <strong>Pop-ups<\/strong> button to open the <strong>Pop-ups<\/strong> pane.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498502,"id":2498502,"title":"Picture4","filename":"Picture4.png","filesize":22355,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture4-54","alt":"Pop-ups button and pane","author":"7411","description":"","caption":"","name":"picture4-54","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:28:02","modified":"2024-09-23 15:28:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":440,"height":548,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","medium-width":210,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","medium_large-width":440,"medium_large-height":548,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","large-width":440,"large-height":548,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","1536x1536-width":440,"1536x1536-height":548,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","2048x2048-width":440,"2048x2048-height":548,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4-373x465.png","card_image-width":373,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture4.png","wide_image-width":440,"wide_image-height":548}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The pop-up for this layer has already been formatted with a title, text, and an image.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498512,"id":2498512,"title":"Picture5","filename":"Picture5.png","filesize":105962,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture5-41","alt":"Pop-up","author":"7411","description":"","caption":"","name":"picture5-41","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:28:59","modified":"2024-09-23 15:29:15","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":541,"height":607,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","medium-width":233,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","medium_large-width":541,"medium_large-height":607,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","large-width":541,"large-height":607,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","1536x1536-width":541,"1536x1536-height":607,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","2048x2048-width":541,"2048x2048-height":607,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5-414x465.png","card_image-width":414,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture5.png","wide_image-width":541,"wide_image-height":607}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You\u2019ll use HTML to add color formatting to the pop-up. Color in pop-ups can help to break up large amounts of text and make it easier and more appealing to read.<\/p>\n<p>5. In the <strong>Pop-ups<\/strong> pane, click <strong>Text<\/strong>, and click <strong>Edit text<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498522,"id":2498522,"title":"Picture6","filename":"Picture6.png","filesize":8690,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture6-40","alt":"Edit text button","author":"7411","description":"","caption":"","name":"picture6-40","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:29:47","modified":"2024-09-23 15:30:06","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":384,"height":271,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","medium-width":370,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","medium_large-width":384,"medium_large-height":271,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","large-width":384,"large-height":271,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","1536x1536-width":384,"1536x1536-height":271,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","2048x2048-width":384,"2048x2048-height":271,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","card_image-width":384,"card_image-height":271,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture6.png","wide_image-width":384,"wide_image-height":271}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>6. On the text editor toolbar, click the <strong>Source<\/strong> button.<\/p>\n<p>The text reappears, formatted as HTML.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498532,"id":2498532,"title":"Picture7","filename":"Picture7.png","filesize":10549,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture7-28","alt":"Source button","author":"7411","description":"","caption":"","name":"picture7-28","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:30:56","modified":"2024-09-23 15:31:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":699,"height":175,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7-213x175.png","thumbnail-width":213,"thumbnail-height":175,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","medium-width":464,"medium-height":116,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","medium_large-width":699,"medium_large-height":175,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","large-width":699,"large-height":175,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","1536x1536-width":699,"1536x1536-height":175,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","2048x2048-width":699,"2048x2048-height":175,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","card_image-width":699,"card_image-height":175,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture7.png","wide_image-width":699,"wide_image-height":175}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The first three lines of text look like this:<\/p>\n<p><em><strong><span style=\"color: #008000\">&lt;p&gt;<\/span><\/strong><\/em><\/p>\n<p><em><strong><span style=\"color: #008000\">\u00a0\u00a0\u00a0 Click &lt;a href=&#8221;{expression\/expr0}&#8221;&gt;&lt;strong&gt;here&lt;\/strong&gt;&lt;\/a&gt; to see a photo of {Name}.<\/span><\/strong><\/em><\/p>\n<p><em><strong><span style=\"color: #008000\">&lt;\/p&gt;<\/span><\/strong><\/em><\/p>\n"},{"acf_fc_layout":"content","content":"<ul>\n<li>The <strong>&lt;p&gt;<\/strong> tag defines the start of a paragraph. The <strong>&lt;\/p&gt;<\/strong> tag defines the end of the paragraph.<\/li>\n<li>The <strong>&lt;a href=\u201d\u2026\u201d&gt;<\/strong> and <strong>&lt;\/a&gt;<\/strong> tags apply a hyperlink to the text between them. In this case, the hyperlink is <strong>{expression\/expr0}<\/strong>, which is an Arcade expression defined elsewhere in the web map.<\/li>\n<li>The <strong>&lt;strong&gt;<\/strong> and <strong>&lt;\/strong&gt;<\/strong> tags bold the text between them.<\/li>\n<\/ul>\n<p>This code equates to a paragraph with the text <strong>Click here to see a photo of {Name}<\/strong>. The text <strong>here<\/strong> is both bolded and hyperlinked.<\/p>\n<p>You won\u2019t rewrite this HTML; you\u2019ll just insert some extra formatting.<\/p>\n<p>7. Find the second <strong>&lt;p&gt; <\/strong>tag, on the fourth line, just before <strong>&lt;strong&gt;Height: {Metres} meters&lt;\/strong&gt;<\/strong>.<\/p>\n<p>This <strong>&lt;p&gt;<\/strong> tag indicates the start of a new paragraph. You\u2019ll add inline CSS to change the background color of this paragraph to green.<\/p>\n<p>8. Add a space after the <strong>p<\/strong> and type <span style=\"color: #008000\"><strong><em>style=&#8221;background-color:#bad372;&#8221;<\/em><\/strong><\/span>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498582,"id":2498582,"title":"Picture8","filename":"Picture8.png","filesize":3837,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture8-25","alt":"Inline CSS","author":"7411","description":"","caption":"","name":"picture8-25","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:41:39","modified":"2024-09-23 15:42:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":390,"height":139,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8-213x139.png","thumbnail-width":213,"thumbnail-height":139,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","medium-width":390,"medium-height":139,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","medium_large-width":390,"medium_large-height":139,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","large-width":390,"large-height":139,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","1536x1536-width":390,"1536x1536-height":139,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","2048x2048-width":390,"2048x2048-height":139,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","card_image-width":390,"card_image-height":139,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture8.png","wide_image-width":390,"wide_image-height":139}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The text you added is referred to as inline CSS. CSS stands for Cascading Style Sheets and is a language that is used to add styling to HTML. Typically, CSS is written in a separate file that the HTML file references, but it can also be added directly to the HTML code, as you are doing here. When it is added directly, it is called <em>inline CSS<\/em>.<\/p>\n<p>By adding the <strong>style=&#8221;&#8221;<\/strong> attribute to the <strong>&lt;p&gt;<\/strong> tag, you are saying that you want to format the paragraph with some kind of style. Specifically, you want to change the <strong>background-color<\/strong> property to <strong>#bad372<\/strong>, which is the hex code for a pale yellow-green color.<\/p>\n<p>9. On the text editor toolbar, click the <strong>Source<\/strong> button to return to the visual editor.<\/p>\n<p>The second line of text is now highlighted in green.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498602,"id":2498602,"title":"Picture9","filename":"Picture9.png","filesize":19079,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture9-23","alt":"Source button","author":"7411","description":"","caption":"","name":"picture9-23","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:42:38","modified":"2024-09-23 15:43:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":697,"height":206,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","medium-width":464,"medium-height":137,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","medium_large-width":697,"medium_large-height":206,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","large-width":697,"large-height":206,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","1536x1536-width":697,"1536x1536-height":206,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","2048x2048-width":697,"2048x2048-height":206,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","card_image-width":697,"card_image-height":206,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture9.png","wide_image-width":697,"wide_image-height":206}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>(If the background color is missing, ensure that the code you added uses straight quotes instead of curly quotes.)<\/p>\n<p>You\u2019ll also change the background color of the prominence paragraph.<\/p>\n<p>10. Click the <strong>Source<\/strong> button again.<\/p>\n<p>11. Scroll down to find the <strong>&lt;p&gt;<\/strong> tag just before <strong>&lt;strong&gt;Prominence: {Drop_} meters&lt;\/strong&gt;<\/strong>.<\/p>\n<p>12. Add a space after the <strong>p<\/strong> and type <span style=\"color: #008000\"><em><strong>style=&#8221;background-color:#76b57d;&#8221;<\/strong><\/em><\/span>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498612,"id":2498612,"title":"Picture10","filename":"Picture10.png","filesize":12265,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture10-26","alt":"Inline CSS","author":"7411","description":"","caption":"","name":"picture10-26","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:43:46","modified":"2024-09-23 15:43:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":633,"height":242,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","medium-width":464,"medium-height":177,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","medium_large-width":633,"medium_large-height":242,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","large-width":633,"large-height":242,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","1536x1536-width":633,"1536x1536-height":242,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","2048x2048-width":633,"2048x2048-height":242,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","card_image-width":633,"card_image-height":242,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture10.png","wide_image-width":633,"wide_image-height":242}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This is the same code that you added earlier, just with a different shade of green.<\/p>\n<p>13. On the toolbar, click the <strong>Source <\/strong>button.<\/p>\n<p>The fourth line of text is now highlighted as well.<\/p>\n<p>14. Add a space before the words <strong>Height<\/strong> and <strong>Prominence<\/strong> to create a bit of a buffer with their backgrounds.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498622,"id":2498622,"title":"Picture11","filename":"Picture11.png","filesize":28684,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture11-19","alt":"Spaces added to text","author":"7411","description":"","caption":"","name":"picture11-19","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:44:39","modified":"2024-09-23 15:45:01","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":655,"height":267,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","medium-width":464,"medium-height":189,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","medium_large-width":655,"medium_large-height":267,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","large-width":655,"large-height":267,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","1536x1536-width":655,"1536x1536-height":267,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","2048x2048-width":655,"2048x2048-height":267,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","card_image-width":655,"card_image-height":267,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture11.png","wide_image-width":655,"wide_image-height":267}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>15. Click the <strong>Source<\/strong> button again.<\/p>\n<p>A new bit of code has been inserted: <strong>&amp;nbsp;<\/strong>. This is the code for a nonbreaking space.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498642,"id":2498642,"title":"Picture12","filename":"Picture12-1.png","filesize":9672,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture12-17","alt":"Non breaking space","author":"7411","description":"","caption":"","name":"picture12-17","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:45:56","modified":"2024-09-23 15:46:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":643,"height":195,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1-213x195.png","thumbnail-width":213,"thumbnail-height":195,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","medium-width":464,"medium-height":141,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","medium_large-width":643,"medium_large-height":195,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","large-width":643,"large-height":195,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","1536x1536-width":643,"1536x1536-height":195,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","2048x2048-width":643,"2048x2048-height":195,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","card_image-width":643,"card_image-height":195,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture12-1.png","wide_image-width":643,"wide_image-height":195}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You\u2019re ready to commit your changes. However, the <strong>OK<\/strong> and <strong>Cancel<\/strong> buttons are not available.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498662,"id":2498662,"title":"Picture13","filename":"Picture13.png","filesize":3051,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture13-16","alt":"OK and Cancel button","author":"7411","description":"","caption":"","name":"picture13-16","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:46:40","modified":"2024-09-23 15:46:54","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":308,"height":112,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13-213x112.png","thumbnail-width":213,"thumbnail-height":112,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","medium-width":308,"medium-height":112,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","medium_large-width":308,"medium_large-height":112,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","large-width":308,"large-height":112,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","1536x1536-width":308,"1536x1536-height":112,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","2048x2048-width":308,"2048x2048-height":112,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","card_image-width":308,"card_image-height":112,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture13.png","wide_image-width":308,"wide_image-height":112}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You need to switch out of source view before you can click them.<\/p>\n<p>16. Click the <strong>Source<\/strong> button. Click <strong>OK<\/strong>.<\/p>\n<p>The color background formatting is now visible on the pop-up. The two colors match those used in the diagram, making it easier for people to relate the text to the image.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2498672,"id":2498672,"title":"Picture14","filename":"Picture14.png","filesize":106283,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\/picture14-13","alt":"Finished pop-up","author":"7411","description":"","caption":"","name":"picture14-13","status":"inherit","uploaded_to":2498422,"date":"2024-09-23 15:47:23","modified":"2024-09-23 15:47:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":541,"height":607,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","medium-width":233,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","medium_large-width":541,"medium_large-height":607,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","large-width":541,"large-height":607,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","1536x1536-width":541,"1536x1536-height":607,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","2048x2048-width":541,"2048x2048-height":607,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14-414x465.png","card_image-width":414,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/Picture14.png","wide_image-width":541,"wide_image-height":607}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>In this example, you used one CSS property: background-color. There are many other HTML and CSS properties that can be used to enhance pop-ups. You can find them all on the W3 Schools website, which is a great resource and reference for learning <a href=\"https:\/\/www.w3schools.com\/html\/default.asp\" target=\"_blank\" rel=\"noopener\">HTML<\/a> and <a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noopener\">CSS<\/a>.<\/p>\n<p>There\u2019s so much more you can do with HTML in pop-ups. See some great examples in the article <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/authoring-pop-ups-using-html-source-editing\/\">Authoring pop-ups using HTML source editing<\/a>.<\/p>\n<p>Here is the final HTML code that you started with. The parts that you added are shown in bold:<br \/>\n<em><span style=\"color: #008000\">&lt;p&gt;<br \/>\nClick &lt;a href=&#8221;{expression\/expr0}&#8221;&gt;&lt;strong&gt;here&lt;\/strong&gt;&lt;\/a&gt; to see a photo of {Name}.<br \/>\n&lt;\/p&gt;<br \/>\n&lt;p <strong>style=&#8221;background-color:#bad372;&#8221;<\/strong>&gt;<br \/>\n&lt;strong&gt;<strong>&amp;nbsp;<\/strong>Height: {Metres} meters&lt;\/strong&gt;<br \/>\n&lt;\/p&gt;<br \/>\n&lt;p&gt;<br \/>\nHeight is the change in elevation between a mountain&#8217;s peak and sea-level.<br \/>\n&lt;\/p&gt;<br \/>\n&lt;p <strong>style=&#8221;background-color:#76b57d;&#8221;<\/strong>&gt;<br \/>\n&lt;strong&gt;<strong>&amp;nbsp;P<\/strong>rominence: {Drop_} meters&lt;\/strong&gt;<br \/>\n&lt;\/p&gt;<br \/>\n&lt;p&gt;<br \/>\nTopographic prominence, or drop, is the change in elevation between a mountain&#8217;s peak and the lowest contour line that encircles it, but no other higher peaks.<br \/>\n&lt;\/p&gt;<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n"}],"related_articles":[{"ID":1438712,"post_author":"58731","post_date":"2022-01-05 07:30:08","post_date_gmt":"2022-01-05 15:30:08","post_content":"","post_title":"Authoring pop-ups using HTML source editing","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"authoring-pop-ups-using-html-source-editing","to_ping":"","pinged":"","post_modified":"2022-02-17 12:35:51","post_modified_gmt":"2022-02-17 20:35:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1438712","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":128671,"post_author":"6461","post_date":"2018-04-18 22:28:53","post_date_gmt":"2018-04-18 22:28:53","post_content":"","post_title":"Combining Arcade and HTML for a Real-life Pop-up Display","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"combining-arcade-and-html-for-a-real-life-pop-up-display","to_ping":"","pinged":"","post_modified":"2024-11-11 12:37:44","post_modified_gmt":"2024-11-11 20:37:44","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=128671","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"}],"authors":[{"ID":7411,"user_firstname":"Heather","user_lastname":"Smith","nickname":"Heather Smith","user_nicename":"heather-smith","display_name":"Heather Smith","user_email":"Heather_Smith@esri.com","user_url":"","user_registered":"2018-03-21 18:21:18","user_description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/09\/CARD.png","wide_image":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beginner steps for adding color to pop-ups with HTML<\/title>\n<meta name=\"description\" content=\"A short tutorial that teaches how to enhance a web map pop-up with HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner steps for adding color to pop-ups with HTML\" \/>\n<meta property=\"og:description\" content=\"A short tutorial that teaches how to enhance a web map pop-up with HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\"},\"author\":{\"name\":\"Heather Smith\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263\"},\"headline\":\"Beginner steps for adding color to pop-ups with HTML\",\"datePublished\":\"2024-10-17T19:30:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\"},\"wordCount\":9,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Code\",\"design\",\"HTML\",\"pop-up\",\"style\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\",\"name\":\"Beginner steps for adding color to pop-ups with HTML\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2024-10-17T19:30:39+00:00\",\"description\":\"A short tutorial that teaches how to enhance a web map pop-up with HTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner steps for adding color to pop-ups with HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263\",\"name\":\"Heather Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png\",\"caption\":\"Heather Smith\"},\"description\":\"Heather is a cartographer and artist. She creates resources for the tutorial gallery.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner steps for adding color to pop-ups with HTML","description":"A short tutorial that teaches how to enhance a web map pop-up with HTML.","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:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html","og_locale":"en_US","og_type":"article","og_title":"Beginner steps for adding color to pop-ups with HTML","og_description":"A short tutorial that teaches how to enhance a web map pop-up with HTML.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html"},"author":{"name":"Heather Smith","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263"},"headline":"Beginner steps for adding color to pop-ups with HTML","datePublished":"2024-10-17T19:30:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Code","design","HTML","pop-up","style"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html","name":"Beginner steps for adding color to pop-ups with HTML","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2024-10-17T19:30:39+00:00","description":"A short tutorial that teaches how to enhance a web map pop-up with HTML.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/beginner-steps-for-adding-color-to-pop-ups-with-html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Beginner steps for adding color to pop-ups with HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263","name":"Heather Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png","caption":"Heather Smith"},"description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith"}]}},"text_date":"October 17, 2024","author_name":"Heather Smith","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Online","tag_data":[{"term_id":29101,"name":"Code","slug":"code","term_group":0,"term_taxonomy_id":29101,"taxonomy":"post_tag","description":"","parent":0,"count":8,"filter":"raw"},{"term_id":27361,"name":"design","slug":"design","term_group":0,"term_taxonomy_id":27361,"taxonomy":"post_tag","description":"","parent":0,"count":69,"filter":"raw"},{"term_id":29091,"name":"HTML","slug":"html","term_group":0,"term_taxonomy_id":29091,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":366492,"name":"pop-up","slug":"pop-up","term_group":0,"term_taxonomy_id":366492,"taxonomy":"post_tag","description":"","parent":0,"count":13,"filter":"raw"},{"term_id":29041,"name":"style","slug":"style","term_group":0,"term_taxonomy_id":29041,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2716,"filter":"raw"}],"product_data":[{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2445,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=arcgis-online","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2498422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2498422"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2498422\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2498422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2498422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2498422"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2498422"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2498422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}