GUJARAT TECHNOLOGICAL
UNIVERSITY
Chandkheda, Ahmedabad
Affiliated
GOVERNMENT ENGINEERING COLLEGE
BHAVNAGAR
DEPARTMENT OF INFORMATION TECHNOLOGY
Under subject of
Web Development (3151606)
B. E. III, Semester –V (Information Technology)
UNIT-1
Cascading Style Sheets
Prof.Bharat Vainsh
Academic year
2023
Unit -1
CSS
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
5. Box Model
• Margin
• Border
• Padding
Outline (Cont.)
6. List
• List Type
• List with Image
• List Position
7. Links
8. CSS Positioning 3
9. CSS Layers
10. CSS Floating Property
11. Animations,
12.
13.
14. Introduction to CSS3
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
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
• Makes Updates Easier and Smoother
• Helps Web Pages Load Faster
Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites
Basic Syntax of CSS
•A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration Declaration
h1 {Color: blue; font-size:12px;}
Property value Property value
•The selector is normally the HTML element you want to style.
• Each declaration consists of a property and a value.
• The property is the style attribute you want to change. Each
property has a value.
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":.
CSS
#para1
HTML {
<h1 id=“para1”> color: blue;
Hello Friends }
</h1>
<h1> Output
How are you Hello Friends
</h1> How are you
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 {
</h1> color: blue;
<h1> }
How are you
</h1>
<h1 class=“myClass”> Output
How are you Hello Friends
</h1> How are you
How are you
Different ways to write CSS
There are three ways of inserting a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
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:
<p style="background: blue; color: white;"> My Inline CSS </p>
2) Internal Style Sheet
• Thistype 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.
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
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>.
3) External Style Sheet (Cont.)
Example :
Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” }
type=“text/css” p
href=“test.css”> {
</head> color : blue;
<body> }
<p> Hello Friends </p>
<p id=“para1”> How are you?
</p>
Output
</body>
Hello Friends
</html>
How are you?
Multiple Selection
• We can apply same css to multiple selectors using comma
separated selector list, for example
Demo.html
<html> test.css
<head>
<link rel=“stylesheet” p, h1
type=“text/css” {
href=“test.css”> color : blue;
</head> }
<body>
<p> Hello Friends </p>
<h1> How are you? </h1> Output
</body> Hello Friends
</html>
How are you?
Assign Multiple Class
• We can apply different class to same html element by giving
space separated class names in the class attribute:
test.css
Demo.html
. class1
<html>
{
<head>
color : blue;
<link rel=“stylesheet”
}
type=“text/css”
. Class2
href=“test.css”>
{
</head>
text-align : center;
<body>
}
<h1 class=“class1 class2”>
How are you?
</h1>
Output
</body>
</html> How are you?
Pseudo Class
•CSS pseudo-classes are used to add special effects to
some selectors.
•Pseudo-class names are not case-sensitive.
a:link {color:#FF0000;} /* unvisited link */ /*red*/
a:visited {color:#00FF00;} /* visited link */ /*blue*/
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;}
Styles can be specified
• inside an HTML element
• inside the head section of an HTML page
• in an external CSS file
Properties
1) background
2) text
3) fonts
4) border
5) margin
6) padding
7) lists
CSS Background Property
• CSS Background Color (background-color)
• CSS Background Image (background-image)
• Background Image Repeat (background-repeat)
• CSS Fixed Background Image (background-attachment)
• CSS Background Image Positioning (background-position)
CSS Background Color
<head>
<style>
body
{
background-color:#cccccc;
}
</style>
</head>
CSS Background Image
<head>
<style>
body
{
background-image: url(“Koala.jpg”);
}
</style>
</head>
CSS Background Image Repeat
<head>
<style>
body
{
background-image: url(“Koala.jpg”);
background-repeat: no-repeat;
}
</style> </head>
CSS Background Image Positioning
<head>
<style>
body
{
background-image: url(“Koala.jpg”);
background-position: 30% 30%;
}
</style> </head>
CSS Font
• CSS font properties define the font family, boldness,
size, and the style of a text.
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)
CSS Font (Cont.)
CSS Font Color h4{
• Set the text-color for different color : red;
}
elements
h4{
CSS Font Family font-family : sans-serif;
• The font family of a text is set }
with the h4{
font-family property. font-size: 120%;
font-size : 10px;
font-size : small;
CSS Font Size font-size : smaller;
• The font-size property sets the font-size : x-small;
font-size : xx-small;
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; }
CSS Font (Cont.)
CSS Font Style h4{
• The font-style property is mostly font-style: italic ;
used to specify italic text. }
CSS Font Weight h4{
• The font-weight property sets how font-weight : 300;
thick or thin characters in text should font-weight : bolder;
be displayed. font-weight : lighter;
}
CSS Font Variant
• The font-variant property specifies
whether or not a text should be
displayed in a small-caps font. h4
• font-variant : small-caps; {
font-variant: small-caps;
}
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 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. CSS White Space (white-space)
6. CSS Word Spacing (word-spacing)
7. CSS Letter Spacing (letter-spacing)
8. CSS Line Height (line-height)
CSS Text Property (Cont.)
Text Decoration h4{
text-decoration : line-through;
• The text-decoration property is used
text-decoration : overline;
to set or remove decorations from text. text-decoration : underline;
• The text-decoration property is text-decoration : none;
mostly used to remove underlines from }
links for design purposes.
h4{
Text Indent text-indent : 20px;
• The text-indentation property is used text-indent : 30%;
to specify the indentation of the first }
line of a text.
Text Align h4{
text-align : right;
• The text-align property is used to set
text-align : justify;
the horizontal alignment of a text. text-align : left;
text-align : center;
}
CSS Text Property (Cont.)
Text Transform h4{
• The text-transform property is used to text-transform : capitalize;
specify uppercase and lowercase letters text-transform : uppercase;
in a text. text-transform : lowercase;
}
CSS White Space
• The white-space attribute allows you to
prevent text from wrapping until you
place a break <br /> into your text. h4{
white-space : nowrap;
CSS Word Spacing }
• With the CSS attribute word-spacing
you are able to specify the exact value of
the spacing between your words.
Wordspacing should be defined with h4{
word-spacing : 10px;
exact values.
}
CSS Text Property (Cont.)
CSS Letter Spacing
• With the CSS attribute letter-spacing you h4{
are able to specify the exact value of the letter-spacing : 3px;
spacing between your letters. Letter }
spacing should be defined with exact
values.
CSS Line Height h4{
• The line-height attribute will set the line-height : 10px;
height of the line in the page }
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.
The Box Model (Cont)
The image below illustrates the box model:
The Box Model (Cont)
CSS Padding
• The CSS padding properties h4{
padding : 10px;
define the space between the }
element border and the element
content.
h4{
• The top, right, bottom, and left padding-top : 10px;
padding can be changed padding-right : 20px;
padding-bottom : 30 px;
independently using separate padding-left : 40 px;
properties. }
• A shorthand padding property
can
also be used, to change all h4{
padding : 10px 20px 30px 40px;
padding }
at once.
CSS Border
The CSS border properties allow you to h4{
specify the style and color of an element's border : 1px solid red;
border. }
Border Style Types
• The border-style property specifies what h4{
kind of border to display. border-style : solid;
Border Width border-style : dotted;
border-style : double;
• The border-width property is used to set
}
the width of the border.
Border Color h4{
• The border-color property is used to set border-width : 7px;
the color of the border. }
• Border colors can be any color defined h4{
by RGB, hexadecimal, or key terms. border-color : red;
Below is an example of each of these }
types. h4{
• The top, right, bottom, and left border border-top : 1px solid red;
can be changed independently using }
separate properties.
CSS Margin
h4{
• The CSS margin properties margin: 10px;
define the space around }
elements
h4{
• The top, right, bottom, and margin -top : 10px;
margin -right : 20px;
left margin can be changed margin -bottom : 30 px;
independently using separate margin -left : 40 px;
}
properties.
• A shorthand margin property h4{
margin : 10px 20px 30px 40px;
can also be used, to change all }
margins at once.
CSS List
The CSS list properties allow ul
{
you to: list-style-type : lower-greek;
list-style –type : decimal;
list-style-type : circle;
• Set different list item markers list-style-type : none;
for ordered & unordered lists }
ol
• Set an image as the list item {
marker list-style-image : url(‘imgPath’);
}
• Set the position of th marker
CSS List Style Type ol{
list-style-position : outside;
CSS List with Image list-style-position : inside;
CSS List Position }
Styling Links
Anchor/Link States a:link{
color:#FF0000;
/*unvisited link*/
• The four links states are: }
1. a:link - a normal, unvisited a:visited{
a:visited{
link text-decoration: :none;
text-decoration none;
/*visitedlink*/
/*visited link*/
2. a:visited - a link the user }}
has visited
a:hover{
3. a:hover - a link when the color:#00FF00;
user mouse over it /*mouse over link*/
}
4. a:active - a link the moment
a:active{
it is clicked color:#0000FF;
/*selected link*/
}
CSS Positioning
h1
Absolute Positioning {
• With absolute positioning, you define position : absolute;
the exact pixel value where the specified left : 50px;
top : 100px;
HTML element will appear.
}
• The point of origin is the top-left of the
browser's viewable area, so be sure you h1{
are measuring from that point. position : relative;
left : 50px;
Relative Positioning top : 100px;
• Relative positioning changes the }
position of the HTML element relative to
where it normally appears.
h1{
position : fixed;
Fixed Positioning top : 50px;
• The element is positioned relative to the left : 100px;
browser window }
Animations
What are CSS Animations?
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 first specify some keyframes for
the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
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.
Animations
Examples
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Note: The animation-duration property defines how long an
animation should take to complete. If the animation-duration
property is not specified, no animation will occur, because the
default value is 0s (0 seconds).
Animations
Examples
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
Wildcard Selectors (*, ^ and $) in CSS
Wildcard selector is used to select multiple elements
simultaneously.
It selects similar type of class name or attribute and use CSS
property. * wildcard also known as containing wildcard.
[attribute*=”str”] Selector: The [attribute*=”str”] selector is
used to select that elements whose attribute value contains
the specified sub string str.
This example shows how to use a wildcard to select all div
with a class that contains str.
This could be at the start, the end or in the middle of the
class.
Syntax:
[attribute*="value"] {
// CSS property
}
Wildcard Selectors (*, ^ and $) in CSS
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;}
[class^="str"]
{
background-color:green;
color:white;}
[class$="str"]
{
background-color:greenyellow;
color:indigo;}
</style>
</head>
Wildcard Selectors (*, ^ and $) in CSS
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
<div class="strfirst">The first div element.</div>
<div class="second">The second div element.</div>
<div class="stthird">The third div element.</div>
<p class="strfourth">This is some text in a paragraph.</p>
<div class="firststr">The first div element.</div>
<div class="secondstr">The second div element.</div>
<div class="stthird">The third div element.</div>
<p class="fourth">This is some text in a paragraph.</p>
</body></html>
CSS Gradients
CSS gradients let you display smooth transitions between two or more
specified colors.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the gradient
effect.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Gradients
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the
right):</p>
<div id="grad1"></div>
CSS Variables
CSS Variables
The var() function is used to insert the value of a CSS variable.
CSS variables have access to the DOM, which means that you can create variables
with local or global scope, change the variables with JavaScript, and change the
variables based on media queries.
Syntax of the var() Function
The var() function is used to insert the value of a CSS variable.
The syntax of the var() function is as follows:
var(--name, value)
Value Description
name Required. The variable name (must start with two dashes)
value Optional. The fallback value (used if the variable is not found)
Note: The variable name must begin with two dashes (--) and it is case sensitive!
CSS Variables
How var() Works
First of all: CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while local
variables can be used only inside the selector where it is declared.
To create a variable with global scope, declare it inside the :root selector. The
:root selector matches the document's root element.
To create a variable with local scope, declare it inside the selector that is going to
use it.
The following example is equal to the example above, but here we use the var()
function.
First, we declare two global variables (--blue and --white). Then, we use the var()
function to insert the value of the variables later in the style sheet:
CSS Variables
<head>
<style>
body
{
--div-width: 1000px;
--div-height: 250px;
--brand-green: #93e9be;
}
div
{
width: var(--div-width);
height: var(--div-height);
background-color: var(--brand-green);
}
@media (max-width: 1000px)
{
:root
{
--div-width: 500px;
}
}
</style>
</head>
<body>
<div>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</div>
Pseudo Class
CSS pseudo-classes are used to add styles to selectors, but only when those
selectors meet certain conditions.
A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed
by a pseudo-class such as "hover", "focus", or "active",
like this: a:hover { /* your style here */ }
Pseudo Class
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue; }
Pseudo Class
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and
a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the
CSS definition in order to be effective.</p>
Basic of frameworks like Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive,
mobile-first front-end web development. It contains HTML, CSS and (optionally)
JavaScript-based design templates for typography, forms, buttons, navigation,
and other interface components.
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
Basic of frameworks like Bootstrap
Why Use Bootstrap?
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
Download Bootstrap from getbootstrap.com
Basic of frameworks like Bootstrap
Example
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></s
cript>
</head>
Basic of frameworks like Bootstrap
1. Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that require the HTML5
doctype.
Always include the HTML5 doctype at the beginning of the page, along with the
lang attribute and the correct character set:
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are
part of the core framework.
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire
width of the viewport
CSS Media Queries
CSS3 Introduced Media Queries
Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for
a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?) Resolution
Media Query Syntax
A media query consists of a media type and can contain one or more expressions,
which resolve to either true or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
The result of the query is true if the specified media type matches the type of
device the document is being displayed on and all expressions in the media query
are true.
CSS Media Queries
When a media query is true, the corresponding style sheet or style rules are
applied, following the normal cascading rules.
Unless you use the not or only operators, the media type is optional and the all
type will be implied.
You can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3 Media Types
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
CSS Media Queries
Example:
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is
480px wide or wider.</p>
</body>
Introduction to CSS3
• CSS3 is the latest standard for • CSS3 Transitions are a
CSS. presentational effect which allow
property changes in CSS values,
• CSS3 is completely backwards- such as those that may be defined
compatible with earlier versions of to occur on :hover or :focus, to
CSS. occur smoothly over a specified
duration – rather than happening
• CSS3 has been split into instantaneously as is the normal
"modules". It contains the "old behavior.
CSS specification" (which has
been split into smaller pieces). In • Transition effects can be applied
addition, new modules are added. to a wide variety of CSS
properties, including background-
color, width, height, opacity, and
many more.
References
• E-Books:
– Web Technologies, Black Book, Dreamtech Press
– PHP: The Complete Reference By Steven Holzner, McGrawhill
• Website :
1. https://www.bharatvainsh.in/
2. https://smarteportal.blogspot.com/
3. https://www.w3schools.com/
4. https://www.javatpoint.com/
5. https://www.studentstutorial.com/
6. https://www.tutorialspoint.com/seo/index.htm
7. https://javascript.info/
8. https://www.guru99.com/
9. https://www.tutorialspoint.com/php/
10. https://www.codecademy.com/catalog/subject/web-development
• Internal Guide: Prof. Bharat Vainsh
