Part I: The ABCs of CSS in Java

Generator QR Code 2d barcode in Java Part I: The ABCs of CSS

The final variation on the attribute selector technique requires an exact match to the attribute value This selector boldfaces only cars with 2999 as their onSale attribute s value:

car[onSale= 2999 ] {font-weight: bold;}

This causes the text of the second (but not the first or third) elements in the following HTML to be boldfaced:

You ve experimented with small examples defining a single selector and then trying it out on an element or two in HTML code Now it s time to try a somewhat larger example to get a more accurate idea of the power of CSS In this example, you create an HTML page, and then modify it via a CSS file Finally, you apply two CSS files to the HTML, to see cascading, and specificity, in action An easy way to generate an HTML page to practice with is to write a few paragraphs (or just copy and paste them) into Word and then have Word translate them into an HTML document To see how this works, follow these steps: 1 Run Word 2003 2 Type three or four paragraphs 3 Make one paragraph italic 4 Type a few words on a line by themselves, and then press Enter 5 Drag your mouse across this text to select it 6 Choose Format Styles and Formatting 7 Double-click Heading 1 in the list of styles The headline style Heading 1 is applied to the selected text 8 Create a couple of second-level headlines by repeating steps 4 through 7, but instead of choosing the Heading 1 style in step 7, choose Heading 2 Your results should look something like Figure 3-2

TEAM LinG - Live, Informative, Non-cost and Genuine !

Figure 3-2: This document has several headlines and paragraphs of body text How do you suppose it looks marked up with HTML code

Now you should have a simple Word document with a few paragraphs one of which is italicized You also have a couple of first-level heads and a couple of second-level heads You now want to save this file as MyFirsthtm Follow these steps to create an HTML file out of this document: 1 Choose File Save as Web Page A Save dialog box appears, asking if you want to save this as an mht (single file) Web page This format is a specialized Microsoft format that includes lots of extra information about the document so it can be edited using all the power of Word You don t need all that You just want a simple HTML document generated here 2 In the Save As Type list box at the bottom of the dialog box, click the down arrow to see the list of file type options and choose Web Page (*htm, *html) Name this file MyFirsthtm You ve now created an HTML document named MyFirsthtm that can be displayed in a browser You may also notice that the text looks smaller when the dialog box closes and you re returned to Word s document view

TEAM LinG - Live, Informative, Non-cost and Genuine !

3 Choose View and notice that Web Layout is now the active view instead of the previous Normal view Now take a look at your new Web page in Internet Explorer by doubleclicking MyFirsthtm file in Windows Explorer Your page appears, but it s no longer a doc file It s now an HTML file that a browser can read, understand, and display, as shown in Figure 3-3 Now you re ready to take a look at the HTML code behind this page Choose View HTML Source in Word A special Microsoft Script Editor opens, displaying your HTML in all its glory Even though this is the pure HTML version of this page ( pure compared to the mht version you rejected in step 1 in the previous step list) it s still pretty hefty! Examine the HTML that Word generated, as illustrated in Figure 3-4: As you peruse the HTML code, you may notice comments (which Microsoft uses to force the browser to ignore proprietary stuff, even some script code in some cases) You also see lots of references to mso, which stands for Microsoft Office, and many items in XML format defining properties of the document and other data Ignore all this Or if you wish, peruse it for a while, but don t get hypnotized because what we re looking for is further down the page