{"id":736,"date":"2018-12-03T14:23:32","date_gmt":"2018-12-03T14:23:32","guid":{"rendered":"https:\/\/www.uri.edu\/styleguide\/?page_id=736"},"modified":"2026-03-23T15:15:35","modified_gmt":"2026-03-23T15:15:35","slug":"css","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/design\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n<p class=\"type-intro\">The äçÐÄvlogÃâ·ÑBÕ¾ Modern theme and the Component Library contain a few special <a href=\"https:\/\/www.w3schools.com\/Css\/\">CSS<\/a> selectors that can be used in pages and posts to adjust typography and layout.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Typography<\/h2>\n\n\n\n<h3 id=\"class-type-intro\"><span class=\"badge badge-type-theme\">Theme<\/span> Introductory Text<\/h3>\n<p>Introductory text can be styled with the class <code class=\"class\">type-intro<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/6b7d14884a7834986c8c84a9e4cc824d.js\"><\/script><\/p>\n<div class=\"rendered-example\">\n<p class=\"type-intro\">Some introductory text.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 id=\"class-type-mono\"><span class=\"badge badge-type-theme\">Theme<\/span> Monospaced Text<\/h3>\n<p>Monospaced text can be styled using the class <code class=\"class\">type-mono<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/6b18499d50507277928a7104234f0902.js\"><\/script><\/p>\n<div class=\"rendered-example\">\n<p>This paragraph contains <span class=\"type-mono\">some message<\/span> set in monotype.<\/p>\n<\/div>\n<p>This style is typically reserved for cases where monospaced text improves readability, such as code.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 id=\"class-fullwidth-paragraphs\"><span class=\"badge badge-type-theme\">Theme<\/span> Fullwidth Paragraphs<\/h3>\n<p>To improve readability, paragraphs have a maximum width of 800px, while the page has a maximum width of 1000px. To force a paragraph to assume the entire width of the page, use the class <code class=\"class\">fullwidth<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/6a87ab7ae9417dbab3b28192c0c6e690.js\"><\/script><\/p>\n<div class=\"rendered-example\">\n<p class=\"fullwidth\">This paragraph might be important, introductory, or contain elements that should float to the page margin. It will appear wider than other paragraphs on the page.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 id=\"class-feature-captions\"><span class=\"badge badge-type-theme\">Theme<\/span> Feature Captions<\/h3>\n<p>Captions on heroes and other large images can be styled using the class <code class=\"class\">feature-caption<\/code>. A photo credit within the caption can be further styled using the class <code class=\"class\">credit<\/code> on a nested element.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/8e2d34ed91778e8b077936589a9a5c10.js\"><\/script><\/p>\n<div class=\"rendered-example\">\n<div class=\"feature-caption\">This is the caption for an image.\n<div class=\"credit\">Photograph by Ansel Adams<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Layout<\/h2>\n\n\n\n<h3 id=\"class-fullwidth-alignment\"><span class=\"badge badge-type-theme\">Theme<\/span> Alignment<\/h3>\n<p>The same <code class=\"class\">fullwidth<\/code> class used in <a href=\"#class-fullwidth-paragraphs\">paragraphs<\/a> can also be used to facilitate floating images into the right margin. Image alignment can be specified when adding images from the media library, but images aligned right will generally float to the edge of the paragraph. To float the image into the margin, wrap the aligned image in a <code class=\"tag\">div<\/code> with class <code class=\"class\">fullwidth<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/c8b9969feadaa8d0d49c718bfc1fd119.js\"><\/script><\/p>\n<div class=\"rendered-example\">\n<figure><img decoding=\"async\" class=\"alignright size-full wp-image-563\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/jennifer-hyman-C_1FMbWjFzg-unsplash.jpg\" alt=\"\" width=\"300\"><\/figure><div class=\"fullwidth\"><\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec felis tortor. Mauris lobortis cursus tortor, vel porttitor enim. Proin tristique laoreet dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<\/p>\n<p>Suspendisse potenti. Donec at vulputate neque, venenatis semper nulla. Vivamus eget commodo neque, sed volutpat purus. Donec vel nisi posuere, luctus ipsum vel, fermentum nunc. Vivamus venenatis laoreet venenatis. Integer odio justo, eleifend quis tellus ut, lacinia iaculis est. Aenean nec odio tortor.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<!--\n<h3 id=\"id-stage\"><span class=\"badge badge-type-theme\">Theme<\/span> Stages<\/h3>\n<p>A stage defines a special type of hero treatment available in the theme. In its most basic implementation, a stage adds a prompter arrow to the bottom of its content. Clicking this arrow invokes a scroll to the content immediately after the stage.<\/p>\n<p>Stages are designed to work best when used in conjunction with <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/heroes\">heroes<\/a> formatted as <code class=\"string\">super<\/code>, but can work with virtually any content.<\/p>\n<p>To add a stage, use the id <code class=\"id\">stage<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/e0afbdd47f08bd1db08de02e7d16af3f.js\"><\/script><\/p>\n<p>See an <a href=\"https:\/\/www.uri.edu\/wordpress\/examples\/stage\">example of a stage<\/a>.<\/p>\n<h3>Classes<\/h3>\n<p>Stages can be further embellished by adding a class to define additional behavior. Currently, one class exists. Adding the class <code class=\"class\">fade<\/code> will create a stage that remains fixed when the user scrolls, and becomes obscured by the content below.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/ddda690e18188df83ec369f78d9b8ff8.js\"><\/script><\/p>\n<p>See an <a href=\"https:\/\/www.uri.edu\/wordpress\/examples\/stage-class-fade\">example of a stage with class <code class=\"class\">fade<\/code><\/a>.<\/p>\n-->\n\n\n\n<h3 id=\"class-fitted\"><span class=\"badge badge-type-cl\">CL<\/span> Fitted Components<\/h3>\n<p>Block-level components (all components except <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/buttons\">buttons<\/a>, <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/share-bars\">share bars<\/a>, and <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/social-bars\">social bars<\/a>) have a bottom margin by default. In rare cases, this may be undesirable. To remove the bottom margin from the component, use the class <code class=\"class\">fitted<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/b9fe8e81b93850cd2538584017e5813f.js\"><\/script><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 id=\"class-block-level\"><span class=\"badge badge-type-cl\">CL<\/span> Block-level Components<\/h3>\n<p>Inline components (<a href=\"https:\/\/www.uri.edu\/wordpress\/components\/buttons\">buttons<\/a>, <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/share-bars\">share bars<\/a>, and <a href=\"https:\/\/www.uri.edu\/wordpress\/components\/social-bars\">social bars<\/a>) do not have a bottom margin by default. In some cases, this may be undesirable. To add a bottom margin to the component similar to that of block-level components, use the class <code class=\"class\">block-level<\/code>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/uriwebcom\/86f0956877612953a6e7dddae16ab2f7.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The äçÐÄvlogÃâ·ÑBÕ¾ Modern theme and the Component Library contain a few special CSS selectors that can be used in pages and posts to adjust typography and layout. Typography Theme Introductory Text Introductory text can be styled with the class type-intro. Some introductory text. Theme Monospaced Text Monospaced text can be styled using the class type-mono. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":205,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-736","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":85,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/736\/revisions"}],"predecessor-version":[{"id":2937,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/736\/revisions\/2937"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/205"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}