Scribd
Upload
22 views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

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
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