3.
Backgrounds (CSS)
Backgrounds are used to set the background of an element.
We can add color, image, position, size, and repeat to the background.
Background Properties
1. background-color
Sets the background color.
div {
background-color: lightblue;
}
2. background-image
Adds an image as background.
div {
background-image: url("[Link]");
}
3. background-repeat
Controls image repetition.
Values:
repeat (default)
no-repeat
repeat-x
repeat-y
div {
background-repeat: no-repeat;
}
4. background-position
Sets image position.
Values:
left
right
center
top
bottom
div {
background-position: center;
}
5. background-size
Sets size of background image.
Values:
auto
cover
contain
div {
background-size: cover;
}
Shorthand Property
You can write all properties in one line:
div {
background: lightblue url("[Link]") no-repeat center;
}
Full Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
}
div {
width: 300px;
height: 200px;
background: yellow url("[Link]") no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Background properties in CSS are used to set color and images as the background of an element.
Border (CSS)
Border is used to create a line around an HTML element.
Border Properties
1. border-width
Sets the thickness of the border.
div {
border-width: 3px;
}
2. border-style
Defines the style of the border.
Common values:
solid
dashed
dotted
double
groove
ridge
none
div {
border-style: solid;
}
3. border-color
Sets the color of the border.
div {
border-color: red;
}
Shorthand Property
You can combine all three properties in one line:
div {
border: 2px solid black;
}
👉 Format:
border: width style color;
Rounded Corners (border-radius)
Used to make rounded corners.
div {
border-radius: 10px;
}
To make a circle:
div {
border-radius: 50%;
}
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px dashed blue;
padding: 10px;
}
</style>
</head>
<body>
<p>This is a bordered paragraph.</p>
</body>
</html>
Border in CSS is used to create and style a line around an HTML element.
6. Colors (CSS)
Colors in CSS are used to set the color of text, background, border, and other elements.
Ways to Define Colors
1. Color Name
p {
color: red;
}
2. HEX Value
Format: #RRGGBB
p {
color: #ff0000;
}
👉 #ff0000 means red.
3. RGB Value
Format: rgb(red, green, blue)
p {
color: rgb(255, 0, 0);
}
👉 Red = 255, Green = 0, Blue = 0
4. RGBA Value (With Transparency)
Format: rgba(red, green, blue, alpha)
p {
color: rgba(255, 0, 0, 0.5);
}
👉 alpha value range:
0 → Fully transparent
1 → Fully visible
Using Colors in Different Properties
Text Color
p {
color: blue;
}
Background Color
div {
background-color: yellow;
}
Border Color
div {
border: 2px solid green;
}
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
background-color: blue;
}
p {
color: #333333;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This is color example.</p>
</body>
</html>
Colors in CSS are used to change the appearance of text, background, and borders using color names, HEX,
RGB, or RGBA values.
7. Shadows (CSS)
Shadows are used to add shadow effects to text and boxes (elements) in CSS.
There are two types:
1. Text Shadow
2. Box Shadow
1. Text Shadow
Used to add shadow to text.
Syntax:
text-shadow: horizontal vertical blur color;
Example:
h1 {
text-shadow: 2px 2px 5px gray;
}
👉
2px → horizontal shadow
2px → vertical shadow
5px → blur effect
gray → shadow color
2. Box Shadow
Used to add shadow to elements like div, img, button.
Syntax:
box-shadow: horizontal vertical blur spread color;
Example:
div {
box-shadow: 4px 4px 10px gray;
}
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 4px red;
}
div {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 15px gray;
}
</style>
</head>
<body>
<h1>Shadow Text</h1>
<div></div>
</body>
</html>
Shadows in CSS are used to add shadow effects to text using text-shadow and to elements using box-
shadow.
8. Text (CSS)
Text properties in CSS are used to control the appearance of text inside an HTML element.
Important Text Properties
1. color
Sets the text color.
p {
color: blue;
}
2. text-align
Aligns the text.
Values:
left
right
center
justify
p {
text-align: center;
}
3. text-decoration
Adds decoration to text.
Values:
none
underline
overline
line-through
p {
text-decoration: underline;
}
4. text-transform
Changes text case.
Values:
uppercase
lowercase
capitalize
p {
text-transform: uppercase;
}
5. letter-spacing
Adds space between letters.
p {
letter-spacing: 3px;
}
6. line-height
Sets space between lines.
p {
line-height: 1.8;
}
7. font-family
Changes font style.
p {
font-family: Arial;
}
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px 5px gray;
}
p {
letter-spacing: 2px;
line-height: 1.6;
color: blue;
}
</style>
</head>
<body>
<h1>CSS Text</h1>
<p>This is a simple text formatting example.</p>
</body>
</html>
Text properties in CSS are used to control the color, alignment, spacing, decoration, and style of text.
9. Transformations (CSS)
Transformations are used to change the position, size, or shape of an element.
It is done using the transform property.
Types of Transformations
1. translate()
Moves the element from its original position.
div {
transform: translate(50px, 20px);
}
👉 Moves 50px right and 20px down.
2. rotate()
Rotates the element.
div {
transform: rotate(45deg);
}
👉 Rotates 45 degrees.
3. scale()
Increases or decreases size.
div {
transform: scale(1.5);
}
👉 Makes element 1.5 times bigger.
4. skew()
Tilts the element.
div {
transform: skew(20deg);
}
👉 Skews (tilts) the element.
Multiple Transformations
You can combine them:
div {
transform: rotate(30deg) scale(1.2);
}
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background-color: lightblue;
}
div:hover {
transform: rotate(20deg) scale(1.1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
👉 When you move the mouse over the box, it rotates and grows.
Transformations in CSS are used to move, rotate, scale, or skew an element using the transform property.
10. Transitions (CSS)
Transitions are used to create smooth changes between one style and another.
Instead of changing immediately, the change happens gradually over a period of time.
Why We Use Transitions?
To make the webpage look smooth and attractive when a property changes (like color, size, position).
Syntax
transition: property duration timing-function delay;
Simple Format:
transition: property duration;
Example 1: Color Change
div {
width: 150px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
}
div:hover {
background-color: red;
}
👉 When mouse moves over the box, the color changes smoothly in 0.5 seconds.
Example 2: Size Change
div {
width: 100px;
height: 100px;
background-color: green;
transition: 0.5s;
}
div:hover {
transform: scale(1.2);
}
👉 The box grows smoothly.
Timing Functions
ease (default)
linear
ease-in
ease-out
ease-in-out
Example:
transition: all 1s ease-in;
Transitions in CSS are used to create smooth animation effects when a property changes over a specified time.
11. Animations (CSS)
Animations are used to create moving or changing effects in elements automatically.
Unlike transitions, animations do not need hover or click. They can run continuously.
Steps to Create Animation
1. Define animation using @keyframes
2. Apply animation to an element using animation property
1. @keyframes Rule
Used to define the animation.
@keyframes move {
from {
left: 0px;
}
to {
left: 200px;
}
}
2. Applying Animation
div {
position: relative;
animation: move 2s infinite;
}
👉
move → animation name
2s → duration
infinite → repeat forever
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes moveBox {
0% { left: 0px; }
50% { left: 150px; }
100% { left: 0px; }
}
div {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
animation: moveBox 3s infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
👉 The box moves left and right continuously.
Important Animation Properties
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
Example:
animation: moveBox 3s ease-in-out 1s infinite alternate;
Difference Between Transition and Animation
Transition Animation
Needs a trigger (hover) Runs automatically
Simple effects Complex effects
Uses transition Uses @keyframes
Animations in CSS are used to create automatic moving or changing effects using @keyframes and the
animation property.
Bootstrap Framework
Bootstrap is a free and open-source CSS framework used to design responsive and mobile-friendly
websites easily.
It includes:
Pre-designed CSS styles
Responsive grid system
Ready-made components
JavaScript plugins
Why Use Bootstrap?
Saves development time
Mobile-first design
Easy to use
Responsive layout
Consistent design
How to Add Bootstrap?
Using CDN (Easy Method)
Add this inside <head>:
<link href="[Link]
rel="stylesheet">
Important Features of Bootstrap
1. Grid System
Bootstrap uses a 12-column grid system.
Example:
<div class="container">
<div class="row">
<div class="col-6 bg-primary">Column 1</div>
<div class="col-6 bg-success">Column 2</div>
</div>
</div>
👉 Divides page into equal columns.
2. Buttons
<button class="btn btn-primary">Click Me</button>
<button class="btn btn-success">Submit</button>
3. Forms
<input type="text" class="form-control" placeholder="Enter Name">
4. Navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Website</a>
</nav>
5. Cards
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some example text.</p>
</div>
</div>
Advantages
Fast development
Responsive by default
Cross-browser compatible
Large community support
Bootstrap is a front-end framework used to create responsive and mobile-first websites quickly using
predefined CSS classes and components.