Scribd
Upload
30 views20 pages

CSS Practicals

The document discusses different CSS techniques for styling elements including: 1. Inline, internal/embedded, and external CSS implementations for styling elements on a page. 2. Selectors like ID, class, grouping, and element to target specific elements with styles. 3. Properties to style text like color, font, alignment, and decoration. 4. Styling links with pseudo-classes and customizing backgrounds with images, colors, and positioning.

Uploaded by

david
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views20 pages

CSS Practicals

The document discusses different CSS techniques for styling elements including: 1. Inline, internal/embedded, and external CSS implementations for styling elements on a page. 2. Selectors like ID, class, grouping, and element to target specific elements with styles. 3. Properties to style text like color, font, alignment, and decoration. 4. Styling links with pseudo-classes and customizing backgrounds with images, colors, and positioning.

Uploaded by

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

CSS Practicals

Inline implementation
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2 style="font-family:georgia; color:red;">


CAUTION: Stormy Weather!
</h2>
<h2>Caution: Stormy Weather!</h2>

</body>
</html>
Embedded/Internal Implementation
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p >Me too!</p>
<p>And me!</p>
</body>
</html>
External Style sheet
<html>
<head>
<title>My Example</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h1>External Styles</h1>
<h2>Allow you to define styles for the whole
website.</h2>
<p >This has a style applied via a class.</p>
</body>
</html>
style2.css
body {
background-color: darkslategrey;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
h2 {
font-size: 1.3em;
}
p{
color: orange;
}
The id selector
<!DOCTYPE html>
<html>
<head>
<style>
#t {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id=“t">Hello World!</p>
<p >This paragraph is not affected by the style.</p>
</body>
</html>
Class selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Class selector
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>
Grouping Selectors
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>
Background Colour
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #b0c4de;
}
</style>
</head>
<body>

<h1>My CSS web page!</h1>


<p>Hello world! This is a background colour example.</p>

</body>
</html>
Background Colour of different Elements

<!DOCTYPE html> </style>


<html> </head>
<head> <body>
<style>
h1 { <h1>CSS background-color example!</h1>
background-color: #6495ed; <div>
} This is a text inside a div element.
<p>This paragraph has its own background
p{ color.</p>
background-color: #e0ffff; We are still in the div element.
} </div>

div { </body>
background-color: #b0c4de; </html>
}
Background Image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>
Position Background Image

<!DOCTYPE html> <h1>Hello World!</h1>


<html> <p>background no-repeat, set position
<head> example.</p>
<style> <p>Now the background image is only shown
body { once, and positioned away from the text.</p>
background-image: url("img_tree.png"); <p>In this example we have also added a
background-repeat: no-repeat; margin on the right side, so the background
background-position: right top; image will never disturb the text.</p>
margin-right: 200px;
} </body>
</style> </html>
</head>
<body>
Text colour of different elements

<!DOCTYPE html> </style>


<html> </head>
<head> <body>
<style>
body { <h1>This is heading 1</h1>
color: red; <p>This is an ordinary paragraph. Notice that
} this text is red. The default text-color for a
page is defined in the body selector.</p>
h1 { <p class="ex">This is a paragraph with
color: #00ff00; class="ex". This text is blue.</p>
}
</body>
p.ex { </html>
color: rgb(0,0,255);
}
Align Text

<!DOCTYPE html> </style>


<html> </head>
<body>
<head>
<style> <h1>CSS text-align Example</h1>
h1 { <p class="date">May, 2009</p>
text-align: center; <p class="main">In my younger and more vulnerable
years my father gave me some advice that I've been
} turning over in my mind ever since. 'Whenever you feel
like criticizing anyone,' he told me,
p.date { 'just remember that all the people in this world haven't
text-align: right; had the advantages that you've had.'</p>
} <p><b>Note:</b> Resize the browser window to see
how the value "justify" works.</p>

p.main { </body>
text-align: justify; </html>
}
Decorate Text

<!DOCTYPE html> </style>


<html> </head>
<head> <body>
<style>
h1 { <h1>This is heading 1</h1>
text-decoration: overline; <h2>This is heading 2</h2>
} <h3>This is heading 3</h3>

h2 { </body>
text-decoration: line-through; </html>
}

h3 {
text-decoration: underline;
}
Text font

<!DOCTYPE html> <p class="ex1">This is a paragraph. This is a


<html> paragraph. This is a paragraph. This is a
<head> paragraph. This is a paragraph. This is a
<style> paragraph. This is a paragraph. This is a
p.ex1 { paragraph.</p>
font: 15px arial, sans-serif;
} <p class="ex2">This is a paragraph. This is a
paragraph. This is a paragraph. This is a
p.ex2 { paragraph. This is a paragraph. This is a
font:italic bold 12px/30px Georgia, serif; paragraph. This is a paragraph. This is a
} paragraph.</p>
</style>
</head> </body>
<body> </html>
Link Colours

<!DOCTYPE html> /* selected link */


<html> a:active {
<head> color: #0000FF;
<style> }
/* unvisited link */ </style>
a:link { </head>
color: #FF0000; <body>
} <p>
<b><a href="default.asp“ target="_blank">This is
/* visited link */ a link</a></b></p>
a:visited {
color: #00FF00; <p><b>Note:</b> a:hover MUST come after a:link
} and a:visited in the CSS definition in order to be
effective.</p>
/* mouse over link */ <p><b>Note:</b> a:active MUST come after
a:hover { a:hover in the CSS definition in order to be
color: #FF00FF; effective.</p>
}
</body>
</html>
Link Colours

<!DOCTYPE html> /* selected link */


<html> a:active {
color: #0000FF;
<head> }
<style> </style>
/* unvisited link */ </head>
a:link { <body>
color: #FF0000;
<p><b><a href="https://www.google.com"
} target="_blank">This is a link</a></b></p>

/* visited link */ <p><b>Note:</b> a:hover MUST come after a:link


a:visited { and a:visited in the CSS definition in order to be
effective.</p>
color: #00FF00;
} <p><b>Note:</b> a:active MUST come after a:hover
in the CSS definition in order to be effective.</p>
/* mouse over link */
a:hover { </body>
</html>
color: #FF00FF;
}
Link Colours

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url(“place url");
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

You might also like