CSS

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 1
Engineering
 Lecture Structure

05
Outline & Objectives
Minutes

05
Recap of Previous Lecture
Minutes

30 Delivery of Actual Content as per

Minutes Lesson Plan

05
Industry Relevance
Minutes

10
Minutes Interactive Activities

02
Importance of Discipline
Minutes

03
Recording of Attendance
Minutes

Reference: Office Order No. Provost/092023135, Date: 18th September 2023

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 2
Engineering
 Outline
1. Introduction to CSS
• What is CSS?
• Importance of CSS
2. Basics of CSS
• Basic Syntax & Structure
• Class & ID
• Types of CSS
• Multiple selector, Multilevel selector
3. Background
4. Fonts & Text

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 3
Engineering
 Outline (Cont.)
5. Box Model
• Margin, Border, Padding
6. List
• List Type, List with Image, List Position
7. Links
8. CSS Positioning
9. CSS Layers
10. CSS Floating Property
11. Introduction to CSS3

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 4
Engineering
 What is CSS?
 Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
 CSS defines layout of HTML documents. For example, CSS covers
Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 5
Engineering
 Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files.
 External style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one single file.
 Advantages :
• Improves Website Presentation
• External CSS makes Updates Easier and Smoother
• External CSS helps Web Pages Load Faster
 Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 6
Engineering
 Basic Syntax of CSS
 A CSS rule has two main parts: a selector, and one or more declarations
Selector Declaration 1 Declaration 2

h1 {color: blue; font-size: 12px;}

property value property value

 The selector can be HTML element, id or class.

 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a
value.
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 7
Engineering
 The “id” selector
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined
with a "#“ in css.
 The style rule below will be applied to the element with id="para1":

HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }

<h1> Output
How are you Hello Friends
</h1> How are you
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 8
Engineering
 The “class” selector
 The class selector is used to specify a style for a group of elements.
 The class selector uses the HTML class attribute, and is defined with a ".“
in css.

HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 9
Engineering
Different ways to write CSS
 There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 10
Engineering
1) Inline Style
 It is possible to place CSS right in your HTML code, and this method
of CSS usage is referred to as inline css.
 Inline CSS has the highest priority out of external, internal, and
inline CSS.
 This means that you can override styles that are defined in external
or internal by using inline CSS.
 If you want to add a style inside an HTML element all you have to do
is specify the desired CSS properties with the style HTML attribute.
 Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 11
Engineering
2) Internal Style Sheet
 This type of CSS is only for Single Web Page.
 When using internal CSS, we must add a new tag, <style>, inside the <head>
tag.
 The HTML code below contains an example of <style>'s usage.
Example:
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 12
Engineering
3) External Style Sheet
 When using CSS it is preferable to keep the CSS separate from
your HTML.
 Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
 External CSS is a file that contains only CSS code and is saved with
a ".css" file extension.
 This CSS file is then referenced in your HTML using the <link>
instead of <style>.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 13
Engineering
 3) External Style Sheet (Cont.)
 Example :

Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” type=“text/css” }
href=“test.css”> p
</head> {
<body> color : blue;
}
<p> Hello Friends </p>
<p id=“para1”> How are you? </p> Output
Hello Friends
</body> How are you?
</html>

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 14
Engineering
3) External Style Sheet (Cont.)
 Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in
a single CSS file.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 15
Engineering
 Assign Multiple Classes
We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html test.css
<html> . class1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head> . class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1>
Output
</body>
</html>
How are you?
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 16
Engineering
 Multiple Selection
 We can apply same css to multiple selectors using comma separated selector list, for example :

Demo.html test.css
<html> p, h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>

<p> Hello Friends </p>

<h1> How are you? </h1> Output
Hello Friends
</body>
</html>
How are you?

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 17
Engineering
 Multi-level Selection
 We can use hierarchical path to target html element by space separated element/class/id names, for example :

Demo.html test.css
<html> div h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1> Output
</div> Hello Friends…
</body>
How are you?
</html>

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 18
Engineering
 Types of
Selector
 Simple selectors (select elements based on name, id,
class)
 Combinator selectors (select elements based on a
specific relationship between them)
• A CSS selector can contain more than one simple selector.
Between the simple selectors, we can include a combinator.
• There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 19
Engineering
 • Descendant Selector
The descendant selector matches all elements that are descendants of a specified
element.

• Child Selector (>)

The child selector selects all elements that are the children of a specified element.

• Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after
another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following.

• General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a
specified element.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 20
Engineering
Pseudo-classes selector
 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 mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• Syntax
• Selector: pseudo-class{
property: value;
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 21
Engineering
 Pseudo-elements
 selector is used to style specified
A CSS pseudo-element
parts of an element.
• Style the first letter, or line, of an element
• First Letter
• First Line
• Before
• After
• Insert content before, or after, the content of an element

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 22
Engineering
CSS Attribute Selector
 The [attribute=“value”] selector is used to select elements with a
specified attribute and value.
 CSS [attribute~="value"] Selector
 CSS [attribute|="value"] Selector
 CSS [attribute^="value"] Selector
 CSS [attribute$="value"] Selector
 CSS [attribute*="value"] Selector

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 23
Engineering
Background Property Property Name

 Background Color (background-color)

 Background Image (background-image)
 Background Image Repeat (background-repeat)
 Fixed Background Image (background-
attachment)
 Background Image Positioning (background-position)

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 24
Engineering
Background Color
 The background-color property specifies the background color of an
element.
 The background color of a page is defined in the body selector:
 Below is example of CSS backgrounds

test.css
body
{
background-color : red;
background-color : #FF0000;
background-color:rgb(255,0,0);
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 25
Engineering
Background Image
 The background-image property specifies an image to use as the
background of an element.
 For Example,

test.css
body
{
background-image :
url(‘pathToImage.jpg’);
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 26
Engineering
 Background Image Repeat
 You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
test.css
body
{
background-image :
url(‘pathToImage.jpg’);
no-repeat
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;

repeat;
}
background-repeat : no-
repeat-x

Mukti Patel, Dept. of Computer Sc. &

repeat-y
18/07/2025 27
Engineering
Fixed Background Image
 The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
 For Example, test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 28
Engineering
Background Image Positioning
 The background-position property sets the starting position of a background image.

test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 29
Engineering
 CSS Font
 CSS font properties define the font family, boldness, size, and the
style of a text.

Property Name
1. Font Color (color)
2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 30
Engineering
 h4{
CSS Font (Cont.) color : red;
}
 Font Color h4{
• Set the text-color for different elements font-family : sans-serif;
}
 Font Family h4{ font-size: 120%;
• The font family of a text is set with the font-size : 10px;
font-family property. font-size : small;
font-size : smaller;
 Font Size font-size : x-small;
font-size : xx-small;
• The font-size property sets the size of font-size : large;
the text. font-size : larger;
• font-size : 120% font-size : x-large;
font-size : xx-large;
• font-size : 10px;
font-size : medium}
• font-size : x-large;

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 31
Engineering
CSS Font (Cont.) h4{
font-style: italic ;
 Font Style }

• The font-style property is mostly used h4{

to specify italic text. font-weight : 300;
font-weight : bolder;
 Font Weight font-weight : lighter;
• The font-weight property sets how }
thick or thin characters in text should
h4{
be displayed. font-variant: small-caps;
 Font Variant
}
• The font-variant property specifies
whether or not a text should be
displayed in a small-caps font.
• font-variant : small-caps;
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 32
Engineering
CSS Text Property
 While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
Property Name
alignment of your text.

1. Text Decoration (text-decoration)

2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 33
Engineering
CSS Text Property (Cont.)
 Text Decoration h4{
text-decoration : line-through;
• The text-decoration property is used to set
text-decoration : overline;
or remove decorations from text. text-decoration : underline;
• The text-decoration property is mostly used text-decoration : none;
to remove underlines from links for design }
purposes. h4{
 Text Indent text-indent : 20px;
text-indent : 30%;
• The text-indentation property is used to }
specify the indentation of the first line of a h4{
text. text-align : right;
 Text Align text-align : justify;
text-align : left;
• The text-align property is used to set the text-align : center;
horizontal alignment of a text. }
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 34
Engineering
CSS Text Property (Cont.)
 Text Transform h4{
text-transform : capitalize;
• The text-transform property is used to
text-transform : uppercase;
specify uppercase and lowercase letters in text-transform : lowercase;
a text. }
 White Space
h4{
• The white-space attribute allows you to white-space : nowrap;
prevent text from wrapping until you place }
a break <br /> into your text.
 Word Spacing
h4{
• With the CSS attribute word-spacing you
word-spacing : 10px;
are able to specify the exact value of the }
spacing between your words. Word-spacing
should be defined with exact values.
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 35
Engineering
CSS Text Property (Cont.)
 Letter Spacing h4{
• With the CSS attribute letter-spacing you letter-spacing : 3px;
are able to specify the exact value of the }
spacing between your letters. Letter-
spacing should be defined with exact
values.
 Line Height h4{
line-height : 10px;
• The line-height attribute will set the }
height of the line in the page.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 36
Engineering
The Box Model
 All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
 The box model allows us to place a border around elements and
space elements in relation to other elements.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 37
Engineering
The Box Model (Cont)
Margin
 The image below illustrates the box model:
Border
Padding
Content

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 38
Engineering
The Box Model (Cont)
margin-top
border-top
padding-top

padding-right

margin-right
border-right
padding-left
margin-left
border-left

Content

padding-bottom
border-bottom
margin-bottom

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 39
Engineering
CSS Padding h4{
 The CSS padding properties define padding : 10px;
}
the space between the element
h4{
border and the element content. padding-top : 10px;
 The top, right, bottom, and left padding-right : 20px;
padding-bottom : 30 px;
padding can be changed padding-left : 40 px;
independently using separate }

properties. h4{
 A shorthand padding property can padding : 10px 20px 30px 40px;
}
also be used, to change all padding
at once.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 40
Engineering
CSS Border h4{
 The CSS border properties allow you to specify border : 1px solid red;
the style and color of an element's border. }
 Border Style Types h4{
• The border-style property specifies what kind of border border-style : solid;
to display. border-style : dotted;
 Border Width border-style : double;
}
• The border-width property is used to set the width of
the border. h4{
 Border Color border-width : 7px;
• The border-color property is used to set the color of }
the border.
h4{
• Border colors can be any color defined by RGB,
border-color : red;
hexadecimal, or key terms. Below is an example of
}
each of these types.
 The top, right, bottom, and left border can be h4{
changed independently using separate properties. border-top : 1px solid red;
}
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 41
Engineering
CSS Margin
h4{
 The CSS margin properties define the margin: 10px;
}
space around elements
h4{
margin -top : 10px;
 The top, right, bottom, and left margin margin -right : 20px;
can be changed independently using margin -bottom : 30 px;
margin -left : 40 px;
separate properties. }

 A shorthand margin property can also

h4{
be used, to change all margins at margin : 10px 20px 30px 40px;
once. }

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 42
Engineering
 ul{
list-style-type: circle;
CSS List list-style-type: disc;
list-style-type: square;
 The CSS list properties allow you to: list-style-type: armenian;
list-style-type: cjk-ideographic;
• Set different list item markers for
list-style-type: decimal-leading-zero;
ordered & unordered lists list-style-type: georgian;
• Set an image as the list item marker list-style-type: hebrew;
list-style-type: katakana;
• Set the position of the marker list-style-type: lower-greek;
 CSS List Style Type }

 CSS List with Image ol{ list-style-image : url(‘imgPath’);

}
 CSS List Position
ol{
list-style-position : outside;
list-style-position : inside;
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 43
Engineering
Styling Links a:link{
color:#FF0000;
/*unvisited link*/
 Anchor/Link States }
• The four links states are: a:visited{
1. a:link - a normal, unvisited link text-decoration : none;
/*visited link*/
2. a:visited - a link the user has visited }
3. a:hover - a link when the user
a:hover{
mouse over it color:#00FF00;
4. a:active - a link the moment it is /*mouse over link*/
clicked }

a:active{
color:#0000FF;
/*selected link*/
}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 44
Engineering
CSS Positioning
 Absolute Positioning h1{
• With absolute positioning, you define the exact position : absolute;
pixel value where the specified HTML element
left : 50px;
top : 100px;
will appear.
}
• The point of origin is the top-left of the
browser's viewable area, so be sure you are h1{
measuring from that point. position : relative;
 Relative Positioning
left : 50px;
top : 100px;
• Relative positioning changes the position of the }
HTML element relative to where it normally
appears. h1{
 Fixed Positioning position : fixed;
•
top : 50px;
The element is positioned relative to the
left : 100px;
browser window, in fixed position, element will
}
be in the same place even we scroll the screen.
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 45
Engineering
CSS Layers
 CSS allows you to control which item will appear on top with the use of
layers.
 In CSS, each element is given a priority.
 If there are two overlapping CSS positioned elements, the element with
the higher priority will appear on top of the other.
 To manually define a priority, set the z-index value. The larger the value,
the higher the priority the element will have.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 46
Engineering
 CSS
#division1{
HTML position : absolute;
height : 100px;
<div id="division1"> width : 100px;
</div> left : 100px;
<div id="division2"> top : 150px;
</div> background-color : red;
z-index : 5;
}
#division2{
position : absolute;
height : 200px;
width : 200px;
left : 50px;
top : 100px;
background-color : blue;
z-index : 2;
}
Mukti Patel, Dept. of Computer Sc. &
18/07/2025 47
Engineering
 CSS Float Property
 The CSS float property defines that an element should be taken out of the
normal flow of the document and placed along the left or right side of its
containing block.
 Text and inline elements will then wrap around this element.
<div id="division1"> CSS
ABC Content #division1{
</div> background-color : red;
<div id="division2"> float : left;
XYZ Content width: 40%;}
</div> #division2{
background-color : blue;
float : right;
width: 40%;}

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 48
Engineering
Transform
 Transform can be done as follow
• Translate
• Translate is use to function moves an element from its current position.

• Rotate
• Rotate is used to rotate an element clockwise and anticlockwise.

• Scale
• Scale method is used to increase and decrease the size of an element according to
given width and height

• Skew
• Skew is used to skew an element along the X axis and Y axis according to given angle.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 49
Engineering
 Matrix
 The CSS Method combines all the six 2D transform methods
altogether
 Syntax:
• Matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 50
Engineering
 Animation

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 51
Engineering
 Multiple columns

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 52
Engineering
 In every lecture, Faculty may talk on any of the following:
• DCS & GSFCU Portal: Remind students to use DCS, talk about it’s features and instruct all to visit GSFCU

website

• Discipline, Values and Ethics.

• GSFC University – My University: Emphasize the importance of taking ownership of the University.

• Respect & Courtesy: Remind students to be respectful to peers, teachers, and staff. Encourage polite

language and behavior.

• Punctuality: Emphasize the importance of arriving on time to class and completing assignments by

deadlines.

• Classroom Rules: Reinforce basic classroom rules, such as keeping mobile phones on silent and

maintaining a clean environment.

• Safety: Remind students about safety protocols, whether it's physical safety in the classroom or digital

safety when using online resources.

• Positive Attitude: Encourage a positive mindset, cooperation and supporting one another.

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 53
Engineering
 GSFCU & Values

Respect & Courtesy

Mukti Patel, Dept. of Computer Sc. &

18/07/2025 54
Engineering