{"type":"doc","content":[{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":712,"id":"3d8a9b40-7bc0-4bde-ba02-b6d84b93450e","collection":"contentId-30703619","type":"file","height":477}}]},{"type":"paragraph","content":[{"text":"We’ve complied a collection of coding solutions for NMSU website developers and designers that can also be used in Cascade CMS. These resource details any type of component we build in HTML and CSS that isn’t already available to you via the Cascade interface (i.e. News Blocks or Hero Visual Elements). You can think of these as additions or customizations to the Cascade components already created by the NMSU web development team.","type":"text"}]},{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"Please note","type":"text","marks":[{"type":"strong"}]},{"text":" that ","type":"text"},{"text":"you don’t need any coding experience to use code snippets","type":"text","marks":[{"type":"underline"}]},{"text":" — if you can copy and paste, you can use the code provided on your website.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Our ","type":"text"},{"text":"code snippets","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://themetest-d.nmsu.edu/brand-rollout-documentation-demo/Brand2022_snippets/index.html"}}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"are small blocks of reusable code that you can add to your Cascade CMS pages that are meant to save you time without needing to use code your own CSS. Our goal is to provide ready-made web development help — namely, in the form of HTML and CSS code snippets— to enable site owners to quickly build parts of their website that would not otherwise be possible using Cascade’s built-in tools.","type":"text"}]},{"type":"paragraph","content":[{"text":"Table of Contents","type":"text","marks":[{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"b79cd5c7da9d94a9f125f49e72c31686"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"53afe649-af91-4271-8da7-60afb4406f24"}},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"What is CSS and what are CSS classes? ","type":"text"}]},{"type":"paragraph","content":[{"text":"Cascading Style Sheets","type":"text","marks":[{"type":"em"}]},{"text":", fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.","type":"text"}]},{"type":"paragraph","content":[{"text":"Our theme includes several CSS classes that are built into the templates to provide a consistent presentation of colors, fonts, and branding. The base CSS styles sheets include a variety of CSS styles that you can use to expand your content presentation from the built in theme features. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":650,"id":"a38be504-dcbc-4bbe-a3da-376d5b7f2fa0","collection":"contentId-30703619","type":"file","height":180}},{"type":"caption","content":[{"text":"Image Source","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/HTML_element"}}]}]}]},{"type":"paragraph","content":[{"text":"You can add an unlimited number of CSS classes to various elements. However we do recommend keeping track of what you’re changing to make sure you can revert to previous versions if the end result doesn’t match your expectations. ","type":"text"}]},{"type":"paragraph","content":[{"text":"You can add CSS classes to HTML element, but some of the common ones include: ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Paragraph (

)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Headers (

,

, etc.)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Blockquotes (
)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Spans ()","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Divs (
)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Images ()","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Buttons (

,

,

Heading 3