Join Morten Rand-Hendriksen for an in-depth discussion in this video Displaying information through the web, part of Making Sense of the CSS Box Model.
- View Offline
A simple document looks like a printed document, but is in reality just light and dark pixels on a screen. An image looks like a photo, but is in reality just projected hues, saturation and lightness generated by the computer when and if we tell it to do so. The items themselves don't really exist. Instead what we're presented with are temporary manifestations, or reproductions really, of the items in the context of the screen. And these manifestations are generated by the web browser.
If we establish as a baseline that the web is a tool to communicate information from the publisher to the visitor and vice versa, and we combine this with the knowledge that the web browser creates temporary manifestations of this information in whatever form the visitor requests, we can identity the job of the web designer and developer as being responsible for providing the browser with the necessary instructions to present the content in the most accessible way for the visitor. This could mean many things. Providing proper accessible markup to allow the visitor to choose how they want to consume the information, providing responsive designs to present the content in the best possible way across all screens, creating informational user experiences that are easily understood by the visitor.
The list goes on. To meet these goals it's vital to understand how the browser sees the content and know how to instruct the browser to display the content in the best possible way for humans. After all, the browser has no comprehension of the information. It just sees markup and parses it to be displayed on a screen based on pre-configured algorithms. Start printing out text from the top left hand corner in the default font. Display images inline. Use the available space.
By understanding how the browser sees the content and how to instruct the browser to display the content in the best possible way, we can change the presentation of that content into anything we want. On the web content and the presentation of that content are separated between HTML and CSS, meaning we have an almost unlimited canvas to work with. And it all starts with the simple realization that the web is made of boxes.
He covers techniques such as styling text and images, floating content, using display properties, and positioning elements. He'll also show you how to take your website beyond boxes with advanced CSS tools and techniques. Each lesson is supported by real-world demonstrations of the concepts in action, and Morten closes with a "nightcap" that will get you thinking about going further with CSS.