Scribd
Upload
34 views2 pages

CSS 1

The document contains examples of using different CSS selectors like classes, IDs, inline styles and linking external style sheets to style HTML elements. It shows how CSS classes can style multiple elements of the same type with different properties, IDs can uniquely identify and style individual elements, inline styles allow styling directly in HTML tags, and external style sheets define styles reusable across pages.

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
34 views2 pages

CSS 1

The document contains examples of using different CSS selectors like classes, IDs, inline styles and linking external style sheets to style HTML elements. It shows how CSS classes can style multiple elements of the same type with different properties, IDs can uniquely identify and style individual elements, inline styles allow styling directly in HTML tags, and external style sheets define styles reusable across pages.

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

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