CSS TUTORIAL FIRST PART
1. CSS TUTORIAL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="/css1.css">
<style>
p{
color: purple;
background-color: rosybrown !important;
}
</style>
</head>
<body>
<h3>This is CSS Tutorial</h3>
<!-- <p style="color: royalblue; background-color: skyblue;">This tutorial will teach you everthing you need to know about HTMLCSS </p> -->
<p>This tutorial will teach you everthing you need to know about HTMLCSS </p>
</body>
</html>
2. CSS Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
/* element selector */
p {
border: 2px solid black;
}
footer {
border: 2px solid black;
}
/* id selector */
#firstpara {
color: red;
background-color: rgb(19, 87, 126);
}
/* class selector */
.bgBlue {
color: chartreuse;
background-color: blue;
}
.redElement {
color: rgb(204, 179, 38);
background-color: blue;
}
/* grouping selector */
footer,
span {
background-color: pink;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p id="firstpara">This is a simple paragraph to demonstrate css Selectors</p>
<p id="srcondPara" class=" bgBlue">This is a simple second paragraph to demonstrate css Selectors</p>
<div>
<p class="redElement">This is a simple third paragraph to demonstrate css Selectors</p>
</div>
<span>This is span</span>
<footer>This is footer </footer>
</body>
</html>
3. Developer tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer tools</title>
<style>
p {
color: blue;
font-style: inherit;
background-color: chartreuse;
}
.bgPri {
background-color: rgb(251 23 206);
}
</style>
</head>
<body>
<h4 class="bgPri">Developer tools tutorial</h4>
<p>This is a tutorial for Chrome Developer tools</p>
</body>
</html>
4. CSS Fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Langar', cursive;
font-size: 33px;
line-height: 2.4em;
}
span {
font-weight:lighter;
font-style: italic;
}
</style>
</head>
<body>
<h3>CSS Fonts</h3>
<p>Lets play with fonts. it is very exciting</p>
</body>
</html>
5. Colors in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colors in CSS</title>
<style>
/* by name color */
#firstpara{
color: palegreen;
}
/* by rgb color */
#secondpara{
color: rgb(233, 52, 52);
}
/* by hex color */
#thirdpara{
color: #606060;
}
</style>
</head>
<body>
<h2>This is my first box</h2>
<p id="firstpara">This is a paragrapg from first box</p>
<h2>This is my first box</h2>
<p id="secondpara">This is a paragrapg from second box</p>
<h2>This is my first box</h2>
<p id="thirdpara">This is a paragrapg from third box</p>
</body>
</html>
6. Height, width, borders and background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Height, width, borders and background </title>
<style>
#firstpara {
background-color: crimson;
height: 100px;
width: 500px;
border: 4px solid darkblue;
/* border-width: 4px;
border-color: darkblue;
border-style: solid; */
border-radius: 10px;
}
/* u can use any style of border */
#secondpara {
background-color: crimson;
height: 100px;
width: 500px;
/* border: 4px solid darkblue; */
border-width: 4px;
border-color: darkblue;
border-style: solid;
border-radius: 10px;
}
#thirdpara {
background-color: rgb(38, 224, 47);
height: 100px;
width: 500px;
/* border: 4px solid darkblue; */
/* border-width: 4px;
border-color: darkblue;
border-style: solid; */
/* border-radius: 10px; */
border-top: 10px solid rgb(238, 172, 5);
border-left: 10px solid rgba(243, 6, 6, 0.945);
border-bottom: 10px solid rgb(91, 9, 243);
border-right: 10px solid rgb(24, 2, 34);
border-top-left-radius: 15px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 50px;
border-top-right-radius: 25px;
}
#fourthpara {
height: 500px;
width: 500px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OtexGCLBwyPa6iHa5HCNzqCC34NVzWrQAlwpxcHchRujL0KclHq0JLkW9QfY-c2SqxzTAlIHPkjATAOnkCB_1GJE5chyjlAYsE0ZGrcnnrw-7gm1ebg50wmAyJaO__bC0Dji3OfDQEjJ/w140-h140-p/2020-09-23.jpg);
border: 10px solid red;
background-repeat: no-repeat;
/* repeat-x and repeat-y will make it repeat on x and y axis */
/* background-position: 10px 15px; */
/* background-position: center center; */
background-position: top left;
/* background-position: bottom left ; */
/* background-position: top center; */
}
</style>
</head>
<body>
<h2>this is heading</h2>
<p id="firstpara">this is a paragraph</p>
<p id="secondpara">this is a paragraph</p>
<p id="thirdpara">this is a paragraph</p>
<p id="fourthpara">this is a paragraph</p>
</body>
</html>
7. BOX MODEL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #4cb3bb;
}
.container {
background-color: cadetblue;
border: 10px solid #0024ff;
/* we can set margin/padding for top, bottom, left and right like this
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
AND
margin-top: 90px;
margin-bottom: 90px;
margin-left: 90px;
margin-right: 90px;*/
/* padding: 40px 45px 50px 55px; */
/* padding: top right bottom left; */
/* margin: 30px 40px 50px 60px; */
/* margin: top right bottom left; */
/* padding: 50px;
margin: 25px; */
/* padding: y(top/bottom) x(left/right); */
padding: 40px 60px;
/* margin: y(top/bottom) x(left/right); */
margin: 50px 70px;
border-radius: 40px;
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<h2>This is my heading</h2>
<p id="first">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis! Unde vitae vero
accusamus eaque facilis soluta, repudiandae quod explicabo laudantium recusandae aut iste porro est?
Molestias laudantium quos facilis.</p>
</div>
<div class="container">
<h2>This is my heading</h2>
<p id="second">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis! Unde vitae vero
accusamus eaque facilis soluta, repudiandae quod explicabo laudantium recusandae aut iste porro est?
Molestias laudantium quos facilis.</p>
</div>
<div class="container">
<h2>This is my heading</h2>
<p id="second">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis! Unde vitae vero
accusamus eaque facilis soluta, repudiandae quod explicabo laudantium recusandae aut iste porro est?
Molestias laudantium quos facilis.</p>
</div>
<div class="container">
<h2>This is my heading</h2>
<p id="third">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis! Unde vitae
vero accusamus eaque facilis soluta, repudiandae quod explicabo laudantium recusandae aut iste porro
est? Molestias laudantium quos facilis.</p>
</div>
</body>
</html>
8. Alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alignment</title>
<link href="link href=" https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400&display=swap"
rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'JetBrains Mono', monospace;
}
.container {
width: 1000px;
border: 5px solid red;
margin: 150px;
background-color: yellowgreen;
}
.item {
border: 5px solid tan;
margin: 15px 5px;
padding: 20px 8px;
background-color: yellow;
}
#fruits {
float: left;
width: 48%;
}
#computer {
float: left;
width: 49%;
}
#toy {
/* float: left; */
clear: both;
width: 99%;
}
p,
h3 {
/* text-align: right;
text-align: left;
text-align: center; */
text-align: justify;
}
h1 {
margin: auto;
width: 400px;
}
body {
background-color: violet;
}
</style>
</head>
<body>
<div class="container">
<h1> welcome to my store </h1>
<div id="fruits" class="item">
<h2>fruits</h2>
<p id="fruitspara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ipsum fugiat
tempora inventore autem deserunt ratione blanditiis dicta vitae nostrum, accusantium maxime nulla
laudantium fuga vero deleniti recusandae cumque ad? Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ipsam eaque blanditiis, dolorem voluptates dolore iure laborum necessitatibus, esse ratione
numquam sed maxime similique modi cumque recusandae itaque iusto! Rerum, odit!</p>
</div>
<div id="computer" class="item">
<h3>computer</h3>
<p id="computerpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ipsum
fugiat tempora inventore autem deserunt ratione blanditiis dicta vitae nostrum, accusantium maxime
nulla laudantium fuga vero deleniti recusandae cumque ad?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Alias explicabo, fugit laudantium nulla corrupti provident! Iste, fugit omnis
consequuntur adipisci beatae eum in, nihil alias aut porro, impedit delectus fugiat. </p>
</div>
<div id="toy" class="item">
<h4>toy</h4>
<p id="toypara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ipsum
fugiat tempora inventore autem deserunt ratione blanditiis dicta vitae nostrum, accusantium
maxime nulla laudantium fuga vero deleniti recusandae cumque ad?Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Obcaecati eveniet dignissimos quaerat, tempora eius voluptate fugiat aperiam enim
earum culpa. Recusandae consequatur possimus impedit harum alias. Voluptas porro vitae excepturi? </p>
</div>
<div id="bool" class="item">
<h1>bool</h1>
<p id="boolpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ipsum
fugiat tempora inventore autem deserunt ratione blanditiis dicta vitae nostrum, accusantium
maxime nulla laudantium fuga vero deleniti recusandae cumque ad?</p>
</div>
</div>
</body>
</html>
9. Pseudo selectors & more designing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo selectors & more designing </title>
<style>
.container {
border: 2px solid red;
background-color: violet;
padding: 50px;
margin: 50px auto;
width: 777px;
}
a {
text-decoration: none;
color: mediumblue;
}
a:hover {
color: black;
background-color: blanchedalmond;
}
button:hover {
color: red;
background-color: blanchedalmond;
border:5px solid tomato;
}
a:visited {
background-color: red;
}
a:active {
background-color: saddlebrown;
}
.btn {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
background-color: yellow;
padding: 10px;
border: none;
cursor: pointer;
font-size: initial;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container" id="cont1">
<h3>this is my heding</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam recusandae quis illo nemo, totam dolorum ex
incidunt tempore nostrum dolore! Fugiat illo ipsa ad quos excepturi necessitatibus, ea at eum!</p>
<a href="https://www.google.com/" class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>
10. NAVIGATIONNAVIGATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<style>
.navbar {
background-color: rgb(191, 240, 142);
border-radius: 30px;
}
.navbar ul {
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 25px;
padding-top: 5px;
}
.navbar li a {
padding: 5px 10px;
text-decoration: none;
color: red;
}
.search {
float: right;
color: rgb(27, 236, 90);
padding: 10px 25px;
}
.navbar li a:hover {
background-color: seashell;
color: black;
}
.navbar input {
border: 2px solid red;
border-radius: 15px;
padding: 5px 10px;
width: 200px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li> <a href="#"> Home</a></li>
<li> <a href="#">About</a> </li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">Contact us</a> </li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
</header>
</body>
</html>
11. CSS DISPLAY PROPERTY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display property</title>
<style>
* {
box-sizing: border-box;
}
header {
margin: auto;
border: 2px solid red;
background-color: rgb(200, 226, 54);
width: 1200px;
}
img {
margin: auto;
display: block;
width: 30px;
}
h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0%;
text-align: center;
background-color: rgb(170, 236, 104);
}
.box {
border: 5px solid black;
background-color: chartreuse;
margin: 5px 0px;
padding: 25px;
box-sizing: border-box;
display: inline-block;
width: 33%;
}
.containrt {
width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<header class="top">
<img src="https://scontent.fknu1-1.fna.fbcdn.net/v/t1.0-9/96269430_2608324496148636_6067419145652142080_o.jpg?_nc_cat=100&ccb=2&_nc_sid=8bfeb9&_nc_ohc=EQGfZgiw1UMAX93qDNZ&_nc_ht=scontent.fknu1-1.fna&oh=9aca3a183139e12c70a36208421a78e6&oe=6006DE8E"
alt="">
<h3>Welcome to shivam blog</h3>
</header>
<div class="container">
<div class="box">
<h2 class="heading"> Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illum maxime aut itaque optio nisi ipsa
sit cumque ex eius mollitia delectus accusantium id nemo sed ducimus doloribus, fugit dolor voluptates
modi ab. Doloribus voluptas provident impedit amet consequatur autem, mollitia iusto quis. Eos?</p>
</div>
<div class="box">
<h2 class="heading"> Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illum maxime aut itaque optio nisi ipsa
sit cumque ex eius mollitia delectus accusantium id nemo sed ducimus doloribus, fugit dolor voluptates
modi ab. Doloribus voluptas provident impedit amet consequatur autem, mollitia iusto quis. Eos?</p>
</div>
<div class="box">
<h2 class="heading"> Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illum maxime aut itaque optio nisi ipsa
sit cumque ex eius mollitia delectus accusantium id nemo sed ducimus doloribus, fugit dolor voluptates
modi ab. Doloribus voluptas provident impedit amet consequatur autem, mollitia iusto quis. Eos?</p>
</div>
</div>
</body>
</html>
12. POSITION PROPERTY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position property</title>
<style>
.container {
border: 2px solid rgb(9, 240, 109);
background-color: rgb(218, 166, 129);
height: 5000px;
}
/* CSS position:static(default), relative, absolute, fixed, sticky; */
.box {
display: inline-block;
border: 5px solid red;
width: 150px;
height: 150px;
margin: 5px;
}
#box3 {
/* relative: relative to its normal position and will leave a gap at its normal position;
position: relative; */
/* absolute: relative to the position of its first parent */
/* position: absolute;
top: 39px;
left: 125px;*/
/* fixed: Position the element relative to the browser window
position: fixed;
right: 5px;
bottom: 3px; */
position: sticky;
top: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">MEET SHIVAM SINGH</div>
<div class="box" id="box4">4</div>
</div>
</body>
</html>
13. Visibility and z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visibility and z-index</title>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box1 {
position: relative;
top: 49px;
z-index: 35;
background-color: blue;
}
#box2 {
position: relative;
top: 14px;
/* z-index will work only for position: relative, absolute, fixed, sticky; */
z-index: 34;
/* will hide the element and the space */
/* display: none; */
/* will hide the element but will show its empty space */
/* visibility: hidden; */
background-color: red;
}
#box3 {
background-color: violet;
}
#box4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
13. Flaxbox Tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flaxbox Tutorial</title>
<style>
.container {
height: 544px;
width: 100%;
border: 3px solid red;
/* initialize the container as a flex box */
display: flex;
/* flex properties for a flex container */
/* default value of flex-direction is row */
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* flex-direction: row-reverse; */
/* default value of flex-direction is row */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
/* this is a shorthand for flex-direction and flex-wrap: */
/* flex-flow: row-reverse wrap; */
/* justify-content will justify the content in horizontal direction: */
/* justify-content: center;*/
/* justify-content: space-between; */
/* justify-content: space-evenly; */
/* justify-content: space-around; */
/* justify-content will justify the content in vertical direction: */
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: flex-start; */
/* align-items: stretch; */
}
.item {
width: 100px;
height: 100px;
background-color: rgb(23, 241, 41);
border: 5px solid purple;
margin: 10px;
padding: 3px;
/* flex properties for a flex item */
}
/* #item-1 { */
/* Higher the order, later it shows up in the container */
/* order: 2; */
/* flex-grow: 2;
flex-shrink: 2; */
/* } */
#item-2 {
/* flex-grow: 3;
flex-shrink: 3; */
flex-basis: 150px;
/* when flex-direction is set to row flex-basis will control width */
/* when flex-direction is set to column flex-basis will control height */
}
#item-3 {
/* flex: 2 2 200px; */
align-self: center;
align-self: flex-start;
align-self: flex-end;
}
</style>
</head>
<body>
<h1>This is Flaxbox Tutorial</h1>
<div class="container">
<div class="item" id="item-1">FIRST BOX</div>
<div class="item" id="item-2">SECOND BOX</div>
<div class="item" id="item-3">THIRD BOX</div>
<!-- <div class="item" id="item-4">FOURTH BOX</div>
<div class="item" id="item-5">FIFTH BOX</div>
<div class="item" id="item-6">SIXTH BOX</div> -->
</div>
</body>
</html>
14. SIZE UNIT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size unit</title>
<style>
html {
font-size: 25px;
}
.container {
font-size: 10px;
border: 3px solid red;
/* width: 350px; */
width: 100vw;
height: 100vh;
/* height: 350px; */
}
h1 {
text-align: center;
}
/* #first {
font-size: 4em;
padding: 3em;
}
#second {
font-size: 3rem;
padding: 3rem;
} */
</style>
</head>
<body>
<div class="container">
<h1 id="first">this is first heading</h1>
<h1 id="second">this is second heading</h1>
<h1 id="third">this is third heading</h1>
</div>
</body>
</html>
15. Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
.box {
background-color: rgb(235, 157, 157);
color: black;
text-align: center;
font-size: 100px;
padding: 250px;
display: none;
}
@media(max-width: 300px) {
#box-1 {
display: block;
background-color: rgb(224, 56, 14);
}
}
@media (min-width: 300px) and (max-width: 600px) {
#box-2 {
display: block;
background-color: chartreuse;
}
}
@media (min-width: 600px) and (max-width: 900px) {
#box-3 {
display: block;
background-color: rgb(17, 204, 195);
}
}
@media (min-width: 900px) {
#box-4 {
display: block;
background-color: rgb(70, 18, 192);
}
}
</style>
</head>
<body>
<div class="box" id="box-1">Mai ek iPhone hoon</div>
<div class="box" id="box-2">Mai ek Tablet hoon</div>
<div class="box" id="box-3">Mai ek Desktop Computer hoon</div>
<div class="box" id="box-4">Mai ek Widescreen Computer hoon</div>
</body>
</html>
Comments
Post a Comment