Department of Computer Engineering
Academic Session: 2022
Lab Task 5
CSS Examples
Submitted to:
Sir Sheheryar
Submitted by:
Zara Khan
22-CP-Omega
Subject Details:
Computing Fundamentals (Lab)
Dated: 14-11-2022
Example 1:
Code:
body {
background-color: yellow;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
Output:
Example 2:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
text-align: center;
</style>
</head>
<body>
<p>Hello guys!</p>
<p>i have styled These paragraphs with CSS.</p>
</body>
</html>
Output:
Example 3:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
Example 4:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output:
Example 5:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
</style>
</head>
<body>
<h1 class="center">blue and center-aligned heading</h1>
<p class="center">bluw and center-aligned paragraph.</p>
</body>
</html>
Output:
Example 6:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: green;
[Link] {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be green and center-aligned.</p>
<p class="center large">This paragraph will be green, center-aligned, and in a large font-size.</p>
</body>
</html>
Output:
Example 7:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
Example 8:
Code:
<!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>
Output:
Example 9:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Example 10:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Example 11:
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Output:
Example 12:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p{
color: red;
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Output:
Example 13:
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Dummy text refers to the bits of content that are used to fill a website mock-up. This text helps web
designers better envision how the website will look as a finished product. It is important to understand
that dummy text has no meaning whatsoever.
</p>
</body>
</html>
Output:
Example 14:
Code:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Output:
Example 15:
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Output:
Example 16:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
p{
background-color: yellow;
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Output:
Example 17:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("[Link]");
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph has an image as the background!</p>
</body>
</html>
Output:
Example 18:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
Output:
Example 19:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one
declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
Output:
Example 20:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Output:
Example 21:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>
</body>
</html>
Output:
Example 22:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and
a left padding of 80px.</div>
</body>
</html>
Output:
Example 23:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: blue;
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Output:
Example 24:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: powderblue;
width: 200px;
border: 15px solid purple;
padding: 50px;
margin: 20px;
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green
border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</div>
</body>
</html>
Output:
Example 27:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
[Link] {outline-style: dotted;}
[Link] {outline-style: dashed;}
[Link] {outline-style: solid;}
[Link] {outline-style: double;}
[Link] {outline-style: groove;}
[Link] {outline-style: ridge;}
[Link] {outline-style: inset;}
[Link] {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
Output:
Example 28:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
h1 {
background-color: black;
color: white;
div {
background-color: blue;
color: white;
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>
Output:
Example 29:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
.p2 {
font-family: Arial, Helvetica, sans-serif;
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Output:
Example 30:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="[Link] crossorigin="anonymous"></script>
<!--Get your own code at [Link]-->
</head>
<body>
<h1>Font Awesome icon library</h1>
<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Output:
Example 31:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
/* visited link */
a:visited {
color: green;
/* mouse over link */
a:hover {
color: hotpink;
/* selected link */
a:active {
color: blue;
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Output:
Example 32:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
ul {
background: #3399ff;
padding: 20px;
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Output:
Example 33:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
</style>
</head>
<body>
<h1>A Fancy Table</h1>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Output:
Example 34:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="/html/[Link]" target="_blank">HTML</a></li>
<li><a href="/css/[Link]" target="_blank">CSS</a></li>
<li><a href="/js/[Link]" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
Output:
Example 35:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference
between
the two divs!</p>
</body>
</html>
Output:
Example 36:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
position: relative;
left: 30px;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Output:
Example 37:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Output:
Example 38:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 50%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>The overflow property controls what happens to content that is too big to fit into an area.</p>
<div id="overflowTest">This text is really long and the height of its container is only 100 pixels.
Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem.</div>
</body>
</html>
Output:
Example 39:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h2>Float None</h2>
<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>
<p><img src="[Link]" alt="Pineapple" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Output:
Example 40:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit
amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span
class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit
amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span
class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit
amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span
class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
</body>
</html>
Output:
Example 41:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="[Link]" alt="Paris" style="width:40%">
</body>
</html>
Output:
Example 42:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div
elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
Output:
Example 43:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
/* selected link */
a:active {
color: blue;
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Output:
Example 44:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Output:
Example 44:
Code:
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Output:
Example 45:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
.dropdown:hover .dropdown-content {
display: block;
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Output:
Example 46:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="[Link]"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Output:
Example 48:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="[Link]
<a href="[Link] target="_blank">[Link]</a>
<a href="[Link] target="_top">[Link]</a>
</body>
</html>
Output:
Example 49:
Code:
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
input[type=submit]:hover {
background-color: #45a049;
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
</style>
<body>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Output:
Example 50:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
h1 {
counter-reset: subsection;
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>[Link]</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
Output:
Example 51:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>
Output:
Example 52:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 60px;
p{
font-size: 25px;
line-height: 50px;
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:
Example 13:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output:
Example 53:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
.myclass {
background-color: gray;
p{
background-color: red !important;
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Output:
Example 55:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and
the edges of the window:</p>
<div id="div1">Some text...</div>
</body>
</html>
Output:
Example 58:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Output:
