font-family: TrustyHomePage;
src: url('Euphemia.ttf'), }
Just like with images, you (or a client you work for) must own a legal copy of the font to use it in any Web pages you create.
✚
MORE INFORMATIONTo learn more about CSS style essentials, visit the Microsoft’s Web page on Cascading Style Sheets at http://bit.ly/IKmcZd. You can also take free CSS tutorials on the W3schools.com Web site at
http://www.w3schools.com/css/default.asp.
You can manage the flow of content in an HTML document using inline flow and block flow properties in CSS.
Managing Content Flow
“Flow” or display style is a fundamental HTML concept. It has to do with filling horizontal lines from left to right across the display, and separation of lines from top to bottom as one moves down the display.
Consider these two alternatives for display of a visual element:
• Inline flow: Fills only as much width as required
• Block flow: Fills as much width as is available
Control of the geometry of your user interface, and particularly the horizontal extent of the display, is important. It is correspondingly important to understand flow. A few examples will help.
Inline flow “fits.” It forces no new lines before or after the inlined element, but simply places the element between the content before and after the inlined element.
Look at this paragraph:
This is a paragraph in which a word appears in bold and another word is italicized.
In a typical HTML coding, the words “bold” and “italicized” appear as <b> and <i> ele-ments, respectively. These elements are inline: they occupy only as much space in the lines of text as necessary, and they are not forced to new lines.
In block flow, in contrast to inline flow, an element is separated from other elements by new lines above and below, and fills from left to right the horizontal extent where it appears.
CERTIFICATION READY How do Web sites manage content flow?
3.1
CERTIFICATION READY What is the difference between inline flow and block flow?
3 .1
The paragraph you’re reading now is itself a block-flow element: above it and below it are new lines, and the paragraph fills its extent from left to right.
Display flow is under your control. List items, for example, default to block flow.
With CSS, though, you can “inline” them to achieve a different and distinctive appear-ance. While they remain list items, with list item’s other usual attributes and behav-ior, a change in display style allows them to appear one after the other in a horizontal sequence, left to right.
Warm up your editor. It’s time to try out a few small segments of CSS for yourself.
The beginning of this lesson went to pains to explain how HTML and CSS files work together as a team to achieve design effects. For the next example and subsequent exam-ples, though, the CSS styling is collapsed into the HTML source file. HTML recognizes the <style> element, which makes this possible. When learning CSS attributes, it is generally much, much more convenient to work within a single source file, so all except the simplest sections of the lesson are implemented within a single HTML source. Keep in mind that most commercial work will be structured in terms of separate HTML and CSS sources.
TAKE NOTE
*
EXPLORE INLINE FLOW AND BLOCK FLOW
GET READY. To explore inline flow and block flow, perform the following steps:
1. Create the file e4.html with the following contents:
<!doctype html>
<!-- This is the content of the file e4.html.-->
<html>
<head>
<title>Block and inline flow</title>
<link href = "e4.css" rel = "stylesheet"
type = "text/css">
<style type = 'text/css'>
.toolbar li { }
</style>
</head>
<body>
<h1>Block and inline flow</h1>
<p>Here are choices you can make:</p>
<ul class = "toolbar">
<li>Automobile</li>
<li>Bicycle</li>
<li>Scooter</li>
<li>Taxi</li>
<li>Walk</li>
</ul>
</body>
</html>
3. Update the source of e4.html so that the <style> segment looks like
<style type = "text/css">
.toolbar li { display:inline;
background-color: #EEE;
border: 1px solid;
border-color: #F3F3F3 #BBB #BBB #F3F3F3;
margin: 2px;
padding: .5em;
}
</style>
4. Save the file and refresh your browser. The list display updates, as shown in Figure 4-10.
Notice how this example illustrates that control of flow is useful for visual effects.
Figure 4-10
Appearance of list elements re-styled with inline flow
✚
MORE INFORMATIONTo learn more about the CSS display property and managing content flow, visit the W3schools.com CSS display Property Web page at http://www.w3schools.com/cssref/pr_class_display.asp.
Figure 4-9
Default appearance of list elements
5. Close the e4.html file. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.
2. When you display this source in your browser, you see something like Figure 4-9.
HTML and CSS support a number of ways to specify where individual HTML elements appear within a display. The two most important for our purposes are float positioning and absolute positioning.