Scribd
Upload
30 views2 pages

CSS Styling Techniques Overview

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

CSS Styling Techniques Overview

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>
[Link] { color: blue; }
[Link] { color: red; font-size: 15px; }
[Link] { background: purple; color: white; }
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the [Link] paragraph</p>
<p class="second">This is the [Link] paragraph</p>
<p class="third">This is the [Link] paragraph</p>
</body>
</html>
[Link]
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
<body>
<p><b>This is a paragraph</b></p>
<hr>
<p><b>This is another paragraph</b></p>
</body>
</html>
[Link]
h3
{
color: red;
text-align: right;
font-size: 8pt
}
[Link]
<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>
[Link]
<html>
<body>
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
</body>
</html>
[Link]
<html>
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("[Link]")}
</style>
</head>
<body>
<p><b>This is a paragraph</b></p>
<hr>
<p><b>This is another paragraph</b></p>
</body>
</html>
[Link]
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
<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>
[Link]
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("[Link]")}

You might also like