Module 2
Styling with CSS3 &
Bootstrap
Class: SE
Sem: IV
Subject: MDM-Introduction to Web Technologies
CSS Introduction
• CSS stands for Cascading Style Sheets.
• HTML provides structure and adds content to a webpage, while
CSS enhances the visual presentation of that content through
various styles.
• CSS describes how HTML elements are to be displayed on screen.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
CSS Syntax
Selector
Declaration Declaration
h1 { color : green; font-size:20px; }
Property value Property value
• 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 Selector
[Link] selector
[Link] selector
[Link] selector
[Link] selector
[Link] selector
[Link] selector
Selector Use Example
1. Element Selector • selects HTML elements (p, div, h1, h1 { color:red; }
etc) and applies CSS to them.
2. Id Selector • selects the HTML element with a #first-para{
unique identifier (id) and adds CSS color:red;
to it. }
• id selector is specified using the
hash (#) character, followed by the
id of the element.
3. Class selector • class selector selects the HTML .second-para{
element using the class attribute color:red;
and applies CSS to it. }
• class selector is specified using the
period (.) character, followed by the
class name.
Selector Use Example
4. Universal selector • universal selector selects every * { color : red; }
single HTML element on the page.
• It is written using the asterisk ( * )
character.
5. Group selector • group selector allows you to select h1, p {
multiple elements and apply the color:red;
same style to all of them }
6. Attribute selector • attribute selector selects elements p [class] {
based on specific attribute values. color:blue;
• Syntax: }
Element [attribute] { } selects all p elements having
the class attribute and
applies style.
How to include CSS in webpage? / Different types of CSS
There are three ways to add CSS in HTML
1. Inline CSS: Styles added directly to the HTML element.
2. Internal CSS: Styles defined at the head section of the document.
3. External CSS: Styles defined in a separate file.
1. Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
• The style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p style = "color : red;">This is a paragraph</p>
</body>
</html>
2. Internal/Embedded CSS
• An internal style sheet may be used if one single HTML page has a unique
style.
• The internal style is defined inside the <style> element, inside the head
section.
• Advantages:
1. Keeps styling separate from content (better than inline).
2. Easier to manage when styling multiple elements on one page.
• Disadvantages:
1. Styles apply only to that single HTML file.
[Link]
<html>
<head>
<style>
p{
color: red;
font-size:30px;
}
</style>
</head>
<body>
<h1> Example of internal stylesheet </h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
</body>
</html>
3. External CSS
• External CSS is an approach to applying CSS styles to HTML pages by defining the
CSS in a separate file.
• With an external style sheet, you can change the look of an entire website by
changing just one file!
• Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
<head> • href="[Link]" - URL or file path to the
<link href="[Link]" rel="stylesheet"> external CSS file.
</head> • rel="stylesheet" - indicates the linked
document is a CSS file
• Advantages:
1. Best for consistency across multiple pages.
2. Cleaner HTML structure.
3. Easier collaboration and maintenance.
• Disadvantages:
1. Requires an extra file (and HTTP request).
2. If the CSS file isn’t loaded, the page may look unstyled.
[Link]
[Link]
<html>
<head> p {
<link href=“[Link]” rel=“stylesheet”> color: red;
</head> font-size:30px;
}
<body>
<h1> Example of internal stylesheet </h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
</body>
</html>
Rule cascading & inheritance
• The term cascading in CSS means that when multiple styles apply to the same element,
the browser decides which one wins based on a set of rules:
If two styles come into conflict, the last one used will take precedence
Rule 1. Cascading Order:
Priority order (lowest → highest):
1. Browser defaults (the styles your browser applies automatically, like default
margins on <p>).
2. External stylesheets (linked or imported .css files).
3. Internal stylesheets (embedded <style> blocks inside your HTML).
4. Inline styles (styles written directly on the element via the style attribute).
• Inline styles must be placed in the body of the HTML document, while internal style
sheets must be placed in the head of the HTML document. As a result, inline styles
are always the last ones used and therefore take precedence.
• The browser treats all external style sheets as occurring before internal style sheets,
regardless of where the link is placed. For example, if you place your linked style sheet
after your embedded style sheet, the browser would still view the linked style sheet as
occurring before the embedded sheet because it is an external style sheet. Therefore,
internal style sheets are always a higher priority than external because they occur
later in the document.
2. Selector Type Order:
• Rules of precedence also apply to the different selector types. Selector
precedence occurs in this order (3 being the highest priority):
1. Element
2. Class In below example Hello world will have green
colour as highest priority is for id.
3. ID
3. Inheritance in CSS
• Inheritance allows certain properties to be passed from parent elements
to their children.
• Text-related properties like color, font-family, and line-height are
inheritable by default, while box-model properties like margin, padding,
and border are not.
• To explicitly inherit a property, you can use the inherit keyword:
e.g
<style>
body { color: blue; }
p { color: inherit; }
</style>
<p>This text will inherit the blue color from the body.</p>
CSS background:
The background controls the color or image behind an element
(like a box, paragraph, or page).
Following are property for setting background of html element.
1. background-color
2. background-image
3. background-repeat
4. background-size
5. background-position
6. background-attachment
7. background
Property Value Use Example
background-color Color name: red, blue Sets the background color div {
Hex code: #ff0000 of an element. background-color: blue;
RGB: rgb(255, 0, 0) }
The background of the div becomes
blue.
background-image url("[Link]") Adds an image as body {
background. background-image: url("[Link]");
}
The webpage gets a background
image
background-repeat repeat (default) Controls image repetition body {
no-repeat background-repeat: no-repeat;
repeat-x horizontal }
only
repeat-y vertical only The image appears only once.
Property Value Use Example
background-size cover - cover the Controls image size. body {
entire element. background-size: cover;
contain - Ensures the }
whole image is visible, Image covers the whole screen.
but may leave empty
space
100px 200px
background- top|bottom Sets the starting position body {
position left|right|center of a background image. background-position: top right;
}
background- scroll (default)- scrolls Sets whether a body {
attachment along with the page background image is fixed background-attachment: fixed;
content. or scrolls with the rest of }
fixed -background the page.
image is fixed
local - background
image scrolls with the
element’s content
Property Use Example
background shorthand that lets you set body {
multiple background-related background: lightblue url("img_tree.gif") no-repeat fixed center;
properties in one declaration }
CSS text-transformation
Text transformation controls how text looks (uppercase, lowercase, etc.).
Property Value Use
text-transform lowercase text-transform property
uppercase is useful for styling
capitalize -Transforms the first headings, titles, or any
character of each word to text that requires specific
uppercase. capitalization rules
Example:
[Link] { Transforms all characters to uppercase
text-transform: uppercase; in div tag.
}
CSS shadow property
1. CSS text-shadow property
• The CSS text-shadow property applies a shadow to text.
• In its simplest use, you only specify the horizontal and the vertical
shadow.
• In addition, you can add a shadow color and blur effect.
text-shadow: horizontal vertical blur color;
Part Meaning Example Value
Shadow moves left
horizontal 2px
or right
Shadow moves up
vertical 2px
or down
How blurry the
blur 5px
shadow is
color Shadow color gray, black
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-shadow: 2px 2px 1px #ffaa33;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
2. CSS box-shadow property
• The CSS box-shadow property is used to apply one or more shadows to
an element.
• It creates a shadow outside or inside an element, making it look raised,
floating, or pressed.
• You can only specify the horizontal and the vertical offset of the
shadow.
• In addition, you can add a shadow color, a spread radius, a blur effect,
and change the shadow from an outer shadow to an inner shadow
(inset).
box-shadow: horizontal vertical blur spread color;
Part Meaning Example
Move shadow left
horizontal (x) 5px
or right
Move shadow up
vertical (y) 5px
or down
Softness of
blur 10px
shadow
spread Shadow size 2px
color Shadow color gray
div {
box-shadow: 5px 5px 0px black; Shadow looks like a hard copy behind the
} box.
div {
box-shadow: inset 3px 3px 6px gray; Shadow appears inside the box, like a
} pressed button.
<!DOCTYPE html>
<html> <body>
<h1>The box-shadow Property</h1>
<head> <div>A div element with a blurred, grey, inset box-
<style> shadow.</div>
h1 { </body>
width: 300px; </html>
box-shadow: 3px 3px 6px grey;
}
div {
width: 300px;
border:1px solid;
height: 100px;
padding: 15px;
box-shadow: inset 3px 3px 6px grey;
}
</style>
</head>
CSS borders
Borders create lines around elements.
Following are property for setting border of html element.
1. border-width
2. border-style
3. border-color
4. border-radius
5. border
Property Value Use Example
border-width thin | medium| thick specifies the width of the [Link] {
or px values four borders. border-style: solid;
border-width: 5px;
}
border-style solid, dashed, dotted, specify the style of border [Link] {
double, groove, ridge, border-style: dashed;
inset, outset, none, }
hidden.
border-color Color name: red, blue used to set the color of [Link] {
Hex code: #ff0000 the four borders. border-style: solid;
RGB: rgb(255, 0, 0) border-color: red green blue yellow;
}
border Width: 1px, 2px Shortcut to set border p{
width, style, and color border: 2px solid black;
Style: solid, dashed, }
dotted A solid black border around the
paragraph.
Color: black, red
Property Value Use Example
border-radius px values Rounds the corners of the div { border-radius: 10px; }
border. All corners rounded with 10px radius.
[Link] {
border-radius: 5px 10px;
}
First applies to top-left & bottom-
right, second to top-right & bottom-
left.
border-left px value either
border-right left|right|top|bottom p{
border-top border is displayed border-left: 6px solid red;
border-bottom }
Write program to display following output:
<!DOCTYPE html>
<html> /* Text */
<head> text-transform: capitalize;
<title>CSS Properties Demo</title> text-shadow: 2px 2px 4px gray;
<style>
.box { font-size: 20px;
width: 300px; }
padding: 20px; </style>
</head>
/* Background */ <body>
background-color: lightyellow;
<div class="box">
/* Border */ css is easy to learn
border: 2px solid green; </div>
border-radius: 10px;
</body></html>
/* Box Shadow */
box-shadow: 4px 4px 10px gray;
What are Pseudo-class in CSS?
A CSS pseudo-class is a keyword added to a selector that specifies a
special state/style of the selected element.
Some common use for pseudo-classes:
• 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
• Style an element that is the first child of its parent
Syntax:
selector : pseudo-class {
property: value;
}
Example:
button : hover {
color: blue;
}
Changes the button colour to blue when user moves mouse over it.
Types of Pseudo-classes
1. User Action Pseudo-classes : These pseudo-classes apply when the
user interacts with the document.
1. :hover -- Applies when the user designates an item with a pointing
device.
2. :active -- Applies when an item is being activated by the user, such as
when clicked.
3. :focus -- Applies when an element has focus.
2. Input Pseudo-classes: These relate to form elements and their states:
1. :enabled --Represents an element that is enabled.
2. :disabled -- Represents an element that is disabled.
3. :checked -- Matches elements like checkboxes and radio buttons
when toggled on.
3. Structural Pseudo-classes : These relate to the position of an element within the
document tree:
1. :first-child - Matches an element that is the first child of its parent.
2. :last-child - Matches an element that is the last child of its parent.
3. :nth-child(n) - Matches elements based on their position in a group of siblings.
4. Location Pseudo-classes
These relate to links and targeted elements:
1. :link -- Matches links that have not yet been visited.
2. :visited -- Matches links that have been visited.
3. :target --Matches the element that is the target of the document URL.
<!doctype html>
<html lang="en"> </style>
<head> </head>
<title>HTML Document
Template</title> <body>
<style> <p>
#one { CSS is easy to learn
display:none; </p>
} <div id="one"> i m hidden </div>
</body>
p: hover + #one { </html>
background-color:orange;
width:400px;
display: block;
}
output after moving mouse over this text
output before moving mouse over this text
CSS Transitions Property
• CSS transitions allows you to change property values smoothly, over a
given duration.
• To create a transition effect, you must specify the CSS property you
want to add a transition to, and the duration of the transition.
• The CSS transition property is a shorthand property for:
1. transition-property (Required)
2. transition-duration (Required)
3. transition-timing-function
4. transition-delay
selector {
transition : property duration timing-function delay ;
}
transition-property : The CSS property to animate (e.g., background-color,
width, shadow, etc).
transition-duration : How long the transition takes (e.g., 0.5s, 200ms).
transition-timing-function : Speed styles (ease, linear, ease-in, ease-out, ease-
in-out).
transition-delay : Time before the transition starts.
• The transition-timing-function property specifies the speed curve of the
transition effect.
• This property can have one of the following values:
1. ease - transition will start slow, then go fast, and end slow (this is
default)
2. linear - transition will keep the same speed from start to end
3. ease-in - transition will start slow
4. ease-out - transition will end slow
5. ease-in-out - transition will have a slow start and end
6. cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function
How to Trigger the Transition?/What is Pseudo-classes?
• The transition is triggered when there is a change in the element's
properties.
• This often happens within pseudo-classes .
:hover
:active
:focus
:checked
Change Multiple Property Values:
You can change multiple properties by separating them by commas.
div {
transition: width 2s, height 4s, background-color 3s;
}
adds a transition effect for the width, height, and background-
color properties,
<!DOCTYPE html>
<body>
<html><head>
<style>
<h1>Transition Property</h1>
div {
<p> Hover over div</p>
width: 100px;
<div>css</div>
height: 100px;
background-color: red;
</body>
transition: width 2s, height 4s, background-color 2s;
</html>
}
div:hover {
width: 300px;
height: 300px;
background-color: orange;
}
</style></head>
CSS Animation Property
• An animation lets an element gradually change from one style
to another.
• You can change as many CSS properties you want, as many times
as you want.
• To use CSS animation, you must specify some keyframes for the
animation.
• Keyframes hold what styles the element will have at certain
times. When you specify CSS styles inside the @keyframes rule, the
animation will gradually change from the current style to the new
style at certain times.
@keyframe animationName { }
selector {
animation - name: animationName;
animation- duration: 20s;
animation- timing-function : ease-in|ease-out|linear|ease
animation-delay: time in second
animation- iteration-count : Number of times to repeat
animation-direction: normal |reverse|alternate
animation- fill-mode: none | forwards|backwards|both
animation-play-state: running|paused;
}
Property-name Use
animation-name specifies a name for the animation
animation-duration defines how long an animation should take to
complete
animatio-delay Wait time before animation starts
animation-iteration-count Number of times to repeat
animation-direction Direction (normal, reverse, alternate, etc.).
animation-play-state Running or paused
animation shorthand for above all properties will contain
all above values.
<!DOCTYPE html>
<html>
<head> </style>
<style> </head>
@keyframes myAnimation { <body>
from {color: red; font-size:40px} <h1>CSS Animation</h1>
to {color: yellow;font-size:25px} <p></b> Hello World</p>
} </body>
</html>
p{
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration: 2;
animation-direction: reverse;
animation-delay:1s;
animation-transition-state: ease-out;
}
