CSS CONTENTS
• Introduction Of CSS
• Levels Of Style Sheets
• Selectors Forms
• CSS transition properties
• Property Value Forms
• Font Property
• List Properties
• Color
• Alignment Of Text <Span> And <Div> Tags
• Overview And Features Of CSS
Introduction Of CSS
• CSS is the language we use to style an HTML document.
• CSS is used to style and design HTML web pages.
• CSS describes how HTML elements should be displayed.
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
• External stylesheets are stored in CSS files.
• Purpose of CSS:
It controls the layout, color, font, spacing, and overall look
of web pages.
Introduction Of CSS
Why Use CSS?
• To make websites attractive and user-friendly
• To separate content (HTML) from design
• To reuse styles on multiple pages (using external stylesheets)
Syntax:
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
CSS Syntax
• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.
Types of CSS/Levels Of Style Sheets
1. Inline CSS – written directly in the HTML tag
2. Internal CSS (Embedded CSS) – written inside
<style> tag in HTML <head>
3. External CSS – written in a separate .css file and
linked to HTML
Inline CSS
Definition: CSS written directly inside an HTML
element using the style attribute.
Usage: For styling a single element only.
Example:
<h1 style="color: red; font-size: 24px;">Hello CSS</h1>
✅ Pros: Easy for quick fixes.
✅ Cons: Hard to maintain and not reusable.
Internal CSS (Embedded CSS)
Definition: CSS written inside the <style> tag in the
<head> section of the HTML file.
Usage: For styling a single web page.
Example:
<head>
<style>
h1 {
color: green;
font-size: 28px;
}
</style>
</head>
✅ Pros: Useful for page-specific styles.
✅ Cons: Not reusable across other pages.
External CSS
Definition: CSS written in a separate .css file and linked using the <link>
tag in the HTML.
Usage: For styling multiple web pages with a consistent look.
Example:
HTML
<head>
CONTENT-
<link rel="stylesheet" href="[Link]"> HTML-PAGE
</head>
h1 {
color: blue; CSS FILE
CONTENT
font-size: 30px;
}
✅ Pros: Best for large websites; keeps code clean and manageable.
✅ Cons: Requires extra file management.
CSS Selectors/Selectors Forms
Selector Type Symbol/Example Purpose
Universal * All elements
Element h1 Specific tag
ID #id One unique element
Repeated group of
Class .class
elements
Style multiple
Grouping h1, p
elements
Descendant div p Inside relationship
Child ul > li Direct child only
Pseudo-class a:hover On specific state
Attribute input[type="text"] Based on attribute
CSS Selectors/Selectors Forms
1. Universal Selector (*): Selects all elements on a page.
Example:
*{
text-align: center;
color: red;
}
2. Element Selector (Type Selector): Selects all elements of a specific
tag.
Example:
h1 {
color: blue;
}
CSS Selectors/Selectors Forms
3. ID Selector (#): Selects an element with a specific ID. Use id="value"
in HTML.
Example:
#value {
text-align: center;
color: red;
}
4. Class Selector (.): Selects all elements with a specific class.
Use class="value" in HTML.
Example:
.value {
text-align: center;
color: red;
}
CSS Selectors/Selectors Forms
5. Group Selector: Targets multiple selectors at once (comma separated).
Example:
h1, h2, p {
color: green;
}
6. Descendant Selector: Selects elements inside other elements.
Example:
div p {
color: orange;
}
7. Child Selector (>):Selects direct children only.
Example:
ul > li {
color: purple;
}
CSS Selectors/Selectors Forms
8. Pseudo-Class Selector: Selects elements based on their state or
position.
• A pseudo-class is used to define a special state of an element. For
example, it can be used to:
– Style an element when a user moves the mouse over it
– Style visited and unvisited links differently
– Style an element when it gets focus
– Style valid/invalid/required/optional form elements.
Syntax
selector:pseudo-class {
property: value;
}
Example:
a:hover {
color: red;
}
Pseudo-class Example Description
:hover a:hover { color: red; } When mouse hovers over element.
:focus input:focus { border: blue; } When an input is focused.
:first-child p:first-child { color: green; } Selects first child in parent.
:last-child p:last-child { font-weight: bold; } Last child in parent.
:nth-child(n) li:nth-child(2) Selects the nth child (e.g., second).
Selects all <p> except those with class
:not(selector) p:not(.highlight)
highlight.
input:checked
input:checked { Checked radio buttons or checkboxes.
:checked
box-shadow: 0 0 5px green; Adds green shadow to checked boxes.
}
:visited a:visited { color: purple; } Styled after link is visited.
Pseudo-class Example Description
input:disabled
input:disabled { Disabled form elements.
:disabled
background-color: lightgrey; Styles disabled input fields.
}
input:enabled
Enabled input fields.
input:enabled {
:enabled Styles inputs that are not
border: 2px solid green;
disabled.
}
p:first-of-type
<div>
<h2>First Heading</h2>
<h2>Second Heading</h2>
</div>
First of its type inside parent.
:first-of-type Applies styling to the first <h2>
<style>
among siblings.
h2:first-of-type {
color: teal;
}
</style>
Pseudo-class Example Description
li:nth-of-type(3)
<div>
<p>First</p>
<p>Second</p>
Third element of same type.
<p>Third</p>
:nth-of-type(n) Styles the 3rd <p> among sibling <p>
</div>
elements.
<style>
p:nth-of-type(3) {
background-color: lightblue;
}
</style>
div:empty { display: none; }
<div></div>
<style>
div:empty { Selects elements with no children.
:empty height: 50px; Applies styles to <div> only if it has no
width: 50px; content inside.
background: red;
}
</style>
Pseudo-element in CSS
• A pseudo-element allows you to style specific parts of an element — like the first
letter, first line, or content before/after an element.
Pseudo-element Description
::before Inserts content before an element's content
::after Inserts content after an element's content
::first-letter Styles the first letter of a block of text
::first-line Styles the first line of a block of text
::selection Styles the part of the text selected by the user
::placeholder Styles placeholder text in input fields (HTML5)
::marker Styles the bullet or number of a list item
::backdrop Styles the background behind a modal (rare use)
Note:
• In CSS3, double colons (::) are used (e.g., ::before, ::after).
• Single colon (:) is still supported in older browsers (e.g., :before), but :: is preferred.
Examples:
<p class="quote">Wisdom is power.</p>
<style>
.quote::before {
content: "✅ ";
color: gray;
}
::selection {
background: yellow;
color: red;
}
</style>
Examples:
<p class="author">- Albert Einstein</p>
<style>
.author::after {
content: " ✅ ";
color: orange;
}
P::first-letter {
font-size: 200%;
color: blue;
}
p::first-line {
font-weight: bold;
color: green;
}
</style>
::placeholder {
color: gray;
font-style: italic;
// Styles the placeholder text in the input box.
}
li::marker {
color: red;
font-size: 1.5em;
//Styles the bullet of the list.
}
CSS Selectors/Selectors Forms
9. Attribute Selector: Selects elements with a specific attribute.
Example:
input[type="text"] {
border: 1px solid black;
}
CSS Comments
• A CSS comment is placed inside the <style> element, and
starts with /* and ends with */
Example:
<style>
/* This is a single-line comment */
p{
color: red;
}
</style>
CSS transition properties
• CSS Transitions allow you to make changes to CSS
properties happen smoothly over a period of time,
instead of happening instantly.
Why Use Transitions?
• To create smooth animations (e.g., color change,
size increase)
• To enhance user interaction
• To make UI look more modern and professional
CSS transition properties
Syntax
transition: property duration timing-function delay;
Example:
button {
background-color: blue;
color: white;
transition: background-color 0.5s ease-in;
}
utton:hover {
background-color: green;
}
CSS transition properties
Main Transition Properties in CSS
Property Description
Specifies the CSS property you
transition-property
want to animate
How long the transition takes (e.g.,
transition-duration
1s, 500ms)
transition-timing- The speed curve of the transition
function (ease, linear, ease-in, ease-out)
transition-delay Delay before the transition starts
CSS transition properties
Common Timing Functions
Value Description
linear Same speed from start to end
ease Starts slow, then fast, then slow
ease-in Starts slow and then speeds up
ease-out Starts fast and then slows down
Starts and ends slow, fast in
ease-in-out
between
CSS transition properties Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out;
}
div:hover {
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Hover over the square</h2>
<div></div>
</body>
</html>
CSS Colors
1. RGB [Link]
2. Hex
3. HSL
• CSS Background Color
Eg: <h1 style="background-color:DodgerBlue;">Hello World</h1>
• CSS Text Color
Eg:<h1 style="color:Tomato;">Hello World</h1>
• CSS Border Color
Eg:<h1 style="border:2px solid Tomato;">Hello World</h1>
RGB Value
• In CSS, a color can be specified as an RGB value, using
this formula:
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because
red is set to its highest value (255) and the others are
set to 0.
• To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
• To display white, set all color parameters to 255, like
this: rgb(255, 255, 255).
HEX Value
• In CSS, a color can be specified using a hexadecimal
value in the form:
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as
decimal 0-255).
• For example, #ff0000 is displayed as red, because red is
set to its highest value (ff) and the others are set to the
lowest value (00).
• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
HSL Value
• In CSS, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0
is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade
of gray, and 100% is the full color.
• Lightness is also a percentage. 0% is black, 50% is
neither light or dark, 100% is white
CSS Box Model
• The CSS Box Model is a fundamental concept that defines
how every HTML element is rendered on a webpage. It
describes how the size of an element is calculated using its
content, padding, border, and margin.
CSS Margins
• Margins are used to create space around elements, outside of any defined borders.
• With CSS, you have full control over the margins. There are properties for setting the margin for each side of an
element (top, right, bottom, and left).
• CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
• All the margin properties can have the following values:
1. auto - the browser calculates the margin
2. length - specifies a margin in px, cm, etc.
3. % - specifies a margin in % of the width of the containing element
4. inherit - specifies that the margin should be inherited from the parent element
Syntax:
margin: top right bottom left;
Examples:
margin: 10px; /* All sides */
margin: 10px 20px; /* Top & Bottom = 10px, Left & Right = 20px */
margin: 10px 15px 20px; /* Top = 10px, Left & Right = 15px, Bottom = 20px */
margin: 5px 10px 15px 20px; /* Top, Right, Bottom, Left */
CSS Margins
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 79px;
BACKGROUND-COLOR: RED;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of …px.</div>
</body>
</html>
CSS Borders
• In CSS, the border property adds a line around an HTML element. It helps to define
boundaries or highlight content.
• Individual Sides:
Property Usage
border-top Top border only
border-right Right border only
border-bottom Bottom border only
border-left Left border only
Syntax:
selector {
border: width style color;
}
EXAMPLE:
div {
/*This adds a 2-pixel solid black border around the <div> element.*/
border: 2px solid black;
}
CSS Borders Styles:
Style Description
solid A solid straight line
dotted A series of dots
dashed A series of dashes
double Two solid lines
groove 3D grooved look
ridge 3D ridged look
inset Looks embedded (inward)
outset Looks popped out (outward)
none No border
hidden Hidden border
CSS Borders Examples
Border Color, Width & Radius:
div {
border-color: green;
border-width: 4px;
border-style: solid;
}
border-radius
div {
border: 2px solid blue;
border-radius: 10px;
}
Shorthand Border :
p{
border: 1px dashed gray;
}
CSS Padding
• In CSS, padding is the space between the content and the border of an element. It
creates inner spacing inside the element box.
• Padding is used to create space around an element's content, inside of any defined
borders.
Syntax:
selector {
padding: value;
}
Shorthand Property: padding: top right bottom left;
Property Description
padding-top Space above the content
padding-right Space to the right of content
padding-bottom Space below the content
padding-left Space to the left of content
CSS Padding Examples:
• padding: 20px; /* All sides 20px */
• padding: 10px 15px; /* Top & Bottom = 10px, Left & Right = 15px */
• padding: 10px 20px 5px; /* Top = 10px, Left & Right = 20px, Bottom = 5px */
• padding: 5px 10px 15px 20px; /* Top, Right, Bottom, Left */
Difference: Padding vs Margin
Padding: Inside space (between content and border)
Margin: Outside space (between elements)
CSS Outline
• An outline is a line drawn outside the element's border.
• In CSS, an outline is a line drawn outside the border of an element to highlight it, often used
for accessibility or focus indication.
• The outline is outside the element’s border.
• It doesn’t take up space, unlike borders.
• Commonly used to indicate focus on input fields or links.
Syntax:
selector {
outline: width style color;
}
Property Description
outline-style Type of outline (solid, dashed, dotted…)
outline-color Color of the outline
outline-width Thickness of the outline
outline-offset Space between border and outline
outline Shorthand for setting all at once
CSS Outline Example:
button {
outline: 2px solid red;
} Style Visual Effect
solid Solid line
dotted Dotted line
dashed Dashed line
double Two solid lines
none No outline
CSS Outline Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
outline: 2px dashed blue;
outline-offset: 50px;
/*Specifies the space between an outline and the edge or border of an element*/
}
</style>
</head>
<body>
<input type="text" placeholder="Focus to see outline">
</body>
</html>
CSS Fonts
• CSS fonts are used to control the appearance of text on a webpage. You can define the font type, size,
style, weight, spacing, and more to make text look appealing and readable.
Property Description Example
font-family Sets the type of font font-family: Arial, sans-serif;
font-size Sets the size of the font font-size: 16px;
font-style Sets the style (normal, italic, oblique) font-style: italic;
font-weight Sets thickness (normal, bold, 100–900) font-weight: bold;
font-variant Enables small-caps style font-variant: small-caps;
line-height Sets space between lines line-height: 1.5;
letter-spacing Sets space between letters letter-spacing: 2px;
word-spacing Sets space between words word-spacing: 5px;
CSS Fonts Examples
• p{
font-family: "Times New Roman", serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
line-height: 1.6;
letter-spacing: 1px;
}
Or
• font: italic bold 16px/1.5 "Arial", sans-serif;
This sets:
• font-style: italic
• font-weight: bold
• font-size: 16px
• line-height: 1.5
• font-family: Arial, sans-serif
CSS Lists
• CSS allows you to style HTML lists to improve appearance and layout. There are
two main types of lists:
✅ Ordered List (<ol>) – numbered
✅ Unordered List (<ul>) – bulleted
• Common CSS Properties for Lists:
Property Description Example
list-style-type Type of bullet or numbering list-style-type: square;
Position of bullet inside or outside
list-style-position list-style-position: inside;
the list box
list-style-image:
list-style-image Use an image as the bullet
url('[Link]');
Sets all above properties in one
list-style (shorthand) list-style: square inside;
line
CSS Lists
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
Example:
ul {
list-style-image: url('[Link]');
}
• list-style-type Values:
• For unordered lists: disc, circle, square, none
• For ordered lists: decimal, upper-roman, lower-alpha, upper-latin, etc.
CSS Forms
• Forms are essential for collecting user input. CSS helps make them visually appealing and
user-friendly.
CSS Form :
• Use display: block; on <label> for better alignment.
• Use border-radius for smooth corners.
• Use :hover and :focus pseudo-classes for interactivity.
Example:
input[type=text]:focus {
background-color: lightblue;
}
input[type="submit"]:hover {
background-color: red;
}
CSS Forms Examples
form {
width: 300px;
margin: auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #aaa;
border-radius: 5px;
}
input[type="submit"] {
margin-top: 15px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
CSS Navigation Bar
• A navigation bar (navbar) is a set of links to
navigate between pages of a website. You can style
it with CSS to make it horizontal, vertical, sticky, or
responsive.
CSS Navigation Bar Example:
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
nav ul {
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
display: flex; /* Make it horizontal */
}
nav a:hover {
background-color: #555;
border-radius: 5px;
}
CSS Navigation Bar Example:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border-bottom: 1px solid #555;
/* Change the link color on hover */
li a:hover {
background-color: red;
color: white;
}
</style>
Common display Values:
Value Description
Element takes full width. Starts on a new line. (e.g., <div>, <p>,
block
<h1>)
Takes only as much width as needed. Doesn't start on a new line.
inline
(e.g., <span>, <a>)
inline-block Like inline but you can set width and height.
none Hides the element. It won't take up space on the page.
Used to create flexible layouts. Items align easily in rows or
flex
columns.
grid Makes a grid layout – items are arranged in rows and columns.
inline-flex Same as flex, but behaves like an inline element.
inline-grid Same as grid, but behaves like an inline element.
table Behaves like an HTML <table> element.
list-item Makes an element behave like a <li>.
CSS Navigation Bar Example:
/* Block Example */
div {
display: block;
}
/* Inline Example */
span {
display: inline;
}
/* Hiding an element */
h1 {
display: none;
}
/* Floating List Items: Another way of creating a horizontal navigation bar is to float the <li> elements,
and specify a layout for the navigation links*/
li {
float: left;
}
/* Add the border-right property to <li> to create link dividers */
li {
border-right: 1px solid #bbb;
}
Features of CSS
Feature Description
Styles are applied in a hierarchy (inline > internal >
Cascading Nature
external).
Selectors Target specific HTML elements for styling (e.g., .class, #id).
Controls layout via margins, borders, padding, and content
Box Model
area.
Responsive Design Adapts layout based on device using media queries.
Animation & Transition Adds movement and effects without JavaScript.
Tools like SCSS and LESS extend CSS with logic and
Preprocessor Support
variables.
Advantages of CSS:
• Separation of Content and Design: HTML handles content, CSS
handles layout and style.
• Improved Website Maintenance: Change style in one CSS file –
reflects across all pages.
• Reusability: Same CSS file can be used for multiple web pages.
• Faster Page Loading: Cleaner HTML, fewer tags, and less repetition.
• Consistent Design: Ensures uniform look and feel across the entire
site.
• Responsive Web Design: CSS supports media queries for mobile-
friendly designs.
• Time-saving: Makes development quicker by applying styles globally.
Disadvantages of CSS:
• Browser Compatibility Issues: Some styles may render
differently in different browsers.
• Complexity in Large Projects: Difficult to manage large CSS
files without proper structure.
• No Logic (Conditionals/Loops): CSS is not a programming
language – lacks logic functions.
• Overriding Issues: Confusion may arise due to the
cascading nature of styles.
Thank-you
