Cheat Sheet of CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Cheat Sheet</title>
<!-- Internal CSS -->
<style type="text/css">
h2 {
color: blue;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Inline CSS: not recommended -->
<h1 style="color: red">Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="box-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora debitis
recusandae ab in tenetur, porro amet laboriosam consectetur aliquam
velit incidunt autem a vero repellat asperiores? Assumenda tenetur
praesentium error?
</p>
</div>
<br />
<div class="catergories">
<h2>Catergories</h2>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
</ul>
</div>
<form class="my_form" action="process.php" method="POST">
<!-- div can break the elements to separate lines -->
<div class="form-group">
<label>first name</label>
<br />
<input type="text" name="firstname" placeholder="enter first name" />
</div>
<!-- br: break line -->
<br />
<div class="form-group">
<label>last name</label>
<br />
<input type="text" name="lastname" />
</div>
<br />
<div class="form-group">
<label>email</label>
<br />
<input type="emial" name="email" />
</div>
<br />
<div class="form-group">
<label>message</label>
<br />
<textarea name="message" id=""></textarea>
</div>
<br />
<div class="form-group">
<label>gender</label>
<select name="gender" id="">
<option value="male">male</option>
<option value="female">female</option>
</select>
</div>
<br />
<div class="form-group">
<label>age</label>
<br />
<input type="number" name="age" value="18" />
</div>
<br />
<div class="form-group">
<label>birthday</label>
<br />
<input type="date" name="birthday" value="18" />
</div>
<br />
<input class="button" type="submit" name="submit" value="submit"">
</form>
<div class="block">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
aspernatur magnam eum placeat aliquid tempora. Fugiat, ratione, sit,
natus cum mollitia quia corporis iure cumque sunt laudantium laborum?
Suscipit, cupiditate.
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
aspernatur magnam eum placeat aliquid tempora. Fugiat, ratione, sit,
natus cum mollitia quia corporis iure cumque sunt laudantium laborum?
Suscipit, cupiditate.
</p>
</div>
<div class="block">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
aspernatur magnam eum placeat aliquid tempora. Fugiat, ratione, sit,
natus cum mollitia quia corporis iure cumque sunt laudantium laborum?
Suscipit, cupiditate.
</p>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iure
dolores quibusdam, et illum voluptatibus doloremque provident sunt earum
alias delectus eum ab laboriosam corporis fuga dolore quo accusamus ipsam.
</p>
<div class="clr"></div>
<div id="main_block">
<h3>Main block</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis velit
aliquid, placeat distinctio delectus quod assumenda id recusandae dolor
perferendis, earum necessitatibus, quo dignissimos adipisci et rerum
tenetur. Sint, eveniet.
</p>
</div>
<div id="sidebar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, ut
sapiente! Numquam doloremque ipsum enim, voluptatem hic sit alias minima
possimus quasi quae. Illum necessitatibus, nemo iure ad nam aliquam.
</p>
</div>
<div class="clr"></div>
<div class="p-box">
<h1>Hello</h1>
<h2>Goodbye</h2>
</div>
<a class="fix_me" href="">hello</a>
</body>
</html>
CSS
h3{
color: rgb(0, 255, 68);
/* 20px for vertical 0px for horizontal */
margin: 20px 0;
text-decoration: underline;
}
body{
background-color: rgb(89, 89, 89);
color: rgb(0, 255, 68);
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
font-weight: bold;
line-height: 1.6em;
}
a{
color: white;
text-decoration: none
}
a:hover{
color: red
}
a:active{
color: rgb(31, 31, 30)
}
.button:hover{
background-color: rgb(255, 0, 0);
color: rebeccapurple;
}
.box-1{
color: aliceblue;
width: 80%;
margin: auto;
border-right: 5px solid rgb(0, 255, 68);
border-left: 5px solid rgb(0, 255, 68);
border-top: 5px solid rgb(0, 255, 68);
border-bottom: 5px solid rgb(0, 255, 68);
/* same as above */
border: 5px solid rgb(0, 255, 68);
border-width: 3px;
border-top-style: dotted;
padding-top: 10px;
letter-spacing: 0.2em;
}
.catergories{
border: 1px solid black;
padding: 10px;
border-radius: 15px;
}
.catergories h2{
text-align: center;
}
.catergories ul{
list-style: square;
color: rgb(81, 81, 81);
}
.catergories li{
border-bottom: dotted 1px white;
list-style-image: url("list-bullet.png");
}
.my_form{
padding: 10%;
}
.my_form .form_group{
padding-bottom: 10px;
}
.my_form input[type="text"], .my_form textarea{
padding: 8px;
width: 100%;
}
.block{
float: left;
width: 33%;
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.clr{
clear: both;
}
#main_block{
float: left;
width: 70%;
box-sizing: border-box;
color: aliceblue;
background-color: aquamarine;
}
#sidebar{
float: right;
width: 30%;
background-color: aliceblue;
color: aqua;
padding: 15px;
box-sizing: border-box;
}
.p-box{
width: 800px;
height: 500px;
border: 1px solid black;
box-sizing: border-box;
margin-top: 20px;
position: relative;
padding: 10px;
margin: auto;
background-image: url('img.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.p-box h1{
position: absolute;
top: 10px;
text-align: center;
}
.p-box h2{
position: absolute;
top: 20px;
text-align: center;
}
.fix_me{
position: fixed;
top: 200px;
background-color: red;
}
#navbar{
background-color:black;
color: aliceblue;
}
#navbar ul{
padding: 0;
list-style: none;
}
#navbar li{
display: inline;
}
