{"id":7108,"date":"2024-04-14T16:41:00","date_gmt":"2024-04-14T08:41:00","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7108"},"modified":"2024-04-14T16:41:00","modified_gmt":"2024-04-14T08:41:00","slug":"overview-of-inherited-text-style","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/overview-of-inherited-text-style\/","title":{"rendered":"Overview of Inherited Text Style"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Elements have the ability to transmit text style information to their offspring. You have the option to establish text styles on superior elements, which will flow down, and you can supersede these styles on subordinate elements.<\/p>\n<p>It is typical to utilize this approach to define global font styles on the Body element, to position text and other components within sections, and to supersede default link block styles. Here are these three instances elaborated to demonstrate the workings of cascading text style:<\/p>\n<h2>Illustration 1 &#8211; Inheriting styles from the Body<\/h2>\n<p>Here, we present a basic layout:<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948946758797ac3c4d1d3_5e6132235d6b0ed5c7887eba_596e60611cf246673752d1ea_doc-252520text252520styling252520cascading252520-252520fig25252001.png\" title=\"64b948946758797ac3c4d1d3_5e6132235d6b0ed5c7887eba_596e60611cf246673752d1ea_doc-252520text252520styling252520cascading252520-252520fig25252001\"><\/div>\n<\/figure>\n<p>None of these elements possess class names or styles.<\/p>\n<p>By default, these elements derive their text styling from the <strong>Body<\/strong>. This can be observed by clicking the orange indicator next to the text styles. Altering the font-family on the Body will consequently alter the font-family for all its descendant elements. \u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948946758797ac3c4d1cb_5e6132236f0e68799092cfe0_596e607439634b40d8d102bf_doc-252520text252520styling252520cascading252520-252520fig25252002.png\" title=\"64b948946758797ac3c4d1cb_5e6132236f0e68799092cfe0_596e607439634b40d8d102bf_doc-252520text252520styling252520cascading252520-252520fig25252002\"><\/div>\n<\/figure>\n<p>You can supersede this inherited text styling by selecting a text element and modifying the font-family. Subsequently, a blue indicator will appear, signifying a style alteration has been made on that element.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/226022089\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/226022089\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>You can eliminate this style by clicking the blue indicator and selecting \u201cRemove this style\u201d (or hold ALT and click). The removal of the style will revert the font-family inheritance from the body.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948946758797ac3c4d1d0_5e6132238d76909682d3361e_596e608940f36e23d2870a94_doc-252520text252520styling252520cascading252520-252520fig25252004.png\" title=\"64b948946758797ac3c4d1d0_5e6132238d76909682d3361e_596e608940f36e23d2870a94_doc-252520text252520styling252520cascading252520-252520fig25252004\"><\/div>\n<\/figure>\n<p>It should be noted that while the body is the topmost element, alterations made to it will solely affect that specific page. To apply styles to the body across all pages, initially select the body element and remove the class name. Then, you can select its Tag and make text style alterations.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/226022161\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/226022161\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Illustration 2 &#8211; Inheriting\u00a0styles from a Section<\/h2>\n<p>Despite not being a text element, a section permits font styling. By default, a section inherits its text styling from the body element. This can be overridden by selecting the section and adjusting text style.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/226022273\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/226022273\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Prior to these modifications, the Heading and Paragraph elements were seeking their text styles from the body at the very top of the hierarchy. After the changes are enacted, both Heading and Paragraph\u2014sub-elements of the section\u2014inherit these styles. This is because altering the text styles on the section element interrupted the inheritance chain from the body.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/226022428\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/226022428\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>It is common practice to adjust the text alignment to Center in a section. This action will center all text and inline-block elements, such as images and buttons, within a section.<\/p>\n<h2>Illustration 3 &#8211; Link Block<\/h2>\n<p>In this scenario, there is text nested inside a Link Block. The text can be styled directly, or modifications can be applied by selecting the Link Block. These style adjustments will disrupt the inheritance chain, causing the text to inherit from the Link Block. To validate this, select the text element and observe the orange indicator to confirm that the text style alterations on the Link Block are also reflected here.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/226022495\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/226022495\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Furthermore, it is possible to supersede the default blue text styles of the Link Block by selecting the text element and implementing alterations. The same rationale applies here\u2014styling the text element directly will supersede any inherited text style.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Check out examples of how elements can pass text style information down to their children.","protected":false},"author":2,"featured_media":7109,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-7108","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=7108"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7109"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}