1. Do cascading style sheets make for easy web page formatting? Do you find it easy to use CSS? Explain
Ans.
Yes. At first I thougth that CSS are more difficult than the HTML codes but when you use its easy than HTML codes and its more cleaner the html codes to use.
2. Enumerate, differentiate and provide an example on the varying ways of using CSS.
Ans.
Three Ways To Use CSS:
Inline - style declarations allow us to define styles at the exact point we need them. For example, if we want to make a headline show up as large, bold, crimson text, we will find that headline in our HTML and add the CSS where the headline appears in the markup.
Example:
<p>This is a paragraph that has no inline styles applied to it.</p>
- Internal - placement of CSS, we will make our style rules in the HEAD section of the HTML. By using this method, the style declarations we make will affect only content on this page.
Example:
<style>
| h1 {font-size:1.5em; color:#990000;} |
| p {font-size:.9em; line-height:140%;color:#000000;} |
- External - the great thing about this method is that you can have 1000 pages (or more) in a website and have every one of them link to that stylesheet. This means you can make changes to that one CSS file and have the changes apply across all 1000 pages of your site.
Example:
<link rel="stylesheet" href="style.css" media="screen" />
3. Give 10 examples of a regular html style formatting and show its equivalent formatting in CSS.
Ans.
HTML Style Formatting: Its Equivalent Formatting in CSS:
1.<body bgcolor="red"> {background-color:red;}
2.<p align="right">Hello</p> <p style="align:right">Hello</p>
3.<td align="right"></td> td{text-align:right;}
4. <table width="100"> <table style="width:100">
5.<font size="2"> body {font-size:16px;}
6.<p></p> p {font-style:italic;}
7.<b></b> <strong></strong>
8.<u></u> {text-decoration:underline;}
9.<font color=”"></font> {font-color: green;}
10.<i></i> {font: italic;}
4. Create an html document (web page) using CSS. Show the code and a screen cap of your output.
Ans.
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Family</th>
<th>Occupation</th>
<th>Gender</th>
</tr>
<tr>
<td>Florencio Jordan</td>
<td>Armys</td>
<td>Male</td>
</tr>
<tr class="alt">
<td>Myrna Jordan</td>
<td>Princess?</td>
<td>Female</td>
</tr>
<tr>
<td>Kim Sharmaine Jordan</td>
<td>Employeessssss</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Arlyn Jofrdan</td>
<td>OFW</td>
<td>Female</td>
</tr>
<tr>
<td>Michael Jordan</td>
<td>Student</td>
<td>Male</td>
</tr>
<tr class="alt">
<td>Harvey Jordan</td>
<td>Student</td>
<td>Male</td>
</tr>
<tr>
<td>Steph Jordan</td>
<td>Student</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Luigi JOrdan</td>
<td>Tambay</td>
<td>Male/td>
</tr>
<tr>
<td>Clarice Jordan</td>
<td>Employee</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Emman Jordan</td>
<td>Seaman</td>
<td>Male</td>
</tr>
</table><br><br>
<p><center><font color:"blue"><b><i>THIS IS MY
FAMILY</i></font></b></center></p>
</body>
</html>
OUTPUT:
Walang komento:
Mag-post ng isang Komento