A HTML Object From Multiple Elements Some HTML objects are created by combining various tags. That's the case for lists and tables. In this case, you can create a style for the most parent of the object. Here are examples for tables and lists: <html> <head> <title>Chemistry</title> <style> table { font-size: 12pt; color: Red; font-family: Comic Sans Serif } ul { color: Green; font-family: Tahoma; font-size: 1.04em; } dl { color: Purple; font-family: Tahoma; font-size: 0.45cm; } </style> <head> <body> <h2>Chemistry</h2> <p>In chemistry, the periodic table is used to organize the chemical elements. Based on the atomic numbers, the first 3 elements are:</p> <ul> <li>Hydrogen</li> <li>Helium</li> <li>Lithium</li> </ul> <p>Based on their properties, these 3 elements can be presented as follows:</p> <table border=5> <tr> <td>Atomic Number</td> <td>Element</td> <td>Symbol</td> <td>Atomic Mass</td> </tr> <tr> <td>1</td> <td>Hydrogen</td> <td>H</td> <td>1.0079</td> </tr> <tr> <td>2</td> <td>Helium</td> <td>He</td> <td>4.002682</td> </tr> <tr> <td>3</td> <td>Lithium</td> <td>Li</td> <td>6.941</td> </tr> </table> <p>The properties of carbon, nitrogen, oxygen, fluorine, and chlorine can be presented as follows:</p> <table border=5> <thead> <tr> <th>Atomic Number</th> <th>Element</th> <th>Symbol</th> <th>Atomic Mass</th> </tr> <thead> <tr> <td>6</td> <td>Carbon</td> <td>C</td> <td>12.011</td> </tr> <tr> <td>7</td> <td>Niotrogen</td> <td>N</td> <td>14.007</td> </tr> <tr> <td>8</td> <td>Oxygen</td> <td>O</td> <td>15.999</td> </tr> <tr> <td>9</td> <td>Fluorine</td> <td>F</td> <td>18.998</td> </tr> <tr> <td>17</td> <td>Chloride</td> <td>Cl</td> <td>35.45</td> </tr> </table> <p>Combining hydrogen and carbon results in many types of organic compounds. Examples of hydro-carbon (or hydrocarbon) bonds are:</p> <dl> <dt>Methyl: This is a family of bonds created from methane. Variants are:</dt> <dd>Methylium Cation</dd> <dd>Methanide Anion</dd> <dt>Ethyl: This is a family of products created from ethane</dt> <dt>Vinyl: This results from removing a hydrogen atom from the compound. Furthermore, other chemical products can be added to get such items as:</dt> <dd>Vinyl Chloride</dd> <dd>Vinyl Fluoride</dd> <dd>Vinyl Acetate</dd> <dt>Phenyl</dt> </dl> </body> </html> This would produce: Notice that the style of the parent applies to all chidren of the object. As an alternative, you can create a style for different child elements of the object. Here are examples: <html> <head> <title>Chemistry</title> <style> dt { color: Olive; font-size: 0.45cm; font-family: Verdana; } table { font-size: 12pt; color: Red; font-family: Comic Sans Serif } li { color: Green; font-family: Tahoma; font-size: 1.04em; } td { color: Blue; font-size: 1.20em; font-family: Times New Roman } ul { color: Green; font-family: Tahoma; font-size: 1.04em; } th { font-size: 14pt; color: Magenta; font-family: Bodoni } dd { color: Maroon; font-size: 0.50cm; font-family: Georgia; } dl { color: Purple; font-family: Tahoma; font-size: 0.45cm; } </style> <head> <body> <h2>Chemistry</h2> <p>In chemistry, the periodic table is used to organize the chemical elements. Based on the atomic numbers, the first 3 elements are:</p> <ul> <li>Hydrogen</li> <li>Helium</li> <li>Lithium</li> </ul> <p>Based on their properties, these 3 elements can be presented as follows:</p> <table border=5> <tr> <td>Atomic Number</td> <td>Element</td> <td>Symbol</td> <td>Atomic Mass</td> </tr> <tr> <td>1</td> <td>Hydrogen</td> <td>H</td> <td>1.0079</td> </tr> <tr> <td>2</td> <td>Helium</td> <td>He</td> <td>4.002682</td> </tr> <tr> <td>3</td> <td>Lithium</td> <td>Li</td> <td>6.941</td> </tr> </table> <p>The properties of carbon, nitrogen, oxygen, fluorine, and chlorine can be presented as follows:</p> <table border=5> <thead> <tr> <th>Atomic Number</th> <th>Element</th> <th>Symbol</th> <th>Atomic Mass</th> </tr> <thead> <tr> <td>6</td> <td>Carbon</td> <td>C</td> <td>12.011</td> </tr> <tr> <td>7</td> <td>Niotrogen</td> <td>N</td> <td>14.007</td> </tr> <tr> <td>8</td> <td>Oxygen</td> <td>O</td> <td>15.999</td> </tr> <tr> <td>9</td> <td>Fluorine</td> <td>F</td> <td>18.998</td> </tr> <tr> <td>17</td> <td>Chloride</td> <td>Cl</td> <td>35.45</td> </tr> </table> <p>Combining hydrogen and carbon results in many types of organic compounds. Examples of hydro-carbon (or hydrocarbon) bonds are:</p> <dl> <dt>Methyl: This is a family of bonds created from methane. Variants are:</dt> <dd>Methylium Cation</dd> <dd>Methanide Anion</dd> <dt>Ethyl: This is a family of products created from ethane</dt> <dt>Vinyl: This results from removing a hydrogen atom from the compound. Furthermore, other chemical products can be added to get such items as:</dt> <dd>Vinyl Chloride</dd> <dd>Vinyl Fluoride</dd> <dd>Vinyl Acetate</dd> <dt>Phenyl</dt> </dl> </body> </html> This would produce: You don't have to create a style for each HTML element. You can create a style for just the elements whose behaviors you want to control. Changing the Normal Behavior of an HTML Tag Every HTML tag was created with a specific behavior in mind. For example, text displayed by the h1 is meant to be larger than text in an h2 element. CSS allows you to change the behaviors of HTML elements to anything you want. To do this, create a style for the tag and apply the behavior you want. Consider the following examples: <!DOCTYPE html> <html> <head> <title>Social Science Studies: Geography</title> <style type="text/css"> body { color: Team; font-family: Times New Roman; } h1 { color: Red; font-size: 14pt; font-family: Georgia; } h2 { color: Maroon; font-size: 36pt; font-family: Georgia; } h3 { color: Green; font-size: 20pt; font-family: Georgia; } </style> </head> <body> <h1>Social Science: Geography</h1> <h2>Introduction</h2> <p>Geography is the study of the environment in which people live. As a result, geography considers the <b>interactions</b> between the people and their <i>environment</i>, both the local and the global sides. The interactions include all aspects of culture, both real and speculative. Normally, geography is a visual social science, mostly involving things that are seen, but also things that are not immediately seen but are demonstrated, or can be proved, as existing.</p> <p>Geographic studies include both the physical and <cite>the human aspects of the environment<cite>.</p> <h3>Conclusion</h3> <p>It is clear that geography influences, and receives influences from, other social science fields, not just <b>sociology</b>, psychology, and <quote>political sciences</quote>, but also linguistics, economy, and law, etc.</p> <p>Copyright ©, 2015</p> </body> </html> This would produce:
In the same way, you can make almost any HTML tag behave anyway you want. Here are examples: <!DOCTYPE html> <html> <head> <title>Social Science Studies: Geography</title> <style type="text/css"> body { color: Team; font-family: Times New Roman; } h1 { color: Red; font-size: 1.14em; font-family: Georgia; } h2 { color: Blue; font-size: 1.14em; font-family: Georgia; } h3 { color: Green; font-size: 1.14em; font-family: Georgia; } b { color: Orange; } i { color: Blue; } cite { color: Magenta; } quote { color: Aqua; } </style> </head> <body> <h1>Social Science: Geography</h1> <h2>Introduction</h2> <p>Geography is the study of the environment in which people live. As a result, geography considers the <b>interactions</b> between the people and their <i>environment</i>, both the local and the global sides. The interactions include all aspects of culture, both real and speculative. Normally, geography is a visual social science, mostly involving things that are seen, but also things that are not immediately seen but are demonstrated, or can be proved, as existing.</p> <p>Geographic studies include both the physical and <cite>the human aspects of the environment<cite>.</p> <h3>Conclusion</h3> <p>It is clear that geography influences, and receives influences from, other social science fields, not just <b>sociology</b>, psychology, and <quote>political sciences</quote>, but also linguistics, economy, and law, etc.</p> <p>Copyright ©, 2015</p> </body> </html> This would produce: Other Topics of CSS and HTML Introduction to Expanding HTML Elements As opposed to completely changing how an object behaves, some CSS styles were created to enhance some existing HTML elements. Examples of such elements are lists, pictures, tables, and the surrounding of an element. CSS provides various options not available in HTML. A Cursor for an HTML Element The browser is equipped to use a default cursor based on the object on which the mouse is positioned. For example, by default, the browser displays a top-left pointing arrow if there is nothing significant under the mouse pointer, a beam if the mouse is on text, and a pointing finger on a link. You can specify the mouse pointer you want on a box or on an element if you want. CSS supports various types of cursors. The style that specifies a mouse pointer is called cursor Its value can be all-scroll, auto, col-resize, crosshair, default, hand, help, move, no-drop, not-allowed, pointer, progress, row-resize, text, vertical-text and wait. Here are examples: <html> <head> <title>Energy</title> <style> p { cursor: row-resize; font-size: 12pt; color: black; font-family: Times New Roman; } h3 { cursor: crosshair; color: Purple; font-size: x-large; font-family: Garamond; } li { cursor: wait; color: Olive; font-size: 0.18in; font-family: Georgia; } i { cursor: help } b { cursor: hand } u { cursor: pointer } h4 { cursor: all-scroll } h5 { cursor: vertical-text } cite { cursor: no-drop } quote { cursor: move } </style> </head> <body> <h3>Forms of Energy</h3> <h4>Introduction</h4> <p>Energy is work that produces heat. Work is the effect of an object that moves from one point to another. It is this <cite>movement</cite>, or change in location, that produces energy. As a result, there are <quote>various ways to get energy</quote>: water, wind, heat (if it is moving from an autonomous source, such as the sun), coal, etc.</p> <p>The two most common forms of energy are:</p> <ul> <li>Potential Energy: This is energy that is stored in a <i>substance</i> or <i>component</i>. For example, there is energy stored in water even when that water is not being used or exploited</li> <li>Kinetic Energy: The energy is kinetic as a <u>result of work</u>. For example, the movement of water in a river or in an ocean is work and that work can produce energy</li> </ul> <p>For the <b>potential energy</b> to be usable, it must be transferred to <b>kinetic energy</b>.</p> <h5>Copyright, © 2015</h5> </body> </html> This would produce:
If you wanto use a custom cursor, call the url() function and pass the file name (or path) of the cursor. |