The :first-letter pseudo-element may be used for "initial
caps" and "drop caps", which are common typographical effects. This type
of initial letter is similar to an inline-level element if its 'float'
property is 'none', otherwise it is similar to a floated element. These
are the properties that apply to :first-letter pseudo-elements: font
properties, color properties, background properties, 'text-decoration',
'vertical-align' (only if 'float' is 'none'), 'text-transform',
'line-height', margin properties, padding properties, border properties,
'float', 'text-shadow', and 'clear'. The following CSS2 will make a drop
cap initial letter span two lines:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
Here is the answer:
- It allows you to customize or create your own tag.
- It helps to separate the web content and its appearance (web presentation style, layout, fonts, colors, backgrounds).
- By consolidating the specification of presentation style,
- improve the readability on individual web page
- shorten the length of the main web page (smaller storage space and faster download too) e.g., home.html is 19074 bytes while homeCSS.html + present.css is 11256+802=12058 bytes.
- allow the change of look and feel of many web pages in just one file.
| 1. protocol. | YesNo |
| 2. domain name. | YesNo |
| 3. port no. | YesNo |
| 4. uri | YesNo |
| 1. domain name of the browser. | YesNo |
| 2. IP address of the browser. | YesNo |
| 3. domain name of the server. | YesNo |
| 4. IP address of the server. | YesNo |
| 1. browser sends DNS query. | YesNo |
| 2. browser sends HTTP request to server. | YesNo |
| 3. server sends DNS query. | YesNo |
| 4. server sends HTTP request to browser. | YesNo |
| 1. IP address. | YesNo |
| 2. url. | YesNo |
| 3. uri. | YesNo |
| 4. part of pathname for the web document | YesNo |
| 1. alpha header. | YesNo |
| 2. beta header. | YesNo |
| 3. meta header. | YesNo |
| 4. Server version #. | YesNo |
| 5. Browser version #. | YesNo |
| 6. MIME-type of the return document. | YesNo |
| 7. length of the return web document. | YesNo |
| 8. a GIFimage. | YesNo |
| 9. a sound file. | YesNo |
| 1. Cache and share the documents in a cache server | YesNo |
| 2. Increase the network bandwidth between client and server | YesNo |
| YesNo | |
| 4. Verify the user input using Javascript before sending back to the web server. | YesNo |
| 5. Increase the processing power of the client machine. | YesNo |