CSS Introduction :
SS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a
C
document written in HTML or XML. It defines how elements on a web page should be
displayed, including layout, colors, fonts, and overall design. CSS plays a vital role in making
web pages visually appealing and responsive.
Key Features of CSS
1. Separation of Content and Design:
○ Allows developers to separate HTML content from its styling.
○ Makes code easier to read, maintain, and reuse.
2. Efficiency:
○ CSS can be reused across multiple pages, reducing redundancy.
○ A single CSS file can style an entire website.
3. Flexibility and Control:
○ Offers granular control over web elements, including colors, fonts, margins, and
layout.
4. Responsive Design:
○ Enables web pages to adapt to different devices (desktop, tablet, mobile).
How CSS Works
CSS works by applying style rules to HTML elements. Each rule consists of:
S
● elector: Targets the HTML element to style.
● Declaration: Specifies the styling to apply.
Example:
h1 {
color: blue;
font-size: 24px;
}
S
● elector: h1 (targets all <h1> elements).
● Declarations: color: blue; and font-size: 24px;.
Types of CSS
1. Inline CSS:
○ Written directly in an HTML element using the style attribute.
Example:
<p style="color: red;">This is a red paragraph.</p>
2. Internal CSS:
○ Defined within a <style> tag in the <head> section of an HTML document.
Example:
<style>
body {
background-color: lightgray;
}
</style>
3. External CSS:
○ Written in a separate .css file and linked to an HTML file.
Example:
<link rel="stylesheet" href="styles.css">
Advantages of CSS:
● nhances website aesthetics and usability.
E
● Improves website performance by reducing inline styles.
● Allows easier maintenance and consistency in design.
● Supports animations and transitions.
Example: Styling a Web Page
HTML:
!DOCTYPE html>
<
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
h1>Welcome to CSS</h1>
<
<p>This page is styled using an external stylesheet.</p>
</body>
</html>
CSS (styles.css):
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}
h1 {
color: #4682b4;
text-align: center;
}
p {
font-size: 18px;
color: #2f4f4f;
}
CSS Selectors:
1. ID Selector
S
● yntax: #id
● Description: Selects the element with the specified id attribute.
Example:
<style>
#firstname {
color: blue;
}
</style>
<p id="firstname">This is a paragraph with an ID.</p>
● Explanation: The paragraph with id="firstname" will be styled with blue text.
2. Class Selector
S
● yntax: .class
● Description: Selects all elements with the specified class attribute.
Example:
<style>
.intro {
font-size: 18px;
font-weight: bold;
}
</style>
<p class="intro">This is an introductory paragraph.</p>
<div class="intro">This is an introductory div.</div>
● E
xplanation: Both the <p> and <div> elements with class="intro" will have the specified
font size and bold text.
3. Universal Selector
S
● yntax: *
● Description: Selects all elements on the page.
Example:
<style>
* {
margin: 0;
padding: 0;
}
</style>
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
● Explanation: Removes margin and padding for all elements (<p>, <h1>, etc.).
4. Element Selector
S
● yntax: element
● Description: Selects all elements of the specified type.
Example:
<style>
p {
text-align: center;
}
</style>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
● Explanation: Both <p> elements will be centered.
5. Group Selector
S
● yntax: element, element, ...
● Description: Selects all elements listed in the group.
Example:
<style>
div, p {
background-color: lightgrey;
}
</style>
<p>This is a paragraph.</p>
<div>This is a div.</div>
● Explanation: Both <div> and <p> elements will have a light grey background.
CSS Background:
1. background-color
D
● escription: Sets the background color of an element.
● Syntax: background-color: color;
Example:
<style>
div {
background-color: lightblue;
}
</style>
<div>This div has a light blue background.</div>
● Explanation: The background of the <div> will be light blue.
2. background-image
D
● escription: Sets a background image for an element.
● Syntax: background-image: url('image-url');
Example:
<style>
div {
background-image: url('example.jpg');
}
</style>
<div>This div has a background image.</div>
● Explanation: The image example.jpg will be used as the background for the <div>.
3. background-repeat
D
● escription: Specifies how the background image isrepeated.
● Syntax: background-repeat: repeat | no-repeat | repeat-x| repeat-y;
● Values:
○ repeat (default): Repeats the image both horizontally and vertically.
○ no-repeat: Displays the image only once.
○ repeat-x: Repeats the image horizontally.
○ repeat-y: Repeats the image vertically.
Example:
<style>
div {
background-image: url('example.jpg');
background-repeat: no-repeat;
}
</style>
<div>This div has a non-repeating background image.</div>
● Explanation: The image will appear once and not repeat.
4. background-attachment
D
● escription: Specifies whether the background image is fixed or scrolls with the page.
● Syntax: background-attachment: scroll | fixed;
● Values:
○ scroll (default): The background image scrolls with the page.
○ fixed: The background image stays in place when scrolling.
Example:
<style>
div {
background-image: url('example.jpg');
background-attachment: fixed;
}
</style>
<div>This div has a fixed background image.</div>
● Explanation: The background image will remain fixed even when scrolling.
5. background-position
D
● escription: Sets the starting position of the backgroundimage.
● Syntax: background-position: x y;
● Values:
○ Can be specified in keywords (top, bottom, center, etc.) or lengths (e.g., 50px
100px).
Example:
<style>
div {
background-image: url('example.jpg');
background-position: center;
}
</style>
<div>This div has a background image centered.</div>
● Explanation: The background image will be positioned at the center of the element.
6. background (shorthand property)
● D
escription: A shorthand property for setting all background properties in one
declaration.
Syntax:
background: color image position/size repeat attachment;
Example:
<style>
div {
background: lightblue url('example.jpg') center/cover no-repeat fixed;
}
</style>
<div>This div uses the shorthand background property.</div>
● Explanation:
○ lightblue: Background color.
○ url('example.jpg'): Background image.
○ center/cover: Background position and size.
○ no-repeat: Background repeat.
○ fixed: Background attachment.
CSS Margin :
1. margin
● D
escription: A shorthand property for setting all four margin properties (margin-top,
margin-right, margin-bottom, margin-left) in one declaration.
● Syntax: margin: value;
V
○ alues can be in units (px, %, em, etc.) or keywords (auto).
○ Example combinations:
■ margin: 10px; (All sides 10px)
■ margin: 10px 20px; (Top & bottom 10px, left & right 20px)
■ margin: 10px 20px 30px; (Top 10px, left & right 20px, bottom 30px)
■ margin: 10px 20px 30px 40px; (Top, right, bottom, left)
Example:
<style>
div {
margin: 20px;
}
</style>
<div>This div has a 20px margin on all sides.</div>
2. margin-bottom
D
● escription: Sets the space below an element.
● Syntax: margin-bottom: value;
Example:
<style>
div {
margin-bottom: 30px;
}
</style>
<div>This div has a 30px margin below it.</div>
3. margin-left
D
● escription: Sets the space to the left of an element.
● Syntax: margin-left: value;
Example:
<style>
div {
margin-left: 40px;
}
</style>
<div>This div has a 40px margin on the left side.</div>
4. margin-right
D
● escription: Sets the space to the right of an element.
● Syntax: margin-right: value;
Example:
<style>
div {
margin-right: 50px;
}
</style>
<div>This div has a 50px margin on the right side.</div>
5. margin-top
D
● escription: Sets the space above an element.
● Syntax: margin-top: value;
Example:
<style>
div {
margin-top: 15px;
}
</style>
<div>This div has a 15px margin above it.</div>
Examples of All Margin Properties Together
<style>
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
</style>
<div>This div has specific margins for each side.</div>
CSS Padding
● D
efinition: The padding property is a shorthand used to set all four padding values (top,
right, bottom, and left) in one declaration.
Syntax:
padding: top right bottom left;
○ You can specify 1-4 values:
One value: Applies the same padding to all sides.
padding: 10px; /* All sides = 10px */
Two values: First value for top and bottom, second for left and right.
padding: 10px 20px; /* Top & Bottom = 10px, Left & Right = 20px */
Three values: First value for top, second for left & right, third for bottom.
padding: 10px 20px 30px; /* Top = 10px, Left & Right = 20px, Bottom = 30px */
Four values: Top, right, bottom, and left, respectively.
padding: 10px 20px 30px 40px; /* Top = 10px, Right = 20px, Bottom = 30px, Left = 40px */
Example:
<div style="padding: 15px 25px;">
This div has 15px padding on top and bottom, and 25px on left and right.
</div>
Padding-Top
● Definition: Sets the padding only on the top of anelement.
Syntax:
padding-top: value;
Example:
<div style="padding-top: 20px;">
This div has 20px padding on the top.
</div>
Padding-Right
● Definition: Sets the padding only on the right sideof an element.
Syntax:
padding-right: value;
Example:
<div style="padding-right: 10px;">
This div has 10px padding on the right.
</div>
Padding-Bottom
● Definition: Sets the padding only on the bottom ofan element.
Syntax:
padding-bottom: value;
Example:
<div style="padding-bottom: 30px;">
This div has 30px padding on the bottom.
</div>
Padding-Left
● Definition: Sets the padding only on the left sideof an element.
Syntax:
padding-left: value;
Example:
<div style="padding-left: 25px;">
This div has 25px padding on the left.
</div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Example</title>
<style>
.box1 {
padding: 20px;
background-color: lightblue;
}
.box2 {
padding-top: 15px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 5px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box1">Padding applied to all sides (20px).</div>
<div class="box2">
Padding: Top (15px), Right (25px), Bottom (10px), Left (5px).
</div>
</body>
</html>
CSS BOX Model :
he CSS Box Model is a fundamental concept in web design and layout. It describes how every
T
HTML element is rendered as a rectangular box, consisting of the following parts (from inside
out):
1. Content
T
● he innermost part of the box.
● Contains the actual text, image, or other content.
● Example: Text in a paragraph, image in an <img> tag.
2. Padding
T
● he space between the content and the border.
● Increases the spacing inside the box.
● Padding is transparent and can be set for individual sides or all sides.
Example CSS:
div {
padding: 10px; /* Adds 10px padding to all sides */
}
3. Border
A
● line surrounding the padding (or content if padding is not set).
● Borders can have different styles, widths, and colors.
Example CSS:
div {
border: 2px solid black; /* A solid 2px black border */
}
4. Margin
T
● he outermost layer of the box.
● Defines the space between the element's border and neighboring elements.
● Margins are also transparent.
Example CSS:
div {
margin: 15px; /* Adds 15px space around the element */
}
Box Model Properties
The CSS box model is controlled using specific properties:
1. Width and Height:
○ Set the size of the content area.
Example:
div {
width: 200px;
height: 100px;
}
2. Padding:
○ Adds space inside the border.
Example:
div {
padding: 20px;
}
3. Border:
○ Defines the border around the element.
Example:
div {
border: 5px dashed red;
}
4. Margin:
○ Creates space outside the border.
Example:
div {
margin: 30px;
}
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<style>
.box {
width: 300px;
height: 150px;
margin: 20px;
padding: 15px;
border: 5px solid blue;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
This is a box demonstrating the CSS Box Model.
</div>
</body></html>
Box Sizing
y default, the width and height properties apply only to the content area. To include padding
B
and border in the specified dimensions, use the box-sizing property:
Example:
div {
box-sizing: border-box; /* Includes padding and border in width and height */
}
CSS Links
CSS provides styles for links usingpseudo-classesthat represent the various states of a link.
Pseudo-classes for Links
1 . a :link: Unvisited link.
2. a:visited: Visited link.
3. a:hover: Link when hovered by the mouse.
4. a:active: Link when clicked.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Links</title>
<style>
a:link {
color: blue; /* Unvisited link */
text-decoration: none;
}
a:visited {
color: purple; /* Visited link */
}
a:hover {
color: red; /* Link on hover */
text-decoration: underline;
}
a:active {
color: orange; /* Link when clicked */
}
</style>
</head>
<body>
<a href="https://example.com">Visit Example.com</a>
</body>
</html>
CSS Lists
CSS allows styling for ordered (<ol>) and unordered (<ul>) lists, as well as their items (<li>).
Key Properties
1 . list-style-type: Specifies the type of marker (e.g.,disc, square, decimal).
2. list-style-position: Specifies whether the marker is inside or outside the content box.
3. list-style: Shorthand for setting all list styles.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Lists</title>
<style>
ul {
list-style-type: square; /* Square bullets */
padding-left: 20px; /* Indentation */
}
ol {
list-style-type: upper-roman; /* Roman numerals */
margin-left: 30px; /* Indentation */
}
li {
color: darkgreen; /* Color for list items */
}
</style>
</head>
<body>
<h3>Unordered List</h3>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>
</body>
</html>
CSS Tables
SS enhances the appearance of HTML tables with properties to style borders, spacing,
C
alignment, and more.
Key Properties
1 . order: Specifies border style, width, and color.
b
2. border-collapse: Collapses table borders into a singleborder.
3. padding: Adds space inside table cells.
4. text-align: Aligns text in cells (left, center, right).
5. background-color: Sets background color for cellsor rows.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table</title>
<style>
table {
width: 50%;
border-collapse: collapse; /* Collapsed borders */
margin: 20px 0;
}
th, td {
border: 1px solid black; /* Cell borders */
padding: 10px; /* Cell padding */
text-align: center; /* Center alignment */
}
th {
background-color: lightblue; /* Header background */
font-weight: bold; /* Bold header text */
}
tr:nth-child(even) {
background-color: #f2f2f2; /* Alternate row background */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>$3</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS Nav bar:
navigation bar (nav bar) is a fundamental component in web design, providing links to
A
navigate through different sections of a website. They can be designed horizontally or vertically.
Horizontal Navigation Bar Using Float
A horizontal nav bar arranges links side by side across the width of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Nav Bar</title>
<style>
.navbar {
background-color: #333;
overflow: hidden; /* Clear floating elements */
}
.navbar a {
float: left; /* Floats links horizontally */
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Vertical Navigation Bar
A vertical nav bar stacks the links one below the other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Nav Bar</title>
<style>
.navbar {
width: 200px; /* Fixed width for the vertical nav bar */
background-color: #333;
height: 100vh; /* Full height */
}
.navbar a {
display: block; /* Makes the links take full width */
color: white;
padding: 14px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Explanation
1. Horizontal Navigation Bar:
U
○ ses float: left; to align links horizontally.
○ overflow: hidden; is applied to the parent to prevent layout issues with floating
elements.
2. V
ertical Navigation Bar:
U
○ ses display: block; to make links span the full width.
○ Adds width to restrict the navbar's size and height to span the full viewport height.
Dropdown Menu
dropdown menuis a navigation element that displays a list of links when a user hovers over
A
or clicks on a parent item. Dropdown menus are commonly used for organizing sub-categories in
navigation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu</title>
<style>
/* Basic styling for the navigation bar */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
padding: 14px 20px;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/* Dropdown menu */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="dropdown-content">
<a href="#web">Web Design</a>
<a href="#seo">SEO</a>
<a href="#marketing">Marketing</a>
</div>
</div>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Explanation
1. Parent Item (Dropdown Button):
The .dropdown container is floated like the other links in the navbar.
○
○ .dropbtn styles the button to look like a normal link.
2. Dropdown Content:
display: none; hides the dropdown by default.
○
○ The menu appears (display: block;) when the user hovers over the .dropdown.
3. P
ositioning:
○ T he dropdown is positioned using position: absolute; relative to the .dropdown
container.
○ z-index ensures it appears above other content.
4. Interactivity:
○ H
over effect for both the parent link (.dropdown:hover .dropbtn) and dropdown
links (.dropdown-content a).
