{"id":8,"date":"2025-01-05T21:14:14","date_gmt":"2025-01-05T21:14:14","guid":{"rendered":"https:\/\/graphicdesignla.com\/?p=8"},"modified":"2025-07-07T04:02:23","modified_gmt":"2025-07-07T04:02:23","slug":"css-html-snippets","status":"publish","type":"post","link":"https:\/\/graphicdesignla.com\/css-html-snippets\/","title":{"rendered":"CSS \/ HTML Snippets"},"content":{"rendered":"<p>In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey. That&#8217;s where CSS and HTML snippets come to the rescue, offering a treasure trove of pre-made code segments that can be copied and pasted directly into your projects.<br \/>\n&nbsp;<br \/>\n<span style=\"font-size: 18px;\">Here is a small curated collection of CSS\/HTML snippets that are indispensable for our web designers.<\/span><\/p>\n<h2>Center Image in a Basic Gallery<\/h2>\n<p>.gallery figure img {<br \/>\n  display: block;<br \/>\n  margin: 0 auto !important;<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<h2>How to Make Flexible Columns<\/h2>\n<p>.flex-container {<br \/>\ndisplay: flex;<br \/>\nflex-wrap: nowrap;<br \/>\nbackground-color: white;<br \/>\n}<\/p>\n<p>.flex-container &gt; div {<br \/>\nbackground-color: white;<br \/>\nwidth: 12.5%; \/* divide how many columns by 100*\/<br \/>\nmargin: 10px;<br \/>\ntext-align: center;<br \/>\nline-height: 75px;<br \/>\nfont-size: 10px;<br \/>\n}<\/p>\n<p><strong>Add This To Your Page<\/strong><\/p>\n<p><span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>div<span class=\"attributecolor\"> class<span class=\"attributevaluecolor\">=&#8221;flex-container&#8221;<\/span><\/span><span class=\"tagcolor\">&gt;<\/span><\/span><br \/>\n<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>div<span class=\"tagcolor\">&gt;<\/span><\/span>1<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>\/div<span class=\"tagcolor\">&gt;<\/span><\/span><br \/>\n<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>div<span class=\"tagcolor\">&gt;<\/span><\/span>2<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>\/div<span class=\"tagcolor\">&gt;<\/span><\/span><br \/>\n<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>div<span class=\"tagcolor\">&gt;<\/span><\/span>3<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>\/div<span class=\"tagcolor\">&gt;<\/span><\/span><br \/>\n<span class=\"tagnamecolor\"><span class=\"tagcolor\">&lt;<\/span>\/div<span class=\"tagcolor\">&gt;<\/span><\/span><\/p>\n<h2>How to Make A Responsive Grid<\/h2>\n<p><span style=\"font-size: 18px;\">Thanks to <a href=\"https:\/\/www.w3docs.com\/snippets\/css\/how-to-create-a-responsive-layout-with-grid.html\" target=\"_blank\" rel=\"noopener\">W3Docs<\/a><\/span><\/p>\n<div>#grid {<\/div>\n<div>display: grid;<\/div>\n<div>grid-template-columns: repeat(auto-fill, minmax(33%, 33%));<\/div>\n<div>grid-gap: 5px;<\/div>\n<div>min-width:100%;<\/div>\n<div>}<\/div>\n<div>@media screen and (max-width: 1100px) {<\/div>\n<div>#grid {<\/div>\n<div>display: grid;<\/div>\n<div>grid-template-columns: repeat(auto-fill, minmax(33%, 49%));<\/div>\n<div>grid-gap: 5px;<\/div>\n<div>min-width:100%;<\/div>\n<div>}<\/div>\n<div>}<\/div>\n<div><\/div>\n<div>\n<div>#grid &gt; div {<\/div>\n<div>font-size: 1.9em;<\/div>\n<div>padding: .5em;<\/div>\n<div>color: #fff;<\/div>\n<div>background: #ccc;<\/div>\n<div>text-align: center;<\/div>\n<div>}<\/div>\n<\/div>\n<div><\/div>\n<div><strong>Add This To Your Page<\/strong><\/div>\n<div>&lt;!&#8211; GRID &#8211;&gt;<br \/>\n&lt;div id=&#8221;grid&#8221;&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 1 &#8211;&gt;1&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 2 &#8211;&gt;2&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 3 &#8211;&gt;3&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 4 &#8211;&gt;4&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 5 &#8211;&gt;5&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;!&#8211; GRID ITEM 6 &#8211;&gt;6&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/div>\n<div>\n<h2>Basic Box<\/h2>\n<p>.basicbox {<br \/>\nwidth:80%;<br \/>\nmin-height:300px;<br \/>\nmargin-left:10%;<br \/>\npadding:20px;<br \/>\ncolor:white;<br \/>\nfont-size:1.9em;<br \/>\nbackground:#efefef;<br \/>\nborder:solid 1px #ccc;<br \/>\n}<\/p>\n<\/div>\n<div><\/div>\n<div>\n<h2>Basic Box H2<\/h2>\n<\/div>\n<div>.basicbox h2 {<\/div>\n<div>color:#25aae1;<\/div>\n<div>font-size:2.1em;<\/div>\n<div>}<\/div>\n<h2><\/h2>\n<h2>No Break Space<\/h2>\n<p>&amp;nbsp;<br \/>\nor<br \/>\n&lt;p&gt;&amp;nbsp;&lt;\/p&gt;<\/p>\n<h2>Center<\/h2>\n<p>&lt;div align=&#8221;center&#8221;&gt;&lt;\/div&gt;<\/p>\n<h2>Span Class<\/h2>\n<p>&lt;span class=\u201cxxx\u201d&gt;&lt;\/span&gt;<\/p>\n<h2>Mailto<\/h2>\n<p>&lt;a href=&#8221;mailto:johndoe@website.com&#8221;&gt;Contact John&lt;\/a&gt;<\/p>\n<h2>Inline Style<\/h2>\n<p>&lt;div style=&#8221;margin-left:50px;&#8221;&gt;&lt;\/div&gt;<br \/>\nor<br \/>\n&lt;p style=&#8221;margin-left:50px;&#8221;&gt;&lt;\/p&gt;<\/p>\n<h2>Text Shadow<\/h2>\n<p>text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);<\/p>\n<div>\n<h3>A Note About Text Shadows<\/h3>\n<p><strong>rgba is:<\/strong> red (0-255), green (0-255), blue (0-255), alpha (0.0-1)<br \/>\n<strong>3 shadow settings<\/strong> (in the example shown as px, pixels) are:<br \/>\n<strong>X axis<\/strong> for centering left and right,\u00a0<strong>Y axis<\/strong> for centering top and bottom, and the amount of <strong>blur<\/strong>.<br \/>\n(You can use negative numbers for the position and even apply multiple shadows at different positions and opacities for effect!)<\/p>\n<h2>Box Shadow<\/h2>\n<div>background-image: linear-gradient(to bottom right, #FFC906, #FFDD5E, #FFC906);<\/div>\n<div>\n<p><strong>Example of a 3 color gradient of gold blending from top left to bottom right.<\/strong><\/p>\n<\/div>\n<\/div>\n<h2>Text Links<\/h2>\n<p>a:link {text-decoration: none; color: #000;}<br \/>\na:visited {text-decoration: none; color: #000;}<br \/>\na:hover {text-decoration: none; color: #777;}<br \/>\na:active {text-decoration: none; color: #444;}<\/p>\n<h2>Alternate Link Style<\/h2>\n<p>a.alt:link {text-decoration: none; color: #000; font-weight:bold;}<br \/>\na.alt:visited {text-decoration: none; color: #000; font-weight:bold;}<br \/>\na.alt:hover {text-decoration: none; color: #777; font-weight:bold;}<br \/>\na.alt:active {text-decoration: none; color: #777; font-weight:bold;}<br \/>\nand the HTML is:<br \/>\n&lt;a href=&#8221;yourlink.html&#8221; class=&#8221;alt&#8221;&gt;link&lt;\/a&gt;<\/p>\n<h2>Text Styling<\/h2>\n<p>font-size: 12px;<br \/>\nfont-weight: normal;<br \/>\ntext-decoration: none;<br \/>\ncolor: #000;<br \/>\nletter-spacing: 0px;<br \/>\nline-height: 0px;<br \/>\ntext-transform:uppercase;<br \/>\ntext-transform:capitalize;<br \/>\ntext-transform:lowercase;<\/p>\n<h2>Horizontal Rule<\/h2>\n<p>hr {background:#000; width:100px; height: 1px;}<\/p>\n<p>Check out <a href=\"https:\/\/css-tricks.com\/examples\/hrs\/\" target=\"_blank\" rel=\"noopener\">CSS Tricks<\/a> for lots of great HR styles<\/p>\n<h2>Class vs. ID<\/h2>\n<p>The <strong>ID<\/strong> selector specifies a style for a unique element, defined with a &#8220;<strong>#<\/strong>&#8220;, #id_selector.<br \/>\n(Do not start an ID with a number)<\/p>\n<p>The <strong>Class<\/strong> selector specifies a style for a group of elements, defined with a &#8220;<strong>.<\/strong>&#8220;, .class_selector.<\/p>\n<h2>Leave Yourself Notes\/Comments In CSS<\/h2>\n<p>\/* Enclosing a reminder about your CSS code within a \/* *\/ comment is a great idea *\/<\/p>\n<h2>Leave Yourself Notes\/Comments In HTML<\/h2>\n<p>&lt;!&#8211; Enclosing a reminder about your HTML code within a &#8211;&gt; &lt;!&#8211; comment is a great idea &#8211;&gt;<\/p>\n<h2>CSS Override (Add To The End Of A CSS String)<\/h2>\n<p>!important<\/p>\n<h2>Turn Off Element<\/h2>\n<p>display: none;<\/p>\n<h2>Turn Off Hyphenation<\/h2>\n<p>-webkit-hyphens: none;<br \/>\n-moz-hyphens: none;<br \/>\nhyphens: none;<br \/>\nword-wrap: normal;<\/p>\n<h2>Gradient Backgrounds<\/h2>\n<p>background: rgb(110,0,0); \/* Old browsers *\/<br \/>\nbackground: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); \/* FF3.6+ *\/<br \/>\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); \/* Chrome,Safari4+ *\/<br \/>\nbackground: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); \/* Chrome10+,Safari5.1+ *\/<br \/>\nbackground: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); \/* Opera 11.10+ *\/<br \/>\nbackground: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); \/* IE10+ *\/<br \/>\nbackground: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); \/* W3C *\/<br \/>\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#8217;#6e0000&#8242;, endColorstr=&#8217;#b00010&#8242;,GradientType=0 ); \/* IE6-9 *\/<\/p>\n<h2>Background Image No-Repeat<\/h2>\n<p>background-image: url(&#8216;images\/logo.png&#8217;);<br \/>\nbackground-repeat: no-repeat;<\/p>\n<h2>Float &amp; Clear<\/h2>\n<p>If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.<br \/>\n&lt;div style=&#8221;float:left;&#8221;&gt;&amp;nbsp;&lt;\/div&gt;<br \/>\n&lt;div style=&#8221;float:right;&#8221;&gt;&amp;nbsp;&lt;\/div&gt;<br \/>\n&lt;div style=&#8221;clear:left;&#8221;&gt;&amp;nbsp;&lt;\/div&gt;<br \/>\n&lt;div style=&#8221;clear:right;&#8221;&gt;&amp;nbsp;&lt;\/div&gt;<br \/>\n&lt;div style=&#8221;clear:both;&#8221;&gt;&amp;nbsp;&lt;\/div&gt;<\/p>\n<h2>Radius\/Rounded Corners<\/h2>\n<p>border-top-left-radius:2em;<br \/>\nborder-top-right-radius:2em;<br \/>\nborder-bottom-right-radius:2em;<br \/>\nborder-bottom-left-radius:2em;<br \/>\n-moz-border-radius:5px 5px 5px 5px;<br \/>\n-webkit-border-radius:5px 5px 5px 5px;<br \/>\nborder-radius:5px 5px 5px 5px;<br \/>\nborder:1px solid #fff;<\/p>\n<h2>Text\u00a0Selection Color<\/h2>\n<p>::-moz-selection {<br \/>\nbackground: none repeat scroll 0% 0% #888888;<br \/>\ncolor: #fff;<br \/>\n}<\/p>\n<p>::selection {<br \/>\nbackground: none repeat scroll 0% 0% #888888;<br \/>\ncolor: #fff;<br \/>\n}<\/p>\n<h2>Override Inline Styles<\/h2>\n<p>Put the style into brackets <strong>[ ]<\/strong> to override.<br \/>\n[.stylename] {font-size: 12px;}<\/p>\n<h2>Disable links<\/h2>\n<p>pointer-events: none !important;<br \/>\ncursor: default !important;<\/p>\n<h2>.htaccess to display full file name of a directory without an index file<\/h2>\n<p>Options +Indexes<br \/>\nIndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*<\/p>\n<h1><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey.&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[46,45],"tags":[],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-css","category-how-to"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS \/ HTML Snippets - Graphic Design LA<\/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:\/\/graphicdesignla.com\/css-html-snippets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS \/ HTML Snippets - Graphic Design LA\" \/>\n<meta property=\"og:description\" content=\"In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey.&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphicdesignla.com\/css-html-snippets\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphic Design LA\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-05T21:14:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-07T04:02:23+00:00\" \/>\n<meta name=\"author\" content=\"Damion Wagner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Damion Wagner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/\"},\"author\":{\"name\":\"Damion Wagner\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#\\\/schema\\\/person\\\/958bcd390df878f1b4a6b6fc9859fa77\"},\"headline\":\"CSS \\\/ HTML Snippets\",\"datePublished\":\"2025-01-05T21:14:14+00:00\",\"dateModified\":\"2025-07-07T04:02:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/\"},\"wordCount\":978,\"publisher\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#organization\"},\"articleSection\":[\"CSS\",\"How-To\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/\",\"url\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/\",\"name\":\"CSS \\\/ HTML Snippets - Graphic Design LA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#website\"},\"datePublished\":\"2025-01-05T21:14:14+00:00\",\"dateModified\":\"2025-07-07T04:02:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/css-html-snippets\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/graphicdesignla.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS \\\/ HTML Snippets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#website\",\"url\":\"https:\\\/\\\/graphicdesignla.com\\\/\",\"name\":\"Graphic Design LA\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/graphicdesignla.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#organization\",\"name\":\"Damion Wagner Audio and Visual Design\",\"url\":\"https:\\\/\\\/graphicdesignla.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/design.damionwagner.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-damion-wagner-graphic-design.png?fit=1500%2C313&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/design.damionwagner.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-damion-wagner-graphic-design.png?fit=1500%2C313&ssl=1\",\"width\":1500,\"height\":313,\"caption\":\"Damion Wagner Audio and Visual Design\"},\"image\":{\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/damionwagner\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/graphicdesignla.com\\\/#\\\/schema\\\/person\\\/958bcd390df878f1b4a6b6fc9859fa77\",\"name\":\"Damion Wagner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g\",\"caption\":\"Damion Wagner\"},\"url\":\"https:\\\/\\\/graphicdesignla.com\\\/author\\\/damiondesign\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS \/ HTML Snippets - Graphic Design LA","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:\/\/graphicdesignla.com\/css-html-snippets\/","og_locale":"en_US","og_type":"article","og_title":"CSS \/ HTML Snippets - Graphic Design LA","og_description":"In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey.&hellip;","og_url":"https:\/\/graphicdesignla.com\/css-html-snippets\/","og_site_name":"Graphic Design LA","article_published_time":"2025-01-05T21:14:14+00:00","article_modified_time":"2025-07-07T04:02:23+00:00","author":"Damion Wagner","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Damion Wagner","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/#article","isPartOf":{"@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/"},"author":{"name":"Damion Wagner","@id":"https:\/\/graphicdesignla.com\/#\/schema\/person\/958bcd390df878f1b4a6b6fc9859fa77"},"headline":"CSS \/ HTML Snippets","datePublished":"2025-01-05T21:14:14+00:00","dateModified":"2025-07-07T04:02:23+00:00","mainEntityOfPage":{"@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/"},"wordCount":978,"publisher":{"@id":"https:\/\/graphicdesignla.com\/#organization"},"articleSection":["CSS","How-To"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/","url":"https:\/\/graphicdesignla.com\/css-html-snippets\/","name":"CSS \/ HTML Snippets - Graphic Design LA","isPartOf":{"@id":"https:\/\/graphicdesignla.com\/#website"},"datePublished":"2025-01-05T21:14:14+00:00","dateModified":"2025-07-07T04:02:23+00:00","breadcrumb":{"@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphicdesignla.com\/css-html-snippets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/graphicdesignla.com\/css-html-snippets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/graphicdesignla.com\/"},{"@type":"ListItem","position":2,"name":"CSS \/ HTML Snippets"}]},{"@type":"WebSite","@id":"https:\/\/graphicdesignla.com\/#website","url":"https:\/\/graphicdesignla.com\/","name":"Graphic Design LA","description":"","publisher":{"@id":"https:\/\/graphicdesignla.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphicdesignla.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/graphicdesignla.com\/#organization","name":"Damion Wagner Audio and Visual Design","url":"https:\/\/graphicdesignla.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/graphicdesignla.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/design.damionwagner.com\/wp-content\/uploads\/2018\/01\/logo-damion-wagner-graphic-design.png?fit=1500%2C313&ssl=1","contentUrl":"https:\/\/i0.wp.com\/design.damionwagner.com\/wp-content\/uploads\/2018\/01\/logo-damion-wagner-graphic-design.png?fit=1500%2C313&ssl=1","width":1500,"height":313,"caption":"Damion Wagner Audio and Visual Design"},"image":{"@id":"https:\/\/graphicdesignla.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/damionwagner"]},{"@type":"Person","@id":"https:\/\/graphicdesignla.com\/#\/schema\/person\/958bcd390df878f1b4a6b6fc9859fa77","name":"Damion Wagner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c4bed6274acc98e68c46c3aca5b204f1f913ee254a5f5444ca8be1943a56b3c4?s=96&d=mm&r=g","caption":"Damion Wagner"},"url":"https:\/\/graphicdesignla.com\/author\/damiondesign\/"}]}},"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgggeK-8","jetpack_likes_enabled":true,"jetpack-related-posts":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/posts\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":5,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":4880,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/posts\/8\/revisions\/4880"}],"wp:attachment":[{"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphicdesignla.com\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}