Scribd
Upload
13 views

Copy HTML

The document contains examples of using different CSS selectors like classes, IDs, inline and internal styles to style HTML elements. It also shows how to link external CSS stylesheets and use multiple style rules. Some key examples include using classes to style paragraphs with different colors and font sizes, IDs to uniquely identify and style paragraphs, inline styles, internal and linked external stylesheets, and combining internal and external stylesheets.

Uploaded by

PRIYABRATA KHAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Copy HTML

The document contains examples of using different CSS selectors like classes, IDs, inline and internal styles to style HTML elements. It also shows how to link external CSS stylesheets and use multiple style rules. Some key examples include using classes to style paragraphs with different colors and font sizes, IDs to uniquely identify and style paragraphs, inline styles, internal and linked external stylesheets, and combining internal and external stylesheets.

Uploaded by

PRIYABRATA KHAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Copy.

html
<html>
<head>
<style>
p.first { color: blue; }
p.second { color: red; font-size: 15px; }
p.third { background: purple; color: white; }
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the p.first paragraph</p>
<p class="second">This is the p.second paragraph</p>
<p class="third">This is the p.third paragraph</p>
</body>
</html>
External.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<p><b>This is a paragraph</b></p>
<hr>
<p><b>This is another paragraph</b></p>
</body>
</html>
Extra.css
h3
{
color: red;
text-align: right;
font-size: 8pt
}
Id.html
<html>
<head>
<style>
p#exampleID1 { color: blue; }
p#exampleID2 { text-transform: uppercase; }
</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" </p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" </p>
</body>
</html>
Inline.html
<html>
<body>
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
</body>
</html>
Intlnal.html
<html>
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("bgdesert.jpg")}
</style>
</head>
<body>
<p><b>This is a paragraph</b></p>
<hr>
<p><b>This is another paragraph</b></p>
</body>
</html>
Multi.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="extra.css" />
<style type="text/css">
h3
{
text-align: left;
font-size: 20pt
}
</style>
</head>
<body>
<h3>This is a Heading</h3>
<p><b>This is a paragraph</b></p>
</body>
</html>
Mystyle.css
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("bgdesert.jpg")}

You might also like