In the font-size property, you’ll know that there are many different measurements to use when defining the size of the font.
- xx-small through xx-large – relative to the default browser font size
- percentages – relative to the surrounding text
- em and ex – relative to the parent element
- pixels – relative to the screen resolution
Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.
But what about earlier browsers?
SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.
You can find an overview of SVG in our previous post. In this section, you’ll learn about Basic Shapes, Path, Text, and Fonts.
One of the key features in using Cascading Style Sheets is that you set a style then override it. And you can override just part of the display or all of it. Knowing how a browser chooses and applies your styles is invaluable knowledge.
In the previous post, you learned how you could reset the browser settings. Those settings override the user agent to provide you with a consistent look to start from. The point is that you can override the styles.
Font embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. For browsers that font embedding, fonts can be temporarily installed on a user’s computer so that a Web page is displayed exactly as the you intend.
HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.
Use pattern matching rules to select elements in your HTML document when using CSS and jQuery. These pattern rules are , called selectors. They can be simple element names up through rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.
Every element in web design is a rectangular box. IN a previous post, Positioning & Inline, you learned about where the box is displayed. But that is only part of the story. The other part is about padding, border, and margin and how they affect where the box is displayed.
When you type in F12 in your favorite debugger, you will find tools that help you figure out the values in your style sheets for the size and location of the box.
But what happens when you do not declare your widths? What happens then?
This post relies on Chris Coyier’s excellent post The CSS Box Model.
I learned a lot from Learn CSS Positioning in Ten Steps. I owe him at least a beer. Check out his example that I have wholesale adopted.
- Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
- Floats. In the float model, which is how we did the aside, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
- Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
It is designed to separate content from formatting. This separation improves accessibility, provide more flexibility and control how your page looks, enables multiple pages to share the same formats, and reduce complexity and repetition in structural content.
CSS can allow the same page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice.