CSS Example
Exercise 1: Use the below sample code to practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS cheat sheet</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Use this code for internal stylesheet-->
<style type="text/css">
h2{
color:blue;
}
.text-related-internal{
color:gray;
background-color: orange;
}
#heading1{
color:gray;
background-color: yellow;
}
#heading2{
color:yellow;
background-color: gray;
}
</style>
</head>
<body>
<h4>Hello World! without style</h4>
<!-- Example for Inline CSS : Uncomment and check-->
<h3 style="color:red">Hello World! with inline style</h3>
<h2>Hello World! with internal style</h2>
<h1>Hello World! with external style</h1>
<h2 class="text-related-internal">Hello World! with internal style</h2>
<h1 class="text-related">Hello World! with external style</h1>
<h1 id="heading1">Hello World! with internal style</h1>
<h1 id="heading2">Hello World! with internal style</h1>
<h1 id="heading3">Hello World! with external style</h1>
<h1 id="heading4">Hello World! with external style</h1>
<p> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
<p class="text-related-internal"> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
<p class="text-related"> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
</body>
</html>
Exercise 2: Use the below sample code to practice CSS related to Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS cheat sheet</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Use this code for internal stylesheet-->
<style type="text/css">
<!-- Copy the CSS code here-->
</style>
</head>
<body>
<h4>Hello World! without style</h4>
<!-- Example for Inline CSS : Uncomment and check-->
<h3 style="color:red">Hello World! with inline style</h3>
<h2>Hello World! with internal style</h2>
<h1>Hello World! with external style</h1>
<h2 class="text-related-internal">Hello World! with internal style</h2>
<h1 class="text-related">Hello World! with external style</h1>
<h1 id="heading1">Hello World! with internal style</h1>
<h1 id="heading2">Hello World! with internal style</h1>
<h1 id="heading3">Hello World! with external style</h1>
<h1 id="heading4">Hello World! with external style</h1>
<p> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
<p class="text-related-internal"> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
<p class="text-related"> CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>Python</li>
<li>MySQL</li>
<li>Django</li>
</ol>
<a href="https://gmail.com" >Send email</a> <br>
<a href="https://kataryschool.org" >Katary School</a>
</body>
</html>
Use the below CSS code to practice exercise 2
h2{
color:blue;
}
.text-related-internal{
color:gray;
background-color: orange;
}
#heading1{
color:gray;
background-color: yellow;
}
#heading2{
color:yellow;
background-color: gray;
}
<!-- Use below code for external stylesheet-->
h1{
/*
body{
p{
.text-related{
*/
color:green;
background-color:cyan;
border:10px red;
/*Same as above
border-top: 5px red solid;
border-right: 10px red solid;
border-bottom: 15px red solid;
border-left: 20px red solid;
*/
border-width: 20px;
/* border-width: 10px 20px;
Same as above
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;
*/
border-style: solid;
/* Same as above
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: solid;
*/
/* border-radius: 30px;
Same as above */
border-top-right-radius:30px;
border-bottom-right-radius:40px;
border-bottom-left-radius:50px;
border-top-left-radius:60px;
padding: 100px;
/* Same as above
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
*/
margin: 40px;
/* Same as above
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 100px;
*/
font-family: Arial, Times New Roman;
font-size: 20px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
/*word-spacing: 1em;
letter-spacing: 0.2em;
*/
/* The below line is same as above
font: 20px bold arial,Time New Roman ;*/
}
a:hover{
color:red;
}
a:active{
color:green;
}
a:visited{
color:yellow;
}
#heading3{
color:white;
background-color: red;
}
#heading4{
color:yellow;
background-color: green;
}
Exercise 3: Use the below sample code to practice CSS related to List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS cheat sheet</title>
<link rel="stylesheet" type="text/css" href="css/list_style.css">
<!-- Use this code for internal stylesheet-->
<style type="text/css">
<!-- Copy the CSS code here-->
</style>
</head>
<body>
<h1>List CSS</h1>
<div class="courses">
<h2> Courses</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Python</li>
<li>MySQL</li>
<li>Django</li>
</ul>
</div>
<div>
<ol class="my-list">
<li>HTML5</li>
<li>CSS3</li>
<li>Python</li>
<li>MySQL</li>
<li>Django</li>
</ol>
</div>
</body>
</html>
Use the below CSS code to practice exercise 3
*{
}
div {
margin:20px;
width: 100%;
border: 2px solid red;
border-radius: 4px;
background-color: lightgray;
}
.courses h2{
text-align: center;
}
.courses ul{
padding-left:50px;
/* list-style: none;*/
list-style: square;
}
.courses li{
padding-bottom: :10px;
border-bottom: 1px dotted red;
list-style-image: url(../images/check.png);
}
.my-list li:first-child{
background-color: red;
}
.my-list li:last-child{
background-color: blue;
}
.my-list li:nth-child(3){
background-color: yellow;
}
.my-list li:nth-child(even){
background-color: green;
}
Exercise 4: Use the below sample code to practice CSS related to Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Tags in HTML</title>
<link rel="stylesheet" type="text/css" href="css/table_style.css">
<style type="text/css">
<!-- Copy the CSS code here-->
</style>
</head>
<body>
<header>
Table CSS
</header>
<div style="overflow-x:auto;">
<table>
<caption>Table 1.1 Students</caption>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Class</th>
<th>Section</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Shreeth</td>
<td>21-Oct-2010</td>
<td style="color:red">1</td>
<td>B</td>
<td>shreeth@gmail.com</td>
</tr>
<tr>
<td>02</td>
<td>Rudhra</td>
<td>28-Aug-2010</td>
<td>1</td>
<td>A</td>
<td>rudhra@gmail.com</td>
</tr>
<tr>
<td>03</td>
<td>Ramya</td>
<td>21-Oct-2010</td>
<td style="color:red">1</td>
<td>B</td>
<td>ramya@gmail.com</td>
</tr>
<tr>
<td>04</td>
<td>Rakhsana</td>
<td>28-Aug-2010</td>
<td>1</td>
<td>A</td>
<td>rakhsana@gmail.com</td>
</tr>
</tbody>
</table>
</div>
<br>
<table class="table-1">
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Class</th>
<th>Section</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Shreeth</td>
<td>21-Oct-2010</td>
<td>1</td>
<td>B</td>
<td>shreeth@gmail.com</td>
</tr>
<tr>
<td>02</td>
<td>Rudhra</td>
<td>28-Aug-2010</td>
<td>1</td>
<td>A</td>
<td>rudhra@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the below CSS code to practice exercise 4
*{
margin: 0;
padding:10px;
}
table{
width:90%;
margin: 20px;
border: 1px solid black;
border-collapse: collapse;
}
caption {
caption-side: bottom;
}
th{
height: 50px;
border: 1px solid black;
background: green;
color:white;
border-radius: 10px;
text-align: center;
vertical-align: bottom;
}
tr {
border: 1px solid black;
background-color: yellow;
}
tr:hover {
border: 5px solid blue;
background-color: lightgray;
}
tr:nth-child(odd) {
background-color: white;
}
tr:nth-child(even) {
background-color: yellow;
}
/*
td{
border: 1px solid black;
height: 40px;
background:yellow;
}
*/
.table-1{
margin: 20px;
border: 1px solid black;
width:90%;
}
.table-1 th{
border: 1px solid black;
background: blue;
vertical-align: top;
}
.table-1 td{
border: 1px solid black;
background:grey;
text-align: left;
}
Exercise 5: Use the below sample code to practice CSS related to Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Tags in HTML</title>
<link rel="stylesheet" type="text/css" href="css/form_style.css">
<style type="text/css">
<!-- Copy the CSS code here-->
</style>
</head>
<body>
<header>
<h1>Understanding Form CSS</h1>
</header>
<form action="" method="post">
<!-- POST,GET,UPDATE,DELETE-->
<!-- Try action with "/"-->
<!--
<h3>This is a Text field</h3>
-->
<label for="name">Student Name</label>
<input type="text" name="name" maxlength="10" placeholder="Your name...">
<!--
<h3>This is a Number field</h3>
-->
<label for="phone">Phone No (Hidden) </label>
<input type="number" name="phone">
<!--
<h3>This is an Email field</h3>
-->
<label for="email">Email (Read Only)</label>
<input type="email" name="email" readonly >
<!--
<h3>This is a Date field</h3>
-->
<label for="birth date"> Date of Birth </label>
<input type="date" name="birth date" >
<!--
<h3>This is a Radio field</h3>
-->
<label for="gender" style="width:100%"> Gender</label>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male" >Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<!--
<h3>This is a Checkbox field</h3>
-->
<label for="language" style="width:100%">Languages Known</label>
<div>
<input type="checkbox" name="language" id="English" value="English" >
<label for="English">English</label>
<input type="checkbox" name="language" id="Hindi" value="Hindi">
<label for="Hindi">Hindi</label>
<input type="checkbox" name="language" id="Tamil" value="Tamil">
<label for="Tamil">Tamil</label>
</div>
<!--
<h3>This is a Dropdown/List field</h3>
-->
<label for="class">Class</label>
<select name="class" id="class">
<option value="Class 1">Class 1</option>
<option value="Class 2">Class 2</option>
<option value="Class 3">Class 3</option>
<option value="Class 4">Class 4</option>
</select>
<!--
<h3>This is a Password field</h3>
-->
<label for="password">Password</label>
<input type="password" name="password">
<!--
<h3>This is a File field</h3>
-->
<label for="photo">Photo upload</label>
<input type="file" name="photo" >
<!--
<h3>This is a Text Area field</h3>
-->
<label for="remarks">Remarks</label>
<textarea name="remarks" cols="50" rows="5"></textarea>
<!--
<h3>This is a Button </h3>
-->
<input type="submit" value="Submit Student Details">
<!-- Positioning -->
<div class="p-box">
<h1>Hello!</h1>
<h2>Good Bye!</h2>
</div>
<input class="fix-me" type="submit" value="Contact Us">
</form>
</body>
</html>
Use the below CSS code to practice exercise 5
*{
margin: 10px ;
padding:10px;
box-sizing: border-box;
}
label {
padding: 0px;
}
input {
border: 2px solid red;
border-radius: 4px;
background-color: yellow;
color: black;
}
input[type=text],input[type=number], input[type=date], input[type=email], input[type=password], input[type=file] {
width: 100%;
box-shadow: 5px 10px gray;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
}
input[type=text]:focus {
background-color: lightblue;
border: 3px solid black;
}
/*
input[type=text] {
transition: width 1s ease-in-out;
resize: vertical;
}*/
textarea {
width: 100%;
height: 150px;
border: 2px solid red;
border-radius: 4px;
background-color: yellow;
resize: none;
}
select {
width: 100%;
border: 2px solid red;
border-radius: 4px;
background-color: green;
}
div {
width: 100%;
border: 2px solid red;
border-radius: 4px;
background-color: orange;
}
input[type=button], input[type=submit], input[type=reset] {
width: 200px;
padding: 10px;
background-color: green;
color: white;
border: none;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: red;
}
.p-box{
width: 800px;
height: 500px;
border: 2px solid red;
margin:30px;
position: relative;
background-image: url(../images/bgimage.jpg);
background-repeat: no-repeat;
background-position: 100px 200px;
background-position: center top;
}
.p-box h1{
position: absolute;
top: 100px;
left:200px;
}
.p-box h2{
position: absolute;
bottom: 100px;
right:50px;
}
.fix-me{
position: fixed;
top: 600px;
}