ADDING STYLES TO WEB PAGES USNIG CSS
Review of HTML
World Wide Web(WWW)
WORLD WIDE WEB –The World Wide Web is a worldwide information service on the Internet. The World Wide Web or the Web, as it is popularly known uses special software called a Browser (client) and TCP/IP, HTTP and a Web server to function.
Headers
Information placed in this section is essential to the inner working of the document and has nothing to do with the content of the document. All the information placed with in the <HEAD></HEAD> tags is not displayed in the browser.
The HTML tags used to indicate the start and end of the head section are:
<HEAD>
<TITLE>…. </TITLE>.
</HEAD>
Body and Titles
The tags used to indicate the start and end of the main body of textual information are :
<BODY>
……..
……..
</BODY>
A web page would have a title that describe what the page is about without being too wordy. This can be achieved by using the TITLE tag.
<TITLE>…………………………………..</TITLE>
Headings
Paragraphs
HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Tables
Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag. (tr stands for table row)
• A row is divided into data cells with the <td> tag. (td stands for table data)
• A row can also be divided into headings with the <th> tag. (th stands for table heading)
• The <td> elements are the data containers in the table.
• The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.
<table style="width:300px">
<tr>
<th>First</th>
<th>Last</th>
<th>Points</th>
</tr>
<tr>
<td>Vikram</td>
<td>Vats</td>
<td>98</td>
</tr>
<tr>
<td>Rajesh</td>
<td>Singh</td>
<td>60</td>
</tr>
</table>
Lists
The most common HTML lists are ordered and unordered lists:
An ordered list:
1. The first list item
2. The second list item
3. The third list item
An unordered list:
• List item
• List item
• List item
HTML Ordered Lists
An ordered list starts with the <OL> tag. Each list item starts with the <LI> tag. The list items are marked with numbers.
<OL>
<LI>Coffee</LI>
<LI>Milk</LI>
</OL>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).
<UL>
<LI>Coffee</LI>
<LI>Milk</LI>
</UL>
How the HTML code above looks in a browser:
• Coffee
• Milk
HTML Description Lists
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<DL>
< DT>COFFEE</DT>
<DD>- BLACK HOT DRINK</DD>
<DT>MILK</DT>
<DD>- WHITE COLD DRINK</DD>
</DL>
How the HTML code above looks in a browser:
- Coffee
- black hot drink
Milk
- white cold drink
Adding Style Sheets
CSS is a style sheet language used to determine the formatting of an HTML document.Using separate style sheets for an entire site, leveraging semantic markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.