Introduction to CSS
10 April 2025 01:43 PM
CSS stands for cascading style sheet it introduced in 1995 by Hakon wium lie at W3C(world wide web
consortium)
Q: Why we are using CSS
Ans: CSS are used to decorate or style the HTML layout/structure.
Its improve user experience of a web page layout
Q: How to use CSS with HTML
There are three ways to link CSS into HTML
01: Inline CSS :
syntax:
<p style="property: value; property2: value; property3: value;…"></p>
02: Internal CSS
syntax:
<head>
<style>
selector{
property: value;
property2: value;
….
}
</style>
</head>
CSS Page 1
03: External CSS
a:) Create a CSS file like filename.css
b:) link that file into html head section
syntax:
CSS Page 2
CSS selectors
15 April 2025 01:29 PM
Mainly five types of Selectors are available in CSS
01: Universal selector : *{ property: value}
Note: Apply properties on every elements
02: Tag selector : h1{property: value}
03: ID selector : #idName{property: value}
04: Class selector : .className{property: value}
CSS Page 3
05: attribute selector: a[href=""]{property: value}
So many selectors are used in different scenario
Child selector parentSelector childSelector {property: value}
CSS Page 4
Text Property in CSS
18 April 2025 01:22 PM
color : colorName || #code (0-9,A-F) -> #1122ef || rgb(red,green,blue) ->
0-255 || rgba(red,green,blue,alpha)-> 0-255 & 0-1
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: #FFD63A;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
Example: 02
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: rgba(255, 0,0,0.1);
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
text-align: normal || left || center || right || justify
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align: justify;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Voluptatibus ea ut, repudiandae fuga veritatis omnis ipsum.
CSS Page 5
adipisicing elit. Voluptatibus ea ut, repudiandae fuga veritatis omnis ipsum.
Reprehenderit quo dignissimos odio!</h1>
</body>
text-transform: uppercase || lowercase || capitalize
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
text-indent: 100px;
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.indent{
text-indent: 85px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quo
delectus, quaerat nisi laborum ducimus ut mollitia fugit ullam
voluptatibus.</p>
<p class="indent">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea, dolor temporibus ipsum ducimus quis dolorem doloribus eum laborum
possimus, amet, numquam nulla earum modi distinctio. Unde doloribus blanditiis
iste reprehenderit.</p>
</body>
text-decoration-line: none || underline || overline || line-through
text-decoration-style: solid || dashed || dotted || double || wavy
text-decoration-color: colorName || #code || rgb(red,green,blue) ||
rgba(255,0,0)
:: short hand property is text-decoration
CSS Page 6
:: short hand property is text-decoration
text-decoration: line style color;
Ex:
text-decoration : underline dotted red;
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: red;
text-decoration: overline dashed #998877;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>
Eaque</span> quo delectus, quaerat nisi laborum ducimus ut mollitia fugit
ullam voluptatibus.</p>
<p class="indent">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea, dolor temporibus ipsum ducimus quis dolorem doloribus eum laborum
possimus, amet, numquam nulla earum modi distinctio. Unde doloribus blanditiis
iste reprehenderit.</p>
</body>
text-shadow: x-axis y-axis blur color;
Example: 01
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-shadow: -5px -5px 7px red;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>
Eaque</span> quo delectus, quaerat nisi laborum ducimus ut mollitia fugit
ullam voluptatibus.</p>
<p class="indent">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea, dolor temporibus ipsum ducimus quis dolorem doloribus eum laborum
possimus, amet, numquam nulla earum modi distinctio. Unde doloribus blanditiis
iste reprehenderit.</p>
</body>
CSS Page 7
Font property
21 April 2025 01:07 PM
Font-size: 32px;
Example
<style>
p{
font-size: 32px;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Font-weight: 100-900 || bold || bolder || lighter
Example
<style>
p{
font-weight: 900;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Font-style: italic || oblique;
Example:
<style>
p{
font-style: oblique;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Font-variant: small-caps;
Example:
<style>
p{
font-variant: small-caps;
CSS Page 8
font-variant: small-caps;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Font-family: Arial,sans-sarif;
Example:
<style>
p{
font-family: cursive;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Line-height: 1 | 1.0
Example
<style>
.txt{
line-height: 0.2;
}
</style>
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
sequi officiis eum provident quam sint quasi corrupti cupiditate voluptate
nihil, amet recusandae voluptatibus tempore, unde optio soluta dicta a
corporis.</p>
Letter-spacing: px | %
Example:
.txt{
letter-spacing: 30px;
}
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
sequi officiis eum provident quam sint quasi corrupti cupiditate voluptate
nihil, amet recusandae voluptatibus tempore, unde optio soluta dicta a
corporis.</p>
Word-spacing
Example
.txt{
CSS Page 9
.txt{
word-spacing: 30px;
}
<p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
sequi officiis eum provident quam sint quasi corrupti cupiditate voluptate
nihil, amet recusandae voluptatibus tempore, unde optio soluta dicta a
corporis.</p>
CSS Page 10
List Property In CSS
21 April 2025 01:41 PM
List-style-type: upper-alpha || lower-alpha || upper-roman || lower-roman ||
decimal || decimal-leading-zero || square || disc || circle || lower-greek || none
Example:
<style>
ul li{
list-style-type: circle;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
List-style-position: inside || outside
Example
<style>
ul li{
background-color: red;
list-style-type: circle;
list-style-position: inside;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
List-style-image: url(img_path)
Example
<style>
ul li{
background-color: red;
list-style-type: circle;
list-style-position: inside;
list-style-image: url('list.png');
}
</style>
<ul>
<li>One</li>
<li>Two</li>
CSS Page 11
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
sort Hand list Property
list-style: type style image;
list-style: disc inside url("list.png");
CSS Page 12
Display Property
22 April 2025 01:32 PM
display: none,block,inline,inline-block,list-item,flex;
CSS Page 13
Position Property
24 April 2025 01:10 PM
Position: static | sticky |absolute | relative | fixed
z-index
Top
Bottom
Left
Right
CSS Page 14
CSS Page 15
CSS Page 16
Box Property
25 April 2025 01:10 PM
Width
:: min-width
:: max-width
Height
:: min-height
:: max-height
Border
border-width: 5px
border-style: none,solid,dotted,dashed,double,ridge,groove,inset,outset
border-color: red,#code,rgb(red,green,blue)
OR
border-top-width:
border-top-style:
border-top-color:
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
:: Short-hand Property
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;
border: width style color; // all four sides border
CSS Page 17
Border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius: 100px; // all four side
Outline
outline-width: 5px;
outline-style: none,solid,dashed,double,dotted
outline-color:
outline-offset:
CSS Page 18
Background
Margin
Padding
Box-shadow
Overflow
CSS Page 19
