Web Application Development Lab
Module 5
Task1: Inline page CSS
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<body style="background-color: grey"><center>
<h1 style="background-color: white"> Implementation of inline css</h1></center>
<p style="background-color: aqua; width: 70%;"> A paragraph with<br> <br>background-color
: aqua<br><br>color : black<br><br> having width : 70%</p>
<img style="opacity: 0.5; width: 25%;height:25%" src="[Link]">
<p style="background-color: aqua; "> An image with <br><br> opacity : 0.5 <br><br> width :
25% and <br><br> height : 25%</p>
</body>
</html>
Task2: Inpage CSS or Internal CSS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1{
background-color: white;
}
body{
background-color: grey;
}
.a{
background-color: aqua;
width: 70%;
}
#p1{
background-color: aqua;
width: 30%;
}
img{
height: 25%;
width: 25%;
opacity: 0.5;
}
</style>
<title>inPage</title>
</head>
<body><center>
<h1> Implementation of inPage css</h1></center>
<p class="a"> A paragraph with<br> <br>background-color : aqua<br><br> color : black
<br><br> having width : 70%</p>
<img src="[Link]">
<p id="p1"> An image with <br><br> opacity : 0.7<br><br> width : 25% and <br><br> height:
25%</p>
</body>
</html>
Task3: External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<title>external</title>
</head>
<body><center>
<h1> Implementation of External CSS</h1></center>
<p class="a"> A paragraph with<br> <br>background-color : aqua<br><br> color : black
<br><br> having width : 70%</p>
<img src="[Link]">
<p id="p1"> An image with <br><br> opacity : 0.5<br><br> width : 25% and <br><br> height :
25%</p>
</body>
</html>
[Link]
h1
{
background-color: white;
}
body
{
background-color: grey;
}
.a
{
background-color: aqua;
width: 70%;
}
#p1
{
background-color: aqua;
width: 30%;
}
img
{
height: 25%;
width: 25%;
opacity: 0.5;
}
Task4: class selector
Example1: attribute selectors
<html>
<head>
<title>
Selectors </title>
<style>
p[id] {
border : 1px solid #000000;
}
p[id="summary"] {
background-color : #999999;
}
p[class~="HTML"] {
border : 3px solid #000000;
}
p[language|="en"] {
color : #ffffff;
background-color : #000000;
}
p[class^="b"]{
border : 3px solid #333333;
}
p[class*="on"] {
color : #ffffff; background-color:#333333;
}
p[class$="x"] {
border : 1px solid #333333;
}
</style>
</head>
<body>
<p id="introduction">Here’s paragraph one; each paragraph has different
attributes.</p>
<p id="summary">Here’s paragraph two; each paragraph has different attributes.</p>
<p class="important HTML">Here’s paragraph three; each paragraph has different
attributes.</p>
<p language="en-us">Here’s paragraph four; each paragraph has different
attributes.</p>
<p class="begins">Here’s paragraph five; each paragraph has different
attributes.</p>
<p class="contains">Here’s paragraph six; each paragraph has different
attributes.</p>
<p class="suffix">Here’s paragraph seven; each paragraph has different
attributes.</p>
</body>
</html>
Example2: class attribute selector
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
background-color: #bbb;
width: 100px;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
Example3: class selector
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
margin: 20px;
width: 20px;
}
</style>
</head>
<body>
<div class="square">Here, the tag is just an example.
We can write the ID attribute for any HTML tag.
The ID Selector matches the ID attribute within the element and looks for its styling.
In our example, the styling applies as long as any element contains the ID attribute
‘box’.</div>
<p>Here, the tag is just an example.
We can write the ID attribute for any HTML tag.
The ID Selector matches the ID attribute within the element and looks for its styling.
In our example, the styling applies as long as any element contains the ID attribute
‘box’.</p>
</body>
</html>
Example4: Element Selector
<!DOCTYPE html>
<html>
<head>
<style>
ul {
border: solid 1px #ccc;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="demo">
<p>Demo text</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3 </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p[id] {
border : 1px solid #000000;
}
p[id="summary"] {
background-color : #999999;
}
p[class~="HTML"] {
border : 3px solid #000000;
}
p[language|="en"] {
color : #ffffff;
background-color : #000000;
}
p[class^="b"]{
border : 3px solid #333333;
}
p[class*="on"] {
color : #ffffff; background-color:#333333;
}
p[class$="x"] {
border : 1px solid #333333;
}
</style>
</head>
<body>
<p id="introduction">Here’s paragraph one; each paragraph has different
attributes.</p>
<p id="summary">Here’s paragraph two; each paragraph has different attributes.</p>
<p class="important HTML">Here’s paragraph three; each paragraph has different
attributes.</p>
<p language="en-us">Here’s paragraph four; each paragraph has different
attributes.</p>
<p class="begins">Here’s paragraph five; each paragraph has different
attributes.</p>
<p class="contains">Here’s paragraph six; each paragraph has different
attributes.</p>
<p class="suffix">Here’s paragraph seven; each paragraph has different
attributes.</p>
</body>
</html>
Task5: ID Selector
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
margin: 20px;
width: 20px;
}
</style>
</head>
<body>
<div class="square">Here, the tag is just an example.
We can write the ID attribute for any HTML tag.
The ID Selector matches the ID attribute within the element and looks for its styling.
In our example, the styling applies as long as any element contains the ID attribute
‘box’.</div>
<p>Here, the tag is just an example.
We can write the ID attribute for any HTML tag.
The ID Selector matches the ID attribute within the element and looks for its styling.
In our example, the styling applies as long as any element contains the ID attribute
‘box’.</p>
</body>
</html>
Example2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> HTML page to link within a page </title>
<style>
h1,h2,h3
{
align: center;
color:red;
font-size: 20Px;
}
p
{
font-family: arial, verdana, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<p><a href="#C1">Jump to Chapter 1</a></p>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C6">Jump to Chapter 10</a></p>
<p><a href="#C8">Jump to Chapter 13</a></p>
<h1 id="C1">Chapter 1</h2>
<p>This chapter explains Chapter 1</p>
<h2>Chapter 2</h2>
<p>This chapter explains Chapter 2</p>
<h2>Chapter 3</h2>
<p>This chapter explains Chapter 3</p>
<h3 id="C4">Chapter 4</h2>
<p>This chapter explains Chapter 4</p>
<h2>Chapter 5</h2>
<p>This chapter explains Chapter 5</p>
<h2 id="C6">Chapter 6</h2>
<p>This chapter explains Chapter 6</p>
<h2>Chapter 7</h2>
<p>This chapter explains Chapter 7</p>
<h2 id="C8">Chapter 8</h2>
<p>This chapter explains Chapter 8</p>
</body>
</html>
Example3: universal selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: blue;
font-size: 21px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>
Task6: Box Model
Example1:
<html>
<head>
<title>
Selectors </title>
<style>
body, h1, p, img, b {
border-style : solid;
border-width : 2px;
border-color : #000000;
padding:2px;
}
h1, b {
background-color : #cccccc;
}
</style>
</head>
<body>
<h1>Thinking Inside the Box</h1>
<p class="description">When you are styling a web page with CSS you
must start to think in terms of <b>boxes</b>.</p>
<p>Each element is treated as if it generates a new box. Each box can have
new rules associated with it.</p>
<img src="[Link]" alt="How CSS treats a box">
<p>As you can see from the diagram above, each box has a <b>border</b>.
Between the content and the border you can have <b>padding</b>, and
outside of the border you can have a <b>margin</b> to separate this box
from any neighboring boxes.</p>
</body>
</html>
Example2: vertical resize
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the height of a div element.</div>
</body>
</html>
Example3: user interface
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>
Example4: outline off set
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 10px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>
Task7: Pseudo Elements
<html>
<head>
<title> HTML page with Pseudo Elements</title>
<style>
p:first-line
{
font-weight : bold;
font-size: 32px;
}
h1:first-letter
{
font-size : 52px;
}
h3:first-letter
{
font-size : 72px;
}
h6:first-letter
{
font-size : 82px;
}
</style>
</head>
<body>
<p> A sample paragraph showing formatting and followed by a line across the
screen.<br>
A sample paragraph showing formatting and followed by a line across the screen.<br>
A sample paragraph showing formatting and followed by a line across the screen.<br>
A sample paragraph showing formatting and followed by a line across the screen.<br>
A sample paragraph showing formatting and followed by a line across the screen.
</p>
<h1> A sample paragraph showing formatting and followed by a line across the
screen</h1>
<h2> A sample paragraph showing formatting and followed by a line across the
screen</h2>
<h3> A sample paragraph showing formatting and followed by a line across the
screen</h3>
<h4> A sample paragraph showing formatting and followed by a line across the
screen</h4>
<h5> A sample paragraph showing formatting and followed by a line across the
screen</h5>
<h6> A sample paragraph showing formatting and followed by a line across the
screen</h6>
</body>
</html>
Task8: z-index with universal selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: blue;
font-size: 91px;
}
p,div {
position: 8;
top:70px;
left:90px;
z-index:3;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>