How we give style in HTML through link.
HTML coding
<html>
<head>
// t is the link of the CSS file
<link href="styles.css" rel="stylesheet">
// t is the link of the CSS file
</head>
<body>
<div id='pagewrapper'>
<h1>We are now under way</h1>
<p><a href="http://www.online-web-courses.com">Visit the online course portal</a></p>
<p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. </p>
<h2>This is a level-two head</h2>
<p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.
</p>
<div class='mydiv'>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
</div>
</div>
</body>
</html>
This is CSS file which save in name of "style.css"
{
background: #00d;
}
a:link {
text-decoration: none;
color: #009;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #900;
}
body {
font-family: helvetica, arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Times, "Times New Roman", serif;
}
h1 {
font-size: 30px;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-bottom: 15px;
}
h3 {
font-size: 16px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 14px;
}
p {
margin: 0 0 10px 0;
line-height: 22px;
}
ul {
list-style-type: disc;
padding-left: 30px;
margin-bottom: 10px;
line-height: 14px;
}
ol {
list-style-type: decimal;
padding-left: 30px;
margin-bottom: 10px;
line-height: 16px;
}
#pagewrapper {
width: 560px;
margin: 20px auto;
border: 1px solid #666;
padding: 20px;
background: #eee;
}
.mydiv {
background: #999;
padding: 30px;
margin: 20px;
border: 1px solid #777;
border-radius: 10px;
}
HTML coding
<html>
<head>
// t is the link of the CSS file
<link href="styles.css" rel="stylesheet">
// t is the link of the CSS file
</head>
<body>
<div id='pagewrapper'>
<h1>We are now under way</h1>
<p><a href="http://www.online-web-courses.com">Visit the online course portal</a></p>
<p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. </p>
<h2>This is a level-two head</h2>
<p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.
</p>
<div class='mydiv'>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
</div>
</div>
</body>
</html>
This is CSS file which save in name of "style.css"
{
background: #00d;
}
a:link {
text-decoration: none;
color: #009;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #900;
}
body {
font-family: helvetica, arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Times, "Times New Roman", serif;
}
h1 {
font-size: 30px;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-bottom: 15px;
}
h3 {
font-size: 16px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 14px;
}
p {
margin: 0 0 10px 0;
line-height: 22px;
}
ul {
list-style-type: disc;
padding-left: 30px;
margin-bottom: 10px;
line-height: 14px;
}
ol {
list-style-type: decimal;
padding-left: 30px;
margin-bottom: 10px;
line-height: 16px;
}
#pagewrapper {
width: 560px;
margin: 20px auto;
border: 1px solid #666;
padding: 20px;
background: #eee;
}
.mydiv {
background: #999;
padding: 30px;
margin: 20px;
border: 1px solid #777;
border-radius: 10px;
}
Real Translator Jobs - New Top Offer! - $100 Bonus To New Affiliates! (view mobile)
No comments :
Post a Comment