all-petite-caps displays petite capitals for both upper and lowercase letters. If fonts do not have this feature, letters look the same as with small-caps. all-small-caps displays small caps for upper and lowercase letters. generic family – a group of font familiesīefore CSS3, this property for setting font style in CSS only had normal and small-caps values. The two font family names in CSS are as follows: Therefore, other properties are important in order to select the necessary font from the family. This property does not specify a single font face, but a family. The font-family property sets a font for an element. 
Inheritance: omitted optional properties do not inherit values from their parent elements. For safety, include a fallback function to run when the shorthand fails. It makes CSS ignore the entire statement. Syntax: the font-stretch CSS property might not work in older browsers. Otherwise, CSS ignores them and might do the same for the mandatory properties. Syntax: the optional values must be before the font-size value in the shorthand. Syntax: the value of font-family has to be last in the declaration. Syntax: if the shorthand does not have font-size and font-family, CSS will ignore the entire statement. The font shorthand has some issues due to problematic syntax and inheritance. Note: only font-size and font-family properties are mandatory in the font CSS shorthand. Selects a condensed or expanded face from fonts Transforms text to smaller uppercase letters So, regardless of the context or the element type, text styling passes down through the hierarchy unless it's been overridden.Defines the font family your text will haveĪdds regular, italic or oblique effect to your lettersĭescribes the thickness of your characters We can override at any time, or we can remove that and check to see that, yet again, we're inheriting that style value from the Link Block. Where is this style value coming from? Of course, it's coming from our Link Block. Once we do that, we can go in and select our text. We could style the text directly, or we could simply select the Link Block and change the styling here. 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 kommentar(er)
