In External Style Sheet The HTML code of your web page, which is to be linked with the external style sheet (Say sample.css). Under the header section within <head>.......</head> tags add a link tag should have following attributes:
rel="stylesheet"
type="text/css"
href="sample.css"
Here you can skip the path of CSS file if the CSS file in the same directory as that of your web page. Otherwise you need to include the path of the CSS file also.
Syntax:
:
:
:
<head>
:
:
<link rel="stylesheet" type="text/css" href="sample.css">
:
:
</head>
Here Link Tag added inside header section to link to an external style sheet.
For Example: HTML code to illustrate the linking of external style sheet to a web page.
HTML file:externalcss.html
<html>
<head><title>
External Style sheet for Table element
</title>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<h1>Web Page Using external Style Sheet</h1>
<table> <tr>
<th>
S. No.</th>
<th>
Emp-Name</th>
<th>
Emp-designation </th>
</tr>
<tr><td>1.</td><td>Jon Genre</td><td>M.D.</td></tr>
<tr><td>2.</td><td>roke Genre</td><td>vice M.D.</td></tr>
<tr><td>3.</td><td>posto marker</td><td>civil department </td></tr>
</table>
</body>
</html>
CSS file:sample.css
body{background-color:cyan;margin-top:20}
h1{font-weight:bold;text-align:center;color:red;font-family:Arial;}
table{border-style:sold;border-width:3;border-color:white;font-size:10px;text-align:justify;}
td{padding:1pt 3pt 2pt 3pt;border-style:solid;border-width:1;}
Browser view :-
rel="stylesheet"
type="text/css"
href="sample.css"
Here you can skip the path of CSS file if the CSS file in the same directory as that of your web page. Otherwise you need to include the path of the CSS file also.
Syntax:
:
:
:
<head>
:
:
<link rel="stylesheet" type="text/css" href="sample.css">
:
:
</head>
Here Link Tag added inside header section to link to an external style sheet.
For Example: HTML code to illustrate the linking of external style sheet to a web page.
HTML file:externalcss.html
<html>
<head><title>
External Style sheet for Table element
</title>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<h1>Web Page Using external Style Sheet</h1>
<table> <tr>
<th>
S. No.</th>
<th>
Emp-Name</th>
<th>
Emp-designation </th>
</tr>
<tr><td>1.</td><td>Jon Genre</td><td>M.D.</td></tr>
<tr><td>2.</td><td>roke Genre</td><td>vice M.D.</td></tr>
<tr><td>3.</td><td>posto marker</td><td>civil department </td></tr>
</table>
</body>
</html>
CSS file:sample.css
body{background-color:cyan;margin-top:20}
h1{font-weight:bold;text-align:center;color:red;font-family:Arial;}
table{border-style:sold;border-width:3;border-color:white;font-size:10px;text-align:justify;}
td{padding:1pt 3pt 2pt 3pt;border-style:solid;border-width:1;}
Browser view :-
No comments:
Post a Comment