Add to collection(s) Add to saved
  1. No category
Uploaded by rayhancse11

CSS

advertisement 
CSS for Web Development
Types of CSS
Inline CSS
Internal CSS
External CSS
Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css practice</title>
<style>
h1{
color: blue;
(Properties)
background-color: black;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
</body>
</html>
Syntax
<head>
<link
rel="stylesheet"
href="style.css">
</head>
<body>
<h1>This is Heading 1</h1>
</body>
Style.css
h1{
color:red;
}
Background
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>css style</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<h1>welcome to my
page</h1><br>
<p>Lorem ipsum, dolor sit
amet consectetur adipisicing elit.
Facere, nostrum?</p>
</body>
</html>
h1{
color:red;
background-color: greenyellow;
}
body{
background-color:black;
background-image:
url(background1.jpg);
background-repeat: no-repeat;
background-position: center;
}
p{
color: white;
}
Border
<p class="p1">Lorem ipsum dolor
sit amet consectetur adipisicing
elit. Praesentium voluptas
accusantium accusamus.!</p><br>
.p1{
<p id="p2">Lorem, ipsum
dolor sit amet consectetur
adipisicing elit. Quasi quam fugit
sequi Asperiores quas velit
maiores sapiente!</p>
<br>
}
<p id="p3">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Recusandae
asperiores voluptas
doloremquevoluptatum in officiis,
aspernatur perspiciatis architecto
explicabo quia delectus laborum
minus.</p>
text-align: justify;
color: brown;
border-width: 5px;
border-style: solid;
border-color: black;
border-radius: 10px;
#p2{
color: greenyellow;
border-width: 2;
border-style: dashed;
border-color: blue;
border-radius: 10px;
}
#p3{
border: 5px dotted red;
border-radius: 10px;
color: darkorange;
}
Margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="div.css">
<title>Document</title>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="div2">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
</html>
.topnav {
overflow: hidden;
background-color:red;
padding-block: 10px;
margin-left: 20px;
margin-right: 50px;
margin-top: 20px;
margin-bottom: 50px;
}
.topnav a {
float: initial;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.div2{
background-color: goldenrod;
}
Text Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initialscale=1.0">
<title>text and font</title>
<link rel="stylesheet"
href="textStyle_font.css">
</head>
<body>
<h1 class="h">This is Heading </h1>
<br>
<p class="p1">Lorem ipsum dolor sit
amet consectetur adipisicing elit.
Laborum, porro voluptas. Rerum
excepturi expedita repudiandae. </p>
</body>
</html>
.h{
text-align: center;
color: blue;
background-color: bisque;
}
.p1{
background-color: aquamarine;
color: blueviolet;
text-align: justify;
text-transform: uppercase;
text-indent: 50px;
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.5;
}
Fonts
<head>
<title>text and font</title>
</head>
<link rel="stylesheet"
href="textStyle_font.css">
.h1_font{
background-color: cadetblue;
font-family: Verdana, Geneva,
Tahoma, sans-serif;
font-weight: 100;
}
<body>
.p2_font{
<h1 class="h1_font">This
Heading is for Font</h1>
background-color: darkcyan;
font-family: Arial, Helvetica,
sans-serif;
font-weight: 400;
font-style: normal;
font-size: 4vw;
<p class="p2_font">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Sunt ipsum vitae
iste. Quia tempore sunt laboriosam
quisquam, quibusdam fugiat
illo.</p>
</body>
}
Icon (fontawesome.com/google icon)
<head>
<title>text and font</title>
<!--google icon Link-->
<link
href="https://fonts.googleapis.com/css2?family=Mat
erial+Symbols+Outlined" rel="stylesheet" />
<!--google icon Link end-->
<link rel="stylesheet"
href="textStyle_font.css">
For fontawesome Icon
<!--fontawesome icon Link-->
<script
src="https://kit.fontawesome.com/2a9de76b2c.js"
crossorigin="anonymous"></script>
<!--fontawesome icon Link end-->
</head>
<body>
For Google Icon
<!--fontawesome icon-->
<i class="fa-brands fa-facebook"></i>
<!--fontawesome icon end-->
<br><br><br>
<!--google icon-->
<span class="material-symbols-outlined">
video_library
</span>
<!--google icon end-->
</body>
.fa-brands{
font-size: 100px;
color: blue;
}
.material-symbols-outlined {
font-style: normal;
font-size: 60px; /* Preferred
icon size */
color: chartreuse;
}
Link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initialscale=1.0">
<title>text and font</title>
</head>
<body>
<a href="https://www.google.com"
target="_blank">Google</a><br><br>
</body>
a{
font-family: 'Times New Roman',
Times, serif;
font-size: 50px;
color: red;
text-decoration: none;
background-color: green;
border: 5px solid black;
padding: 5px 10px;
}
a:hover{
background-color: black;
color: white;
}
a:active{
color: yellow;
}
a:visited{
color: tomato;
background-color: black;
}
List
<ul>
ul{
<li>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Possimus,
aut!</li>
<li>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Magnam,
dicta.
</li>
<li>Lorem ipsum dolor sit, amet
consectetur adipisicing elit.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Hic enim
dolorum quibusdam id est natus.</li>
<li>Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Hic enim
dolorum quibusdam id est natus.</li>
<li>Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Hic enim
dolorum quibusdam id est natus.</li>
</ol>
list-style-type: decimal;
list-style-position: outside;
}
ol{
list-style-image: url(list-items.png);
}
Table
<h2>Student Table:< /h2>
<table class="student">
<tr>
<th>Student</th>
<th>Mobile</th>
<th>Department</th>
</tr>
<tr>
<td>Romel</td>
<td>01670---</td>
<td>CSE</td>
</tr>
<tr>
<td>Rayhan</td>
<td>01722---</td>
<td>CSE</td>
</tr>
</table>
.student{
font-family: Arial, Helvetica, sansserif;
border-collapse: collapse;
width: 100%;
}
.student td, .student th {
border: 1px solid #fa0505;
padding: 5px;
text-align: center;
}
.student tr:nth-child(even){backgroundcolor: #b2e2fd;}
.student tr:hover {background-color:
#04fc04;}
.student th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #17b47b;
color: white;
}
.student th:hover{
background-color: #fa0505;
color: black;
}
display
<h1>This is a block Label
Element</h1>
<span>This is a
Inline element</span>
h1{
background-color:
darkgoldenrod;
text-align: center;
/* display: inlineblock; */
/* display: none; */
}
span{
background-color:
#04fc04;
text-align: center;
/* display: block; */
}
Width maxwidth
<div class="div1">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Dolorum vitae ducimus beatae
labore voluptates recusandae
tempore nemo eius, deserunt dolore
provident modi expedita cumque
numquam, sapiente sequ
</div>
<br>
<div class="div2">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Natus quia sit nisi aliquid
pariatur, sequi, rerum modi
deleniti odio asperiores in quasi,
maxime fuga molestias? Deleniti
assum!
</div>
.div1{
border: 5px dashed red;
background-color: #17b473;
width: 600px;
margin: auto;
}
.div2{
border: 2px dashed red;
background-color: #17b43e;
max-width: 600px;
margin: auto;
Overflow
<div class="div3">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ea
dicta modi asperiores voluptatibus
omnis eum nam officia impedit, id
cupiditate unde praesentium nemo
corporis inventore culpa non
minima nobis odit velit!
Accusantium labore exercitationem
veritatis. Dolor, officiis nam ex
natus delectus error blanditiis?
Aspernatur, odit delectus
recusandae illum deleniti mollitia
fugit quis quae repellendus nam,
non impedit blanditiis evenpedit
debitis tenetur blanditiis,
praesentium sequi similique.
Tenetur, possimus quae excepturi
earum ex a magnam asperiores non
do

</div>
.div3{
height: 200px;
width: 300px;
border: 2px solid rgb(8, 8, 8);
background-color: #0cc4fc;
overflow: visible;
/* overflow: hidden;
overflow: scroll;
overflow: auto; */
}
Position (absotule,relative,sticky,fixed)
<div class="position1">
<!-- <div class="child">
</div> -->
</div>
<div class="div3">
sticky text
</div>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Laborum, porro voluptas.
Rerum excepturi expedita repudiandae. </p>
.position1{
height: 250px;
width: 450px;
background-color: #0a7725;
/* position: absolute; */
position: relative;
/* top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; */
}
.child{
background-color: red;
height:200px;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.div3{
font-size: 20px;
background-color:black;
color: white;
margin-top: 10px;
position: sticky;
top: 0;
}
Float
<img class="image1"
src="background7.jpg" alt="educational
image">
<img class="image2"
src="background7.jpg" alt="educational
image">
<p>Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Magnam
repellendus numquam magni natus quod ab
reiciendis autem sapiente rem provident
distinctio voluptatibus dolores, in
quia quae ipsum esse inventore illum.
Sapiente iure mollitia corporis cumque
iusto dolorem? Repudiandae recusandae
voluptas cupiditataccusantium omnis
neque id aliquam distinctio animi iusto
est dolorem vel deserunt repudiandae
laboriosam voluptatibus unde? Velit,
error expedita.</p>
<br><br><br><br><br><br><br><br>
.image1{
width: 300px;
height: 200px;
margin: 5px;
float: left;
/* float: right; */
}
.image2{
width: 300px;
height: 200px;
margin: 5px;
/* float: left; */
float: right;
}
p{
/* clear: left;
clear: right; */
/* clear: both; */
}
Float
<div
<div
<div
<div
class="div1"></div>
class="div2"></div>
class="div3"></div>
class="div4"></div>
.div1{
height: 50px;
width: 200px;
background-color:
}
.div2{
height: 50px;
width: 200px;
background-color:
}
.div3{
height: 50px;
width: 200px;
background-color:
}
.div4{
height: 50px;
width: 200px;
background-color:
}
div{
float: left;
}
orangered;
rgb(52, 240, 6);
rgb(47, 0, 255);
rgb(139, 7, 172);
Download
advertisement