Css samples

From OriWiki

Jump to: navigation, search

1

<html> 
<head>
 
  <style type="text/css"> 
 
    h1 {
    color:red;
    }
 
    h2 {
    color:#ff00ff;
    }
 
    p {
    color:blue; 
    text-align:center; 
    background-color:yellow; 
    }
 
    body {
    background-color:green; 
    }
  </style> 
 
</head> 
 
<body>
<h1> my title.. </h1> 
<h2> my sub title.. </h2> 
 
regular text 
<p> this text is inside a paragraph </p> 
again .. regular text.. 
</body> 
 
</html>

2

 
<html> 
<head>
 
  <style type="text/css"> 
 
    h1 {
    color:red;
    }
 
    h2 {
    color:#ff00ff;
    }
 
    p {
    color:blue; 
    text-align:center; 
    background-color:yellow; 
    }
 
    ins {
    background-color:yellow;
    font-size:10px;
    }
 
    em {
    color:yellow;
    }
 
    big {
    background-color:red; 
    font-family:verdana; 
    }
 
    body {
    background-color:green; 
    }
 
    ul {
    background-color:yellow; 
    }
 
    li {
    background-color:orange; 
    }
  </style> 
 
</head> 
 
<!-- 
<body background = "http://orimosenzon.com/img/ori.jpg"> 
-->
<body> 
<h1> my title.. </h1> 
<h2> my sub title.. </h2> 
 
regular text 
<p> this text is inside a paragraph </p> 
<p style = "background-color:orange;"> this text is inside a paragraph </p> 
 
again .. regular text.. 
<br/>
<br/>
<br/>
<img src = "http://orimosenzon.com/img/ori.jpg" align = "right" width ="200" height = "100" /> 
hey <ins> this is an inserted text </ins>, have you noticed that? 
let me, <em> emphsize this </em>, ok ? 
 
this is very <big><big><big><big> big </big></big></big></big>
 
this is <b> bold </b> 
this is <strong> strong </strong> 
 
<br/> 
 
a <a href = "#anch1"> link </a> to my anchor.. 
 
<a href = "http://www.orimosenzon.com/" alt = "follow this link to my page" target = "_blank"  > this link </a> will open in a new window/tab..
 
<a href ="http://www.orimosenzon.com/" target = "_blank">
  <img src = "http://orimosenzon.com/img/ori.jpg" width ="100" alt = "follow this link to my page"  /> 
</a>
 
<hr/>
<br/>
 
 
<a href="mailto:orimosenzon@gmail.com?subject=Hey%20check"> press here to mail.. </a> 
 
<br/>
hey <img src = "http://orimosenzon.com/img/ori.jpg" align ="top" width = "20" />
hey <img src = "http://orimosenzon.com/img/ori.jpg" align ="middle" width = "20" />
hey <img src = "http://orimosenzon.com/img/ori.jpg" border = "5" align ="bottom" width = "20" />
 
<br/>
<table border = "1">
<th> title1 </th>
<th> title2 </th>
<th> title3 </th>
<tr>
  <td> 1 </td>
  <td> 2 </td>
  <td> 3 </td>
</tr>
<tr>
  <td> 4 </td>
  <td> 5 </td>
  <td> 6 </td>
</tr>
 
<hr/>
<br/>
<br/>
 
<ul>
  <li> one </li>
  <li> two </li>
  <li> three </li>
</ul>
 
<ol type = "I">
  <li> one </li>
  <li> two </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> and a list... 
    <ul>
      <li> one </li>
      <li> two </li>
      <li> three </li>
    </ul>
  </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
  <li> three </li>
</ol>
 
<hr/>
<br/>
<br/>
 
<form>
  <input type = "text" name = "inp1" /> 
  <input type = "password" name = "inp2" />
  <br/>
  <input type = "radio" name = "inp3" value = "10" />  
  10.. 
  <br/>
  <input type = "radio" name = "inp3" value = "20" />  
  20
  <br/>
  <input type = "radio" name = "inp3" value = "30" />  
  30
  <br/>
  <input type = "checkbox" name = "inp4" value = "aa" />  
  aa
  <br/>
  <input type = "checkbox" name = "inp4" value = "bb" />  
  bb
  <br/>
  <input type = "checkbox" name = "inp4" value = "cc" />  
  cc
  <br/>
 
  <select name = "inp5">
    <option value = "option1"> option 1 </option>  
    <option value = "option2"> option 2 </option>  
    <option value = "option3"> option 3 </option>  
  </select>
  <br/>
 
  <input type = "submit" value = "ok" />  
  <br/>
</form>
 
<hr/>
<br/>
<br/>
 
</table>
<br/>
<a name = "anch1"> this ia my anchor.. </a> 
</body> 
</html>
Personal tools