Here's some text sitting inside a Link Block. Let's remove it, and again, we're inheriting from our Section.Įxample 3 is a Link Block. We can see our blue indicator which means exactly that. Any child element can override text styling. Just like we overrode the body earlier, we can do the same thing here. If we take a closer look at the inheritance, we can see the value is now coming from the Section. So it didn't matter.īut since we've added styling to the Section, that's overriding that styling. The Section and the container weren't specifying anything, so the heading and paragraph looked all the way up the hierarchy to the body for that styling info. That's because this override broke the chain of inheritance.īefore, the Section's child elements (the heading and the paragraph) didn't have any indication from their direct parents (like the container or the Section) regarding font. Notice how the heading and paragraph inside - both child elements of the Section - notice how these are affected by the changes. With our Section selected, let's override this font, and while we're at it, let's change the font color, too. Of course, it's coming from our body tag for all pages. Changes here will set those defaults on all pages in the project.Īnd even though it's not a text element, we can apply font styling here, too. A great alternative - and we'll remove this class right now - is to go in and select our Body (All Pages) tag. Again, if we click the indicator, it's inheriting from the body.Īnd keep in mind: while the body is the top level element, we'll have to apply that body class (which was automatically created when we changed the font) - we'll have to apply that to the body on other pages, too. Make a change, now have a blue indicator which, of course, shows us that we've made a style change here. We know that our heading and our paragraph are inheriting this new font change from the body. Now because this updates in real time, this part has already been spoiled. And with the body selected, we'll change the font. Now we've applied no classes - no styling of any type to any of these elements.īy default, if we check our paragraph (press our orange indicator), we can see it's getting the font from the body. Let's drag in a paragraph to join our heading. We have our page body, then inside that we have our Section, then a container inside the Section. We're going to show three examples to demo this. We can set Text Styles on parent elements which pass styling down, and we can override these styles on their child elements. As we know from both HTML element hierarchy and Louisiana Civil Code, elements can pass Text Style information down through to their children.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |