how make Multiple Style Sheets - Link in html page
Note : create a folder with name css and save all css file code in this folder .folder always save in same path where html page is saved.
<!DOCTYPE html><html>
<head>
<title>Multiple Style Sheets - Link</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" type="text/css" href="css/tables.css" />
<link rel="stylesheet" type="text/css" href="css/typography.css" />
</head>
<body>
<div id="page">
<h1>Central Park Bike Hire</h1>
<p class="intro">Rent a bicycle to ride around Central Park:</p>
<table>
<tr class="head">
<th></th>
<th>Per hour</th>
<th>Per day</th></tr>
<tr>
<th>Cruiser</th>
<td>$9</td>
<td>$45</td>
</tr>
<tr>
<th>21 Speed</th>
<td>$15</td>
<td>$50</td>
</tr>
</table>
<h2>Where and When</h2>
<h3>Loeb Boathouse</h3>
<p>From April to November bicycles are available on first come first serve basis for riding in Central Park.</p>
<h2>Deposits</h2>
<h3>Cash or credit card</h3>
<p>A $200 deposit is required for the hire of any of our bicycles.</p>
</div>
</body>
</html>
css code:
Name:site
/* Site */
body {
color: #666666;
text-align: center;}
#page {
width: 600px;
text-align: left;
margin-left: auto;
margin-right: auto;
border: 1px solid #d6d6d6;
padding: 20px;}
h3 {
color: #547ca0;}
Name:tables
/* Tables */
table {
border-spacing: 0px;}
th, td {
padding: 5px 30px 5px 10px;
border-spacing: 0px;
font-size: 90%;
margin: 0px;}
th, td {
color: #737476;
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;}
tr.head th {
color: #fff;
background-color: #90b4d6;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666;
letter-spacing: 0.15em;}
tr.head th:first-child {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
tr.head th:last-child {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;}
td {
text-shadow: 1px 1px 1px #fff;}
tr.even td, tr.even th {
background-color: #e8eff5;}
Name:typography
/* Typography */
body {
font-family: Arial, Verdana, sans-serif;
font-size: 100%;}
p {
font-size: 0.75em;}
.intro {
font-size: 1em;}
h1 {
font-size: 1.5em;}
h2 {
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 0.2em;
border-bottom: 1px solid #d6d6d6;
margin-bottom: 0px;}
h3 {
font-size: 0.875em;
margin: 0px;}
output:
0 comments:
Post a Comment