CSS (Cascading Style Sheets)
1. Introduction to CSS
• CSS (Cascading Style Sheets) is used to style and format web pages.
• It defines how HTML elements are displayed on screen, paper, or in other media.
• CSS separates content (HTML) from presentation (design).
Advantages of CSS:
1. Saves time (same CSS can be reused across pages).
2. Better page loading speed (external CSS is cached).
3. Cleaner and more maintainable code.
4. Better control over layout and design.
Types of CSS
[Link] CSS – Applied directly to an element using the style attribute.
<p style="color: blue; font-size: 18px;">This is blue text.</p>
Explanation: Styles are applied directly to the <p> element.
[Link] CSS – Written inside a <style> tag within the <head>.
Example: <head>
<style>
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>This heading is green and centered.</h1>
</body>
Explanation: The <style> block applies CSS rules to elements inside the same HTML page.
[Link] CSS – Stored in a .css file and linked using <link>.
Example: <HTML >
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p class="highlight">This text is styled using external CSS.</p>
</body>
[Link]
.highlight {
background-color: yellow;
font-weight: bold;
Explanation: The external stylesheet allows consistent styling across multiple HTML pages.
CSS Syntax
A CSS rule consists of:
• Selector (targets an element)
• Declaration block (property and value pairs)
selector { property: value; }
Example:
p { color: red; font-size: 16px; }
• p = selector (targets all <p> elements).
• color: red; = property and value pair.
• font-size: 16px; = sets text size.
CSS Selectors
Selectors are used to target HTML elements.
[Link] Selector
p { color: blue; }
Targets all <p> tags.
[Link] Selector (.)
.title { font-size: 20px; }
Applied to elements with class="title".
[Link] Selector (#)
#main { background-color: lightgray; }
Applied to the element with id="main".
CSS Colors and Backgrounds
body {
background-color: lightblue;
}
h1 {
color: navy;
background-color: yellow;
}
Explanation: The background color of the page is light blue, and <h1> has navy text with a yellow
background.
Fonts and Text Styling
P {
font-family: Arial,
font-size: 18px;
font-style: italic;
font-weight: bold;
text-align: center;
}
Explanation: Text is bold, italic, 18px, centered, and uses Arial font.
[Link] Form Notes
Forms in HTML are used to collect user input. CSS helps to style forms to make them user-
friendly and attractive.
Basic Form Elements
• <form> → Container for form controls
• <input> → Used for text, password, email, radio, checkbox, etc.
• <label> → Describes the input field
• <textarea> → Multi-line text input
• <button> → Submit or reset
Common CSS Properties for Forms
Property Description
width Controls input field size
padding Adds space inside input
margin Adds space outside input
border Defines border style
border-radius Makes rounded corners
background-color Adds background color
color Text color
font-size Size of text
:focus Style when user clicks inside input
:hover Style when mouse moves over button
Simple Example:
<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 300px;
margin: 20px auto;
padding: 20px;
border: 2px solid #4CAF50;
border-radius: 10px;
background-color: #f9f9f9;
}
input[type=text], input[type=password], input[type=email] {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc; border-radius: 5px; }
button {
background-color: #4CAF50;
color: white;
padding: 10px;
width: 100%;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover
{
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form>
Email:<input type="email" id="email" placeholder="Enter your email">
Password:<input type="password" id="pwd" placeholder="Enter password">
<button type="submit">Login</button>
</form>
</body>
</html>
[Link] Box Model Notes
The CSS Box Model is the foundation of web layout.
Every HTML element is considered as a box, and this model describes how the size
and space of each box is calculated.
Parts of the Box Model:
1. Content
o The actual text, image, or data inside the element.
o Example: Paragraph text inside <p>.
2. Padding
o Space between the content and the border.
o Transparent, pushes border outward.
3. Border
o A line surrounding the padding and content.
o Can have style, color, and thickness.
4. Margin
o Space outside the border, separating the element from others.
Properties
Part Property Examples
Content width, height
Padding padding, padding-top, padding-right, padding-bottom, padding-left
Border border, border-width, border-style, border-color, border-radius
Margin margin, margin-top, margin-right, margin-bottom, margin-left
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px; /* Content width */
padding: 20px; /* Space around content */
border: 5px solid blue; /* Border thickness and color */
margin: 30px; /* Space outside the box */
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box">
This is an example of CSS Box Model.
</div>
</body>
</html>
[Link] Animation Notes
CSS animation is used to add movement and effects to HTML elements without
JavaScript.
It allows you to gradually change styles (like color, size, position) over time.
1. Properties of CSS Animation
Property Description
@keyframes Defines the animation (stages of style changes).
animation-name Name of the animation (linked with @keyframes).
animation-duration How long the animation runs (e.g., 2s, 5s).
animation-delay Delay before animation starts.
animation-iteration-count Number of times animation repeats (1, infinite).
animation-direction Direction of animation (normal, reverse, alternate).
animation-timing-
Speed curve (linear, ease, ease-in, ease-out).
function
Defines style before/after animation (forwards, backwards,
animation-fill-mode
both).
2. Syntax
@keyframes animationName {
from { property: value; }
to { property: value; }
}
Simple Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Define animation */
@keyframes changeColor {
from {background-color: red; } to { background-color: yellow; }
}
.box {
width: 150px;
height: 150px;
background-color: red;
animation-name: changeColor;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h2>CSS Animation Example</h2>
<div class="box"></div>
</body>
</html>
In this example, the box changes its color from red → yellow → red continuously.
*********************************************************************
