Skip to main content


Network A system of interconnected computers and computerized peripherals such as printers is called computer network. This interconnection among computers facilitates information sharing among them. Computers may connect to each other by either wired or wireless media. A computer network consists of a collection of computers, printers and other equipment that is connected together so that they can communicate with each other.  

Network application
A Network application is any application running on one host and provides a communication to another application running on a different host, the application may use an existing application layer protocols such as: HTTP(e.g. the Browser and web server), SMTP(e.g. the email-client). And may be the application does not use any existing protocols and depends on the socket programming to communicate to another application. So the web application is a type of the network applications. 
There are lots of advantages from build up a network, but the th…

Understanding CSS Essentials: Content Flow, Positioning, and Styling

Understanding CSS Essentials
The Ultimate Guide to CSS + Cheat Sheets 📑 - Level Up! - Medium
CSS is a crucial tool for achievement of much of the appearance and even behavior of modern mobile applications as well as Web sites. To build the “front end” of an app or Web site, and especially to keep its appearance correct and “fresh” as functional changes are made to the app or Web site during its life-time, you need to understand CSS well and how CSS co-operates with other tools including HTML and JavaScript. You’ll also be in a far better position to estimate the effort required for particular projects when you fully digest concepts of user interface “style” as CSS uses them.

Think of Trusty Lawn Care’s Web site. Near the top are the words “Trusty Lawn Care”: that’s a title or heading. The detailed appearance of that heading might show individual letters in italics, bold, or even color; the letters will have a particular size, and be chosen from a s pecific font; and a wealth of more subtle special effects is also within the reach of advanced Web developers. All these elements of presentation, as opposed to content, are part of the style of the Web site. Cascading Style Sheets (CSS) is a language that defines style of HTML elements. 

What does “cascading” mean here? One of the original principles of HTML is that the appearance of an element is controlled not only by CSS but also by the way the end user configures his or her browser or desktop. A vision-impaired end user can, for example, request that content be displayed in a particularly large font size. In HTML theory, definition of appearance cascades between these different style sheets


It’s common for Web designers to call the file that holds CSS rules a style sheet or “the CSS.” Some style coders and many programmers say “CSS source” or “CSS file” to refer to the same.

As you learned in previous lessons, HTML’s responsibility is to structure content; CSS’s responsibility is to format that content. CSS3 is the version of CSS that corresponds to HTML5, and most modern Web browsers support CSS3. The exciting basis of this book is that modern tools leverage the same standards to construct mobile applications: HTML, CSS, and JavaScript let you build apps, too. 

The good thing about CSS3 is that it’s backward compatible with previous versions of CSS, so you can start using CSS3 with your existing Web pages without having to change anything. CSS3 generally adds features and functionality rather than changing how CSS has always been used. 

Some of the significant additions to CSS3 are selectors, the box model, 2D and 3D transformations, animations, and multiple column layout. CSS3 also lets you create rounded borders, add shadows to boxes and text, use multiple images in a background, and use any font you like, whether it’s on the user’s computer or not. 

These topics are covered in this lesson or Lessons 5 and 6 of this book. Much like HTML5, CSS3 is still under development at the time of this writing. However, because most browsers already support CSS3, many developers are already incorporating CSS3 into their Web sites and applications.

Using the Appropriate Tools

You can create CSS files entirely from a simple text editor like Notepad. However, many HTML editors and application development tools provide a debugging feature that helps you quickly find errors in your markup and code. These tools also usually include a button to open a Web browser rather than having to do so manually. 

As you begin to work with CSS, decide which editing tools you need: you can work with markup and source code using anything from the Notepad program built into Windows to an Integrated Development Environment (IDE) specific to a particular mobile environment. Just like when working with HTML, at any one time, you’ll have at least two applications open: • An editor (open to a CSS source and an HTML document), which might be Notepad, Microsoft Visual Studio, Microsoft Expression Blend, Expression Studio, notepad++ for Windows or text-wrangler for Mac OS, Microsoft Web Matrix, or a number of other tools. • A Web browser, such as Internet Explorer 9, Firefox, etc.

You can use whatever you’re comfortable with, but Notepad has its limitations and wasn’t designed as a full-featured editor. Many HTML editors and application development tools include time-saving features like debugging, line numbers, and a button to open a Web browser.

Exploring the Link Between HTML and CSS

The <link> element links an HTML file to a CSS file. This section briefly covers fundamental CSS styling and how HTML and CSS files are linked.

When you create an HTML page and want to pull styles from a CSS file, you must include a <link> element to the CSS file in the HTML page. (You can reference more than one CSS file in an HTML page.) An example of correct syntax for a <link> is as follows: <link href = "filename.css" rel = "stylesheet" type = "text/css"> An HTML file might have a name like myproject.html or file1.htm; a typical CSS filename is myproject.css. Their contents also look quite different: HTML source is organized around tags, while, as you’ll see below, CSS is a sequence of rules. Commercial organizations often enforce specific filesystems. You might, for example, develop a CSS source that fulfills specific requirements. During your development, you refer to your work as ... href = "mytheme.css" ... The larger team might not even make explicit, though, its assumption that it expects a reference such as ... href = "styles/ mytheme.css" ... It’s important to recognize that if you misspell the CSS file name, or “stylesheet,” or “text/css” within the HTML page markup, the resulting Web page doesn’t apply any of the styles in the CSS file. The HTML page treats the link to the CSS as simply missing. The default behavior for all leading Web browsers is not to complain or warn about the misspelling.


There are a number of ways to style an HTML page with CSS styles. Here is a basic way to start: 1. Use a text editor or app development tool to create a file in your home directory called e1.html with the following content: <!doctype html> <html>  <head>    <title>Trusty Lawn Care, Inc.</title> <link href = "e1.css" rel = "stylesheet" type = "text/css">  </head> <body>  <h1>Trusty Lawn Care, Inc.</h1>  <p id = "slogan">We keep you in green.</p>   <p>Trusty Lawn Care can keep your lawn looking lush and vigorous all season. We use only natural fertilizers, mulches, and soils to boost the health of your turf.</p> </body> </html>

2. Create a second file, in the same folder as the .html source; name it as e1.css and use the following content:
#slogan {  font-size: 20px;  color: green;  font-style: italic; } 3. Open the e1.html file in a Web browser. The page should look like Figure 4-1.
In this example, the HTML file (e1.html) defines content and structure: it has the words “Trusty Lawn Care, Inc.”, it identifies five words as part of a slogan, and so on. The CSS file (e1.css) provides style to that content. To make certain characters green, the CSS file doesn’t use green paint or green light, but instead the word “green” to communicate to the browser how to color the slogan. The files are linked together using the <link> element in the HTML file. 

NOTE you can specify color using a name or a hexadecimal value. For example, to use the standard blue color, the color name is “blue” and the hexadecimal value is #0000FF. You can see a list of color names and their values at css_colornames.asp.

Let’s try creating a Web page and CSS file and then modifying the CSS file to see how the changes affect the Web page. You’ll be able to understand for yourself how HTML and CSS work together to produce displays in your Web browser or mobile application.


To explore basic CSS styling, perform the following steps: 1. Create a Web page named e1.html and a CSS file named e1.css using the markup shown previously. 2. Point your Web browser to e1.html to display the rendered page. 3. Edit e1.css to make the slogan appear in a larger font, such as 25px. Change the color from green to #00CC00. Change its style from italic to bold. After you make each change, confirm that the corresponding display updates as you expect. You final Web page should look similar to Figure 4-2.

4. Close the HTML and CSS files. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

It’s essential that you are comfortable with CSS basics. If you find yourself struggling with the basics while working through the lessons and exercises, consider taking some CSS tutorials online such as those offered on the Web site.

Separating Content from Style

In HTML documents, it’s standard practice to maintain HTML files, which contain content, and simply reference a separate CSS file, which contains code for styling the content in the HTML files. This enables you to change styles in only one file (the CSS file) and see those style changes made throughout all associated HTML files automatically. When working on a small, standalone HTML file in which the styles probably won’t change, it’s acceptable to include CSS styling code within the HTML file itself.

You can create pages as “pure” HTML, that is, with a single HTML source file and no CSS file. HTML has the ability to specify italicization, color, and more. Simple Web sites sometimes don’t use CSS, or they use it in an inline syntax. 

NOTE Even something as simple as coloring a text block green can be done in several distinct ways. Manuals and references often switch between these different styles with little explanation. You might see any of “<div style = ‘color:green’ …” in HTML, or “div {color:green …” in CSS, or “<style …> div {color:green …</style>” in HTML, or possibly even more unusual combinations. The first is often called “in-line”, to underline that the CSS specification appears in the same HTML expressions which define structure and content. 

However, separating HTML and CSS into different files is itself a fundamental concept you need to understand. “Separation of content and style” is a phrase often repeated by those who work on Web sites and mobile apps. Content is managed as HTML and style as CSS. This division of labor often mirrors the organization of project teams: different people are responsible for content and style. The separation of HTML and CSS helps make it possible for two people to work simultaneously without interfering with each other. In addition, separation of content and presentation helps you conform more closely with HTML5, which is becoming the new standard for Web pages and applications.

NOTE This lesson shows correspondences between CSS and a Web page. Keep in mind that the Web page depends on a larger configuration, typically including at least an HTML file and a browser. 

Don’t think you can learn CSS in complete isolation from these other parts. A second correspondence is between CSS and the display of a particular mobile app built with that CSS. While your purpose in learning and working with CSS might be to develop apps, all the instruction of this chapter will be in terms of Web pages. The tools for mobile apps are changing rapidly, and aren’t as well standardized as the Internet Explorer (IE) Web browser. Therefore, all examples will be shown with Release 9 of IE. All you learn about CSS applies equally well for programming your apps.

Understanding Selectors and Declarations

Once these basics are comfortable for you, you are in a position to look more deeply at CSS source files. A CSS file typically contains a sequence of style specifications or rules and might include an initial @import rule. The order of the rules will be significant in later lessons.

Each individual rule has two primary parts: a selector and one or more declarations. The selector is usually the HTML element you want to style. The declaration is the style for a specific selector. A declaration has a property, which is a style attribute, and a value. The general syntax of a declaration consists of a property keyword followed by a colon and space, and then a value followed by a semi-colon terminator. A declaration is within curly brackets. These concepts are illustrated in Figure 4-3.

This example has two rules, one for “p” and one for #slogan. The first rule applies to all content within all paragraph tags (or type) <p> on the Web page. The second rule applies only to the unique HTML element with ID “slogan.” The selector part of a rule can be quite complicated; for now, think of selectors as one of the following three: • HTML tags, like <p> above. CSS rules also commonly select such tags as <h...>, <table>, <a>, and so on. • ID selectors, like #slogan above. For these, the symbol # is a prefix that determines that selection is by ID. • Class selectors, like the example that follows.

Notice that an ID should be unique within a particular HTML instance. Several elements may share a class, though. Class is an attribute a Web author uses to provide structure to a document beyond the meaning HTML builds in with elements such as paragraph, header, and so on. We might choose to label some content on a page “opinion” and other “fact.” These kinds of categories are conveniently implemented as classes, because CSS can manage content in terms of its class definitions. The following markup illustrates the use of a class. This is the content of an HTML file, named e2.html: <!doctype html> <html>  <head>    <title>A class example</title>    <link href = "e2.css" rel = "stylesheet"    type = "text/css">  </head> <body>  <h1>About States</h1>   <p class = "fact">Alaska is the largest U.S. state in area.</p>   <p class = "opinion">New Jersey deserves its nickname "Garden State."</p>   <p class = "fact">A single congressman represents Wyoming in the national House of Representatives.</p> </body> </html> This is the content of the associated CSS file, named e2.css: p {color: black;} /* The prefix for a class selector is a period: '.' */ .opinion {color: gray;} With these two files in place, opening e2.html produces a display that looks like Figure 4-4.

How do you remember the syntax for different selectors? Here’s a mnemonic that works for some: the prefix for a class is period—that’s because in school, a class fills up one period. The prefix for an ID is a ‘#’, sometimes called the “number sign.” A common ID is your Social Security number—number, ID. 

Be careful with IDs. You probably understand that they need to be unique within your HTML. They can also appear in JavaScript and CSS. Many teams find they have to take special pains to keep IDs unique across all these different forms of source. If there’s a slip—if someone introduces an ID that duplicates another already in use by a single page—it can be difficult to debug the subsequent errors. 

Understanding Fonts and Font Families

Typography has to do with the appearance of letters, numbers, and other characters. Typography is a large and involved subject, well beyond the scope of this lesson. It is important, though, to recognize some of its vocabulary.

A font is a set of characters of a particular size and style. Graphic artists often have strong beliefs about the readability and visual appeal of different fonts, and you might be asked to arrange a display or parts of a display in specific fonts, or in fonts with particular characteristics. Mono-space is often used for technical material such as formulas, numbers, codes, and so on. Serifs are the details at the ends of particular letters; look at the “d,” “p,” and “t” in this sentence for examples of serif characters. Sans serif fonts are simply type styles drawn without serifs, such as the Arial font. See examples in Figure 4-5.

The primary way to specify fonts in a CSS file is to use the font-family property. The font-family property can declare either a specific font, like Garamond or Arial, or a wider family that includes many different fonts, such as “serif.” Particularly when developing for mobile handsets, it’s safest to specify a broad family, like mono-space or sans-serif, because it is hard to predict which particular fonts will be available on a particular handset. For example, when you include font-family: mono-space in a CSS file, you tell the browser to choose characters where each letter occupies the same width on a line, whether the letter itself is as wide as “m” or as narrow as “i.” You aren’t specifying a specific mono-space font; you are specifying only the mono-space family.


To understand the basics of font control, perform the following steps: 1. Open the e1.html and e1.css files from the previous exercise in in your editing tool. Save them as e3.html and e3.css, respectively. 2. Change e1.css to e3.css in the link element in the e3.html file and then save the file. 3. Within e3.css, add a new rule for #slogan that declares font-family: mono-space: p {color: brown;} #slogan { font-family: mono-space;  font-size:20px; color: green; font-style: italic; } 4. Save the CSS file and then view the HTML file in your Web browser. The results are shown in Figure 4-6.5. In the CSS file, change the rule to font-family: sans-serif;. 6. Save the CSS file, and then view the HTML file in your Web browser. The results are shown in .7. Change the rule to font-family: Garamond;, save the CSS file, and then view the HTML file in your Web browser. The results are shown in Figure 4-8. 8. Close the e3.html and e3.css files. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

Prior to CSS3, developers had to use Web-safe fonts and/or fonts the developer knew was installed on a Web page visitor’s system. The list of Web-safe fonts is relatively short and doesn’t offer much variety. Using anything other than Web-safe fonts usually meant creating images for titles and headings, and using other workarounds. CSS3 provides the @font-face rule, which enables developers to use any font they choose. To do so, you first create a font-face rule by assigning a name to the font. The font must be located on your Web server, or you can include a URL to where the font is located if it’s on a different Web server. Here’s an example of a rule for a font named Euphemia that’s located on your own Web server : @font-face { 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.

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> elements, 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.

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 appearance. While they remain list items, with list item’s other usual attributes and behavior, 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 examples, 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.

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>

2. When you display this source in your browser, you see something like Figure 4-9.
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.
5. Close the e4.html file. Leave the editing tool and Web browser open if you’re
 continuing immediately to the next section.

Positioning Individual Elements

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. 

Positioning Individual Elements
The default positioning method for all elements is “static”, that is, immediately after the document’s previous element. To place any element in any other position, use CSS to change the default to either float or absolute.


Float positioning often is useful when a layout is in columns, at least in part. To float an element is to have it move as far as possible either to the right or left; text then “wraps” around the element. 

Simple columns are constructed by floating several different elements in turn. Suppose you need to produce four-column layout of textual content. Style each of the pieces of  content that should appear in successive columns as float positioned; each element “floats” to the side, but is kept separate from the ones before and after it. Note that in this kind of column, text which overruns the bottom of one column does not flow to the top of the next one.


To apply float positioning to multiple columns, perform the following steps: 
1. Create the file e5.html with the following contents: <!doctype html> <!-- This is e5.html. --> <html> <head> <title>Float positioning</title> <style type = 'text/css'> #col1 { float: left; width: 150px; background-color: lightskyblue; } #col2 { float: left; width: 120px; background-color: yellow; }
</style> </head> <body> <h1>Float positioning</h1> <p id = "col1">Lorem ipsum dolor sit amet,    consectetuer adipiscing elit. Integer pretium dui    sit amet felis. Integer sit amet diam. Phasellus    ultricesviverra velit.
<p id = "col2">Lorem ipsum dolor sit amet,    consectetuer  adipiscing elit. Integer pretium dui    sit amet felis. Integer sit amet diam. Phasellus    ultrices viverra velit. <p id = "col3">Lorem ipsum dolor sit amet,    consectetuer  adipiscing elit. Integer pretium dui    sit amet felis. Integer sit amet diam. Phasellus    ultrices viverra velit.
</body> </html>

This section and following section do not always present complete HTML and CSS markup; they instead show only crucial lines. This kind of abbreviation is common in reference materials and everyday communications among developers. You are expected to embed such a line in the larger source file in the correct position. This is the equivalent of a lesson in cleaning an automobile’s spark plugs, which assumes you already know how to start the engine, open the hood, hold a wrench, and so on.
The “Lorem ipsum” text is called filler or dummy text, commonly used in design circles. While it has the appearance of Latin, it in fact is not meaningful. It’s just standard text that looks like content in its sequence and frequency of characters. It’s easy to generate dummy text in Word, for example, by typing =lorem() into a blank document and  pressing the Enter key. 
2. Display e5.html, as shown in Figure 4-11. Note how content appears in columns, indicated by the background colors which appear behind the text.
3. In the browser, col1 and col2 appear as two fixed-width columns, and col3 fills up any remaining space. If you change the two CSS float attributes from left to right, how does the display appear? 4. Make the change. 5. Were you correct? Did display of the updated HTML source look as you expect? 6. Close the e5.html file. Leave the editing tool and Web browser open if you’re
 continuing immediately to the next section.


With absolute positioning, an element is removed from its position within the body of a document and placed at a geometric position in the display. “Geometric position” here means a location a definite distance from two sides of the display—the top and the right-hand sides, for example.


To apply absolute positioning to multiple columns, perform the following steps: 1. Create e6.html by opening e5.html saving a copy as e6.html. 2. Replace the comment at the top with: <!-- This is e6.html. --> Replace the content within the <head> tags with the following:
<title>Absolute positioning</title> <style type = 'text/css'> #col1 { position: absolute; bottom: 100px; right: 100px; background-color: lightskyblue; } #col2 { background-color: yellow; }
</style> 3. Within the body element, change the <h1> heading to: <h1>Absolute positioning</h1> 4. Display e6.html, as shown in Figure 4-12. In this example, the col2 (yellow  background) and col3 (no colored background) paragraphs appear “normal,” near the top of the display. Col1, however, ends at a position locked to the lower-left of the displaying window.
5. Resize the window and see how the three different paragraphs adjust. 6. Close the e6.html file. Leave the editing tool and Web browser open if you’re
 continuing immediately to the next section.
Absolute positioning generally hasn’t been used in Web work as much as float positioning. Mobile applications often have a display window of a known, definite, and relatively small size, though. For mobile applications, in contrast to the majority of Web applications, it is relatively common to use absolute positioning.

Managing Content Overflow

When you view letters and characters on a page, look at them as marks rather than letters. Each HTML element occupies a rectangle. The word “rectangle,” for example, isn’t particularly rectangular: the “t” and “l” stick out above, and “g” dangles below. For the purpose of HTML layout, though, “rectangle” fits within a small rectangle (or bounding box) that includes all the letters of the word along with their background, as shown in Figure 4-13. CSS styling is expressed in terms of this box.

In particular, CSS makes it possible to limit the width of an element. What happens if the element doesn’t fit in the space CSS defines for it? CSS’s overflow rule controls this.


When an element overflows its box, and its overflow is set to scroll, all the content of the e lement stays within the box; none of the overflow appears outside the box. This is referred to as scrolling overflow. Content has to stay inside the box, but it doesn’t fit; what can resolve such a conflict? Pretend that the box looks down into a larger area, and that the viewer can move around in this larger area by moving scrollbars. That is a way for the viewer to reach all the content. You can achieve this using the scroll value with the overflow property. Experience this for yourself with the following experiment. Use your editor to experiment with the powerful mechanism of scrolling.


To practice scrolling overflow, perform the following steps: 1. Create e7.html with the following contents: <!-- This is the content of e7.html. --> <!doctype html> <html> <head> <title>Scroll overflow</title> <style type = "text/css"> #col1 { width: 200px; height: 200px; background-color: lightskyblue; overflow: scroll; }#col3 { background-color: yellow; }
</style> </head> <body> <h1>Scroll overflow</h1>
<p  id = 'col1'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p> <p  id = 'col2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. </p> <p  id = 'col3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. </p> </body> </html> 2. This source renders as a display similar to Figure 4-
3. Experiment with the source to see how HTML renders under different circumstances. For example, what happens with a width of 400 px?4. How does the display look when you delete half of the text of col1 from e7.html? 5. Don’t save your changes to e7.html. Leave the Web browser open and the e7.html file open in your editing tool if you’re continuing immediately to the next section.


Visible overflow writes over the content that follows it. Hidden overflow makes overflow invisible. Think again of the situation the last section introduced: your display assigns a fixed area to a particular piece of content—but that content is so long that it doesn’t fit in its assigned space. The last section demonstrated how scrollbars give the user a chance to see all the  content without taking up additional display space. Two other tactics for this situation are to use the overflow property with the visible and hidden values, respectively. You’ll understand these alternatives best when you experiment for yourself with them and the  displays they produce.


To practice visible overflow and hidden overflow, perform the following steps: 1. Open the e7.html file from the previous exercise (if it’s not already open). 2. Change the overflow of e7.html from scroll to visible. 3. Save the file and view it in your Web browser, as shown in Figure 4-15.
4. Study the details of this display. Visible is the default value of overflow. With visible set, the elements of the HTML display are laid out in order—then any
 overflow simply overlays other elements. 5. Note that background-color does not apply to the overflow content: col1 has a light sky blue background, but the overflow text reverts to a default background. 6. Now change the overflow of e7.html from scroll to hidden.
7. Save the file and view it in your Web browser, as shown in Figure 4-16. With hidden overflow, the overflow simply becomes invisible.
8. Close the editing tool and the Web browser.

Hidden overflow keeps a design under control: it guarantees that overflow won’t “pollute” a nice design with pieces out of place. On the other hand, hidden can lead to surprises. If a vision-impaired end user, for instance, specifies a larger font than you expected, use of hidden overflow might make crucial elements of your design completely invisible and inaccessible; in the worst case, your end user might face a screen with no visible controls or ways to navigate back “home.”


Popular posts from this blog

What if Analysis

What-If Analysis What-If Analysis in Excel allows you to try out different values (scenarios) for formulas. The following example helps you master what-if analysis quickly and easily.  Use scenarios to consider many different variables  A scenario is a set of values that Excel saves and can substitute automatically in cells on a worksheet. You can create and save different groups of values on a worksheet and then switch to any of these new scenarios to view different results. 
Create Different Scenarios 
Note: You can simply type in a different revenue and Cost into cell B2 and B3 respectively to see the corresponding result of a scenario in cell B4. However, what-if analysis enables you to easily compare the results of different scenarios.  
I. On the Data tab, click What-If Analysis and select Scenario Manager from the list. The Scenario Manager Dialog box appears  II. Add a scenario by clicking on Add.  III. Type a name (e.g. “First Case”), select cell B2 and B3 (represents “Revenue” and “…


Asking For and Giving Opinions on Likes and Dislikes

Words Meaning Sample Sentence Opinion A statement or judgment formed about some matter. Bhoomika gave her final opinion on the company’s matter. Dialogue A conversation between two or more people. Her dialogue stated her opinion about the company’s matter. Expression The action of making known one’s thought or feelings. Her expression was sad at the meeting. Frank An open, honest, and direct speech or writing Bhoomika is very frank with her friends. Recover Return to normal state of health, mind or strength. The company’s economic crisis will be recovered soon. Turmoil A state of great disturbance. The company is facing financial turmoil. Economics The branch of knowledge concerned with the production, consumption, and transfer of wealth. Bhoomika studied Economics at the State University. Betrayed Expose to danger by treacherously giving information to an enemy.


Apology Etiquette and Office Vocabulary 

Chapter Vocabulary

Word Meaning Sample Sentence Stressed A state of any mental or emotional tension. Ram seems much stressed after his poor exam. Launch An act of instance of starting something. The government launched a new scheme for the poor people. Error A mistake Ravi found a grammatical error in his new grammar book. Scold Blaming someone for any wrong doing Bhuvan scolded his employees for their poor performance. Accuse Claiming that someone has done something wrong. Bharati accuses her friend Chaya for stealing her necklace. Fair Good and honest Ravi got promoted for doing a fair job. Ashamed Embarrassed or guilty because of one’s action. <