Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Chapter 1. Basic Visual Formatting This book is all about the theoretical side of visual rendering in CSS. Why is it necessary to spend an entire book (however slim) on the theoretical underpinnings of visual rendering? The answer is that with a model as open and powerful as that contained within CSS, no book could hope to cover every possible way of combining properties and effects. You will obviously go on to discover new ways of using CSS. In the course of exploring CSS, you may encounter seemingly strange behaviors in user agents. With a thorough grasp of how the visual rendering model works in CSS, you’ll be able to determine whether a behavior is a correct (if unexpected) consequence of the rendering engine CSS defines, or whether you’ve stumbled across a bug that needs to be reported. Basic Boxes At its core, CSS assumes that every element generates one or more rectangular boxes, called element boxes. (Future versions of the specification may allow for nonrectangular boxes, and
Chapter 1. Basic Visual Formatting
Chapter 2. Colors and Backgrounds Remember the first time you changed the colors of a web page? Instead of the default black text on a white background with blue links, all of a sudden you could use any combination of colors you desired—perhaps light blue text on a black background with lime green hyperlinks. From there, it was just a short hop to colored text and, eventually, even to multiple colors for the text in a page. Once you could add background images, too, just about anything became possible, or so it seemed. Cascading Style Sheets (CSS) takes color and backgrounds even further, letting you apply many different colors and backgrounds to a single page or element, and even apply multiple backgrounds to the same element. Colors When you’re designing a page, you need to plan it out before you start. That’s generally true in any case, but with colors, it’s even more so. If you’re going to make all hyperlinks yellow, will that clash with the background color in any part of your doc
Chapter 2. Colors and Backgrounds
Chapter 3. Floating and Shapes For a very long time, floated elements were the basis of all our web layout schemes. (This is largely because of the property clear, which we’ll get to in a bit.) But floats were never meant for layout; their use as a layout tool was a hack nearly as egregious as the use of tables for layout. They were just what we had. Floats are quite interesting and useful in their own right, however, especially given the recent addition of float shaping, which allows the creation of nonrectangular shapes past which content can flow. Floating You are almost certainly acquainted with the concept of floated elements. Ever since Netscape 1.1, it has been possible to float images by declaring, for instance, <img src="b5.gif" align="right">. This causes an image to float to the right and allows other content (such as text) to “flow around” the image. The name “floating,” in fact, comes from the Netscape DevEdge page “Extensions to HTML 2.0,” which stated: The additions to y
Chapter 3. Floating and Shapes
Chapter 4. Grid Layout For as long as CSS has existed—which is, believe it or not, two decades now—it’s had a layout-shaped hole at its center. We’ve bent other features to the purposes of layout, most notably float and clear, and generally hacked our way around that hole. Flexbox layout helped to fill it, but flexbox is really meant for only specific use cases, like navigation bars (navbars). Grid layout, by contrast, is a generalized layout system. With its emphasis on rows and columns, it might at first feel like a return to table layout—and in certain ways that’s not too far off—but there is far, far more to grid layout than table layout. Grid allows pieces of the design to be laid out independently of their document source order, and even overlap pieces of the layout, if that’s your wish. There are powerfully flexible methods for defining repeating patterns of grid lines, attaching elements to those grid lines, and more. You can nest grids inside grids, or for that matter, attach
Chapter 4. Grid Layout
Chapter 5. Padding, Borders, Outlines, and Margins Way back in the 1990s, pretty much all web pages were designed using tables for layout. There were a lot of reasons for this, but one of the most common was the desire to put a box around a bit of text, like a callout. Of course, this was a ridiculously complicated way to put a border around a paragraph or sidebar. Shouldn’t it be easier than that? The authors of CSS felt it should, indeed, be easier, so they devoted a great deal of attention to allowing you to define borders for paragraphs, headings, divs, anchors, images—darned near everything a web page can contain. These borders can set an element apart from others, accentuate its appearance, mark certain kinds of data as having been changed, or any number of other things. CSS also lets you define regions around an element that control how the border is placed in relation to the content and how close other elements can get to that border. Between the content of an element and its b
Chapter 5. Padding, Borders, Outlines, and Margins
Chapter 6. Positioning The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily be—or position them in relation to a parent element, another element, or even to the viewport (e.g., the browser window) itself. Basic Concepts Before we delve into the various kinds of positioning, it’s a good idea to look at what types exist and how they differ. We’ll also need to define some basic ideas that are fundamental to understanding how positioning works. Types of Positioning You can choose one of five different types of positioning, which affect how the element’s box is generated, by using the position property. position Values: static | relative | sticky | absolute | fixed | inherit Initial value: static Applies to: All elements Inherited: No Computed value: As specified The values of position have the following meanings: static The element’s box is generated as normal. Block-level elements generate a r
Chapter 6. Positioning
Chapter 7. Table Layout in CSS You may have glanced at that title and wondered, “Table layout? Isn’t that exactly what we’re trying to avoid doing?” Indeed so, but this chapter is not about using tables for layout. Instead, it’s about the ways that tables themselves are laid out by CSS, which is a far more complicated affair than it might first appear. Tables are unusual, compared to the rest of document layout. Until flexbox and grid came along, tables alone possessed the unique ability to associate element sizes with other elements—for example, all the cells in a row have the same height, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. Cells that adjoin can share a border, even if the two cells have very different border styles. As we’ll see, these abilities are purchased at the expense of a great many behaviors and rules—many of them rooted deep in the past—that apply to tables, and only table
Chapter 7. Table Layout in CSS
Chapter 8. Transforms Ever since the inception of Cascading Style Sheets (CSS), elements have been rectangular and firmly oriented on the horizontal and vertical axes. A number of tricks arose to make elements look like they were tilted and so on, but underneath it all was a rigid grid. In the late 2000s, an interest grew in being able to break the shackles of that grid and transform objects in interesting ways—and not just in two dimensions. If you’ve ever positioned an object, whether relatively or absolutely, then you’ve already transformed that object. For that matter, any time you used floats or negative-margin tricks (or both), you transformed an object. All of those are examples of translation, or the movement of an element from where it would normally appear to some other place. With CSS transforms, you have a new way to translate elements, and a whole lot more. Whether it’s as simple as rotating some photographs a bit to make them appear more natural, or creating interfaces wh
Chapter 8. Transforms
Chapter 9. CSS Transitions and Animations CSS transforms, CSS transitions, and CSS animations are three separate CSS specifications. While the three terms sound like they may do the same thing—make something move—CSS transitions and animations make things move over time. Transitions and animations let you define the transition between two or more states of an element. Transforms change an element’s appearance through translation, rotation, scaling, and skewing, but do not have a time component. You can use the CSS transform property to change the location of an element’s coordinate space of the CSS visual formatting model, but you need transitions or animation to make that change occur over time. The transform property is covered in Transforms in CSS (O’Reilly). While animation is possible with JavaScript, understanding CSS3 transitions and animations will save you a lot of time and effort if you need to animate anything on the Web. Generally, it will also save your users’ CPU and batt
Chapter 9. CSS Transitions and Animations
Chapter 10. Transitions CSS transitions allow us to animate CSS properties from an original value to a new value over time when a property value changes. Normally, when a CSS property value changes—when a “style change event” occurs—the change is instantaneous. The new property value replaces the old property in the milliseconds it takes to repaint (or reflow and repaint if necessary) the affected content. Most value changes seem instantaneous, taking less than 16 ms1 to render. Even if the changes takes longer, it is a single step from one value to the next. For example, when changing a background color on hover, the background changes from one color to the next, with no gradual transition. CSS transitions enable us to smoothly animate CSS properties from an original value to a new value over time as the style recomputation proceeds: button { color: magenta; transition: color 200ms ease-in 50ms; } button:hover { color: rebeccapurple; transition: color 200ms ease-out 50ms; } Transition
Chapter 10. Transitions
Chapter 11. Animation CSS transitions, covered in the previous chapter, enabled simple animations. With transitions, an element’s properties change from the values set in one style block to the values set in a different style block as the element changes state over time instead of instantly. With CSS transitions, the start and end states of property values are controlled by existing property values and provide little control over how the property value interpolation progresses over time. CSS animations are similar to transitions in that values of CSS properties change over time. But transitions only let us animate from an initial value to a destination value and back again. CSS keyframe animations let us decide if and how an animation repeats and give us granular control over what happens throughout the animation. CSS animation lets us animate the values of CSS properties over time using keyframes. Similar to transitions, animation provides us with control over the delay and duration.
Chapter 11. Animation
Chapter 12. CSS and Documents Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it has spread to nearly every corner of the web as well as into many ostensibly non-web environments. For example, Gecko-based browsers use CSS to affect the presentation of the browser chrome itself, many RSS clients let you apply CSS to feeds and feed entries, and some instant message clients use CSS to format chat windows. Aspects of CSS can be found in the syntax used by JavaScript frameworks like jQuery. It’s everywhere! A Brief History of (Web) Style CSS was first proposed in 1994, just as the Web was beginning to really catch on. At the time, browsers gave all sorts of styling power to the user—the presentation preferences in Mosaic, for example, permitted all manner of font family, size, and color to be defined by the user on a per-element basis. None of this was available to document authors; all they could do was mark a
Chapter 12. CSS and Documents
Chapter 13. Fonts As the authors of CSS clearly recognized from the outset, font selection is a popular, indeed crucial, feature of web design. In fact, the beginning of the “Font Properties” section of the CSS1 specification begins with the sentence, “Setting font properties will be among the most common uses of style sheets.” The intervening years have done nothing to disprove this assertion. CSS2 added the ability to specify custom fonts for download with @font-face, but it wasn’t until about 2009 that this capability really began to be widely and consistently supported. Now, websites can call on any font they have the right to use, aided by online services such as Typekit. Generally speaking, if you can get access to a font, you can use it in your design. It’s important to remember, however, that this does not grant absolute control over fonts. If the font you’re using fails to download or is in a file format the user’s browser doesn’t understand, then the text will be displayed wi
Chapter 13. Fonts
Chapter 14. Text Properties Sure, a lot of web design involves picking the right colors and getting the coolest look for your pages, but when it comes right down to it, you probably spend more of your time worrying about where text will go and how it will look. Such concerns gave rise to HTML tags such as <FONT> and <CENTER>, which allow you some measure of control over the appearance and placement of text. Because text is so important, there are many CSS properties that affect it in one way or another. What is the difference between text and fonts? Simply, text is the content, and fonts are used to display that content. Using text properties, you can affect the position of text in relation to the rest of the line, superscript it, underline it, and change the capitalization. You can even simulate, to a limited degree, the use of a typewriter’s Tab key. Indentation and Horizontal Alignment Let’s start with a discussion of how you can affect the horizontal positioning of text within a li
Chapter 14. Text Properties
Chapter 15. Selectors One of the primary advantages of CSS—particularly to designers—is its ability to easily apply a set of styles to all elements of the same type. Unimpressed? Consider this: by editing a single line of CSS, you can change the colors of all your headings. Don’t like the blue you’re using? Change that one line of code, and they can all be purple, yellow, maroon, or any other color you desire. That lets you, the designer, focus on design, rather than grunt work. The next time you’re in a meeting and someone wants to see headings with a different shade of green, just edit your style and hit Reload. Voilà! The results are accomplished in seconds and there for everyone to see. Of course, CSS can’t solve all your problems—you can’t use it to change the colorspace of your PNGs, for example, at least not yet—but it can make some global changes much easier. So let’s begin with selectors and structure. Basic Style Rules As stated, a central feature of CSS is its ability to app
Chapter 15. Selectors
Chapter 16. Specificity and the Cascade Chapter 15 showed how document structure and CSS selectors allow you to apply a wide variety of styles to elements. Knowing that every valid document generates a structural tree, you can create selectors that target elements based on their ancestors, attributes, sibling elements, and more. The structural tree is what allows selectors to function and is also central to a similarly crucial aspect of CSS: inheritance. Inheritance is the mechanism by which some property values are passed on from an element to its descendants. When determining which values should apply to an element, a user agent must consider not only inheritance but also the specificity of the declarations, as well as the origin of the declarations themselves. This process of consideration is what’s known as the cascade. We will explore the interrelation between these three mechanisms—specificity, inheritance, and the cascade—in this chapter, but the difference between the latter tw
Chapter 16. Specificity and the Cascade
Chapter 17. Values, Units, and Colors In this chapter, we’ll tackle features that are the basis for almost everything you can do with CSS: the units that affect the colors, distances, and sizes of a whole host of properties, as well as the units that help to define those values. Without units, you couldn’t declare that an image should have 10 pixels of blank space around it, or that a heading’s text should be a certain size. By understanding the concepts put forth here, you’ll be able to learn and use the rest of CSS much more quickly. Keywords, Strings, and Other Text Values Of course, everything in a style sheet is text, but there are certain value types that directly represent strings of text as opposed to, say, numbers or colors. Included in this category are URLs and, interestingly enough, images. Keywords For those times when a value needs to be described with a word of some kind, there are keywords. A very common example is the keyword none, which is distinct from 0 (zero). Thus
Chapter 17. Values, Units, and Colors
← Prev
Back
Next →
← Prev
Back
Next →