SlideShare a Scribd company logo
CONCEPT OF CSS
PART II
BY:SURBHI SAROHA
Assistant Professor
1SURBHI SAROHA
SYLLABUS
 CSS Id and Class.
 Box Model(Introduction , Border properties ,
Padding Properties , Margin properties).
 CSS Advanced(Grouping, Dimension , Display
, Positioning , Floating , Align , Pseudo class,
Navigation Bar , Image Sprites , Attribute
sector)
 CSS Color
2SURBHI SAROHA
CSS Id and Class.
 In the CSS, a class selector is a name
preceded by a full stop (“.”) and an ID selector
is a name preceded by a hash character (“#”).
 The difference between an ID and a class is
that an ID can be used to identify one
element, whereas a class can be used to
identify more than one.
3SURBHI SAROHA
The CSS id Selector
 The id selector uses the id attribute of an
HTML element to select a specific element.
 The id of an element is unique within a page,
so the id selector is used to select one unique
element!
 To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
4SURBHI SAROHA
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #para1 {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>
 <p id="para1">HelloWorld!</p>
 <p>This paragraph is not affected by the style.</p>
 </body>
 </html>
5SURBHI SAROHA
The CSS class Selector
 The class selector selects HTML elements
with a specific class attribute.
 To select elements with a specific class, write
a period (.) character, followed by the class
name.
6SURBHI SAROHA
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .center {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>
 <h1 class="center">Red and center-aligned heading</h1>
 <p class="center">Red and center-aligned paragraph.</p>
 </body>
 </html>
7SURBHI SAROHA
Box Model(Introduction , Border properties ,
Padding Properties , Margin properties).
 When laying out a document, the browser's
rendering engine represents each element as a
rectangular box according to the standard CSS
basic box model.
 CSS determines the size, position, and
properties (color, background, border size, etc.)
of these boxes.
 Every box is composed of four parts (or areas),
defined by their respective edges: the content
edge, padding edge, border edge, and margin
edge.
8SURBHI SAROHA
9SURBHI SAROHA
Cont….
 The content area, bounded by the content edge, contains the "real"
content of the element, such as text, an image, or a video player. Its
dimensions are the content width (or content-box width) and the content
height (or content-box height).
 It often has a background color or background image.
 If the box-sizing property is set to content-box (default) and if the
element is a block element, the content area's size can be explicitly
defined with the width, min-width, max-width, height, min-height,
and max-height properties.
 The padding area, bounded by the padding edge, extends the content
area to include the element's padding.
 Its dimensions are the padding-box width and the padding-box height.
 The thickness of the padding is determined by the padding-
top, padding-right, padding-bottom, padding-left, and
shorthand padding properties.
10SURBHI SAROHA
Cont…
 The border area, bounded by the border edge, extends the
padding area to include the element's borders.
 Its dimensions are the border-box width and the border-box
height.
 The thickness of the borders are determined by the border-
width and shorthand border properties.
 If the box-sizing property is set to border-box, the border area's
size can be explicitly defined with the width, min-width, max-
width, height, min-height, and max-height properties.
 When there is a background (background-color or background-
image) set on a box, it extends to the outer edge of the border
(i.e. extends underneath the border in z-ordering).
 This default behavior can be altered with the background-clip css
property.
11SURBHI SAROHA
Cont….
 The margin area, bounded by the margin edge, extends
the border area to include an empty area used to separate
the element from its neighbors.
 Its dimensions are the margin-box width and the margin-
box height.
 The size of the margin area is determined by the margin-
top, margin-right, margin-bottom, margin-left, and
shorthand margin properties.When margin
collapsing occurs, the margin area is not clearly defined
since margins are shared between boxes.
 Finally, note that for non-replaced inline elements, the
amount of space taken up (the contribution to the height of
the line) is determined by the line-height property, even
though the borders and padding are still displayed around
the content.
12SURBHI SAROHA
Cont…
 Explanation of the different parts:
 Content -The content of the box, where text
and images appear
 Padding - Clears an area around the content.
The padding is transparent
 Border - A border that goes around the
padding and content
 Margin - Clears an area outside the border.
The margin is transparent
13SURBHI SAROHA
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 background-color: lightgrey;
 width: 300px;
 border: 15px solid green;
 padding: 50px;
 margin: 20px;
 }
 </style>
 </head>
 <body>
14SURBHI SAROHA
Cont…
 <h2>Demonstrating the Box Model</h2>
 <p>The CSS box model is essentially a box that wraps
around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>
 <div>This text is the content of the box. We have added a
50px padding, 20px margin and a 15px green border. </div>
 </body>
 </html>
15SURBHI SAROHA
CSS Advanced(Grouping, Dimension , Display ,
Positioning , Floating , Align , Pseudo class,
Navigation Bar , Image Sprites , Attribute
sector)
 Image Sprites
 An image sprite is a collection of images put
into a single image.
 A web page with many images can take a
long time to load and generates multiple
server requests.
 Using image sprites will reduce the number of
server requests and save bandwidth.
SURBHI SAROHA 16
Cont….
 Image Sprites - Simple Example
 Instead of using three separate images, we
use this single image ("img_navsprites.gif"):
 With CSS, we can show just the part of the
image we need.
 In the following example the CSS specifies
which part of the "img_navsprites.gif" image
to show:
SURBHI SAROHA 17
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #home {
 width: 46px;
 height: 44px;
 background: url(img_navsprites.gif) 0 0;
 }
 #next {
SURBHI SAROHA 18
Cont….
 width: 43px;
 height: 44px;
 background: url(img_navsprites.gif) -91px 0;
 }
 </style>
 </head>
 <body>
 <img id="home" src="img_trans.gif" width="1" height="1"><br><br>
 <img id="next" src="img_trans.gif" width="1" height="1">
 </body>
 </html>
SURBHI SAROHA 19
CSS Pseudo-classes
 What are Pseudo-classes?
 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
SURBHI SAROHA 20
Syntax
 selector:pseudo-class {
property: value;
}
SURBHI SAROHA 21
CSS Navigation Bar
 Navigation Bar = List of Links
 A navigation bar needs standard HTML as a
base.
 In our examples we will build the navigation
bar from a standard HTML list.
 A navigation bar is basically a list of links, so
using the <ul> and <li> elements makes
perfect sense:
SURBHI SAROHA 22
Example
 <!DOCTYPE html>
 <html>
 <body>
 <ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
 <p>Note: We use href="#" for test links. In a real web site this
would be URLs.</p>
 </body>
 </html>
SURBHI SAROHA 23
OUTPUT
 Home
 News
 Contact
 About
 Note:We use href="#" for test links. In a real
web site this would be URLs.
SURBHI SAROHA 24
Vertical Navigation Bar
Examples
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 200px;
 background-color: #f1f1f1;
 }
SURBHI SAROHA 25
Cont….
 li a {
 display: block;
 color: #000;
 padding: 8px 16px;
 text-decoration: none;
 }
 /* Change the link color on hover */
 li a:hover {
 background-color: #555;
 color: white;
 }
 </style>
 </head>
 <body>
SURBHI SAROHA 26
CSS Color
 Colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="background-
color:Tomato;">Tomato</h1>
 <h1 style="background-
color:Orange;">Orange</h1>
 <h1 style="background-
color:DodgerBlue;">DodgerBlue</h1>
SURBHI SAROHA 27
Cont…
 <h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
 <h1 style="background-color:Gray;">Gray</h1>
 <h1 style="background-
color:SlateBlue;">SlateBlue</h1>
 <h1 style="background-color:Violet;">Violet</h1>
 <h1 style="background-
color:LightGray;">LightGray</h1>
 </body>
 </html>
SURBHI SAROHA 28
CSS Background Color
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="background-color:DodgerBlue;">HelloWorld</h1>
 <p style="background-color:Tomato;">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
 Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
 </p>
 </body>
 </html>
SURBHI SAROHA 29
CSS Text Color
 <!DOCTYPE html>
 <html>
 <body>
 <h3 style="color:Tomato;">HelloWorld</h3>
 <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
 <p style="color:MediumSeaGreen;">Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
 </html>
SURBHI SAROHA 30
CSS Border Color
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="border: 2px solidTomato;">Hello
World</h1>
 <h1 style="border: 2px solid DodgerBlue;">Hello
World</h1>
 <h1 style="border: 2px solidViolet;">Hello
World</h1>
 </body>
 </html>
SURBHI SAROHA 31
SURBHI SAROHA 32
THANK YOU 

More Related Content

What's hot (20)

PPTX
Raster Scan display
Lokesh Singrol
 
PPTX
Introduction to White box testing
Aliaa Monier Ismaail
 
PPT
3 Tier Architecture
Webx
 
PPT
Software cost estimation
Dr. C.V. Suresh Babu
 
PPTX
Chapter 1 2 - some size factors
NancyBeaulah_R
 
PPTX
Design notation
ramya marichamy
 
PPT
Agile Development | Agile Process Models
Ahsan Rahim
 
PPTX
Superscalar & superpipeline processor
Muhammad Ishaq
 
PDF
Software testing axioms
vijayalakshmijanakir1
 
PPTX
Software metrics
syeda madeha azmat
 
PPTX
Chapter 2 software process models
Golda Margret Sheeba J
 
PPTX
Network security model.pptx
ssuserd24233
 
PDF
What is Test Matrix?
QA InfoTech
 
PPTX
Virtualization- Cloud Computing
NIKHILKUMAR SHARDOOR
 
PPTX
Vision of cloud computing
gaurav jain
 
PPT
Process synchronization(deepa)
Nagarajan
 
PPTX
Non Functional Requirement.
Khushboo Shaukat
 
PPTX
The Art of Debugging.pptx
KarthigaiSelviS3
 
PDF
Black Box Testing
Testbytes
 
PPTX
Type checking in compiler design
Sudip Singh
 
Raster Scan display
Lokesh Singrol
 
Introduction to White box testing
Aliaa Monier Ismaail
 
3 Tier Architecture
Webx
 
Software cost estimation
Dr. C.V. Suresh Babu
 
Chapter 1 2 - some size factors
NancyBeaulah_R
 
Design notation
ramya marichamy
 
Agile Development | Agile Process Models
Ahsan Rahim
 
Superscalar & superpipeline processor
Muhammad Ishaq
 
Software testing axioms
vijayalakshmijanakir1
 
Software metrics
syeda madeha azmat
 
Chapter 2 software process models
Golda Margret Sheeba J
 
Network security model.pptx
ssuserd24233
 
What is Test Matrix?
QA InfoTech
 
Virtualization- Cloud Computing
NIKHILKUMAR SHARDOOR
 
Vision of cloud computing
gaurav jain
 
Process synchronization(deepa)
Nagarajan
 
Non Functional Requirement.
Khushboo Shaukat
 
The Art of Debugging.pptx
KarthigaiSelviS3
 
Black Box Testing
Testbytes
 
Type checking in compiler design
Sudip Singh
 

Similar to Concept of CSS part 2 (20)

PPTX
CSS Cascade Style Sheet
Adeel Rasheed
 
PPT
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
PPT
CSS for basic learner
Yoeung Vibol
 
PPTX
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
PDF
Pfnp slides
William Myers
 
PPT
CSS Basics
WordPress Memphis
 
PPTX
Introduction to CSS and all properties.pptx
Neelotpal Dey
 
PPT
CSS - Basics
Shubham_Saurabh
 
DOC
Art of css
Raphael Wanjiku
 
PPTX
Lecture 5 & 6 Advance CSS.pptx for web
ZahraWaheed9
 
PPTX
Concept of CSS unit3
Dr. SURBHI SAROHA
 
PPT
Chapter 6 - Web Design
tclanton4
 
PDF
CSS.pdf
SoniaJoshi25
 
PDF
Css from scratch
Ahmad Al-ammar
 
PDF
Intro to html, css & sass
Sean Wolfe
 
PDF
HTML ,CSS ,JQuery Cheat Sheet
Shiva Saxena
 
PPTX
css front end development , designing web page
Indu32
 
PPTX
CSS presentation for beginners where they can understand easily
Indu32
 
CSS Cascade Style Sheet
Adeel Rasheed
 
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
CSS for basic learner
Yoeung Vibol
 
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
Pfnp slides
William Myers
 
CSS Basics
WordPress Memphis
 
Introduction to CSS and all properties.pptx
Neelotpal Dey
 
CSS - Basics
Shubham_Saurabh
 
Art of css
Raphael Wanjiku
 
Lecture 5 & 6 Advance CSS.pptx for web
ZahraWaheed9
 
Concept of CSS unit3
Dr. SURBHI SAROHA
 
Chapter 6 - Web Design
tclanton4
 
CSS.pdf
SoniaJoshi25
 
Css from scratch
Ahmad Al-ammar
 
Intro to html, css & sass
Sean Wolfe
 
HTML ,CSS ,JQuery Cheat Sheet
Shiva Saxena
 
css front end development , designing web page
Indu32
 
CSS presentation for beginners where they can understand easily
Indu32
 
Ad

More from Dr. SURBHI SAROHA (20)

PPTX
Deep learning(UNIT 3) BY Ms SURBHI SAROHA
Dr. SURBHI SAROHA
 
PPTX
MOBILE COMPUTING UNIT 2 by surbhi saroha
Dr. SURBHI SAROHA
 
PPTX
Mobile Computing UNIT 1 by surbhi saroha
Dr. SURBHI SAROHA
 
PPTX
DEEP LEARNING (UNIT 2 ) by surbhi saroha
Dr. SURBHI SAROHA
 
PPTX
Introduction to Deep Leaning(UNIT 1).pptx
Dr. SURBHI SAROHA
 
PPTX
Cloud Computing (Infrastructure as a Service)UNIT 2
Dr. SURBHI SAROHA
 
PPTX
Management Information System(Unit 2).pptx
Dr. SURBHI SAROHA
 
PPTX
Searching in Data Structure(Linear search and Binary search)
Dr. SURBHI SAROHA
 
PPTX
Management Information System(UNIT 1).pptx
Dr. SURBHI SAROHA
 
PPTX
Introduction to Cloud Computing(UNIT 1).pptx
Dr. SURBHI SAROHA
 
PPTX
JAVA (UNIT 5)
Dr. SURBHI SAROHA
 
PPTX
DBMS (UNIT 5)
Dr. SURBHI SAROHA
 
PPTX
DBMS UNIT 4
Dr. SURBHI SAROHA
 
PPTX
JAVA(UNIT 4)
Dr. SURBHI SAROHA
 
PPTX
OOPs & C++(UNIT 5)
Dr. SURBHI SAROHA
 
PPTX
OOPS & C++(UNIT 4)
Dr. SURBHI SAROHA
 
PPTX
DBMS UNIT 3
Dr. SURBHI SAROHA
 
PPTX
JAVA (UNIT 3)
Dr. SURBHI SAROHA
 
PPTX
Keys in dbms(UNIT 2)
Dr. SURBHI SAROHA
 
PPTX
DBMS (UNIT 2)
Dr. SURBHI SAROHA
 
Deep learning(UNIT 3) BY Ms SURBHI SAROHA
Dr. SURBHI SAROHA
 
MOBILE COMPUTING UNIT 2 by surbhi saroha
Dr. SURBHI SAROHA
 
Mobile Computing UNIT 1 by surbhi saroha
Dr. SURBHI SAROHA
 
DEEP LEARNING (UNIT 2 ) by surbhi saroha
Dr. SURBHI SAROHA
 
Introduction to Deep Leaning(UNIT 1).pptx
Dr. SURBHI SAROHA
 
Cloud Computing (Infrastructure as a Service)UNIT 2
Dr. SURBHI SAROHA
 
Management Information System(Unit 2).pptx
Dr. SURBHI SAROHA
 
Searching in Data Structure(Linear search and Binary search)
Dr. SURBHI SAROHA
 
Management Information System(UNIT 1).pptx
Dr. SURBHI SAROHA
 
Introduction to Cloud Computing(UNIT 1).pptx
Dr. SURBHI SAROHA
 
JAVA (UNIT 5)
Dr. SURBHI SAROHA
 
DBMS (UNIT 5)
Dr. SURBHI SAROHA
 
DBMS UNIT 4
Dr. SURBHI SAROHA
 
JAVA(UNIT 4)
Dr. SURBHI SAROHA
 
OOPs & C++(UNIT 5)
Dr. SURBHI SAROHA
 
OOPS & C++(UNIT 4)
Dr. SURBHI SAROHA
 
DBMS UNIT 3
Dr. SURBHI SAROHA
 
JAVA (UNIT 3)
Dr. SURBHI SAROHA
 
Keys in dbms(UNIT 2)
Dr. SURBHI SAROHA
 
DBMS (UNIT 2)
Dr. SURBHI SAROHA
 
Ad

Recently uploaded (20)

PDF
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
PPT
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
PDF
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
PDF
Dimensions of Societal Planning in Commonism
StefanMz
 
PPSX
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
PDF
LAW OF CONTRACT ( 5 YEAR LLB & UNITARY LLB)- MODULE-3 - LEARN THROUGH PICTURE
APARNA T SHAIL KUMAR
 
PPTX
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
PDF
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
PDF
The Different Types of Non-Experimental Research
Thelma Villaflores
 
PPTX
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
PPT
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
PPTX
How to Set Maximum Difference Odoo 18 POS
Celine George
 
PDF
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
PPTX
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PDF
SSHS-2025-PKLP_Quarter-1-Dr.-Kerby-Alvarez.pdf
AishahSangcopan1
 
PPTX
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
PDF
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PDF
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
Dimensions of Societal Planning in Commonism
StefanMz
 
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
LAW OF CONTRACT ( 5 YEAR LLB & UNITARY LLB)- MODULE-3 - LEARN THROUGH PICTURE
APARNA T SHAIL KUMAR
 
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
The Different Types of Non-Experimental Research
Thelma Villaflores
 
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
How to Set Maximum Difference Odoo 18 POS
Celine George
 
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
SSHS-2025-PKLP_Quarter-1-Dr.-Kerby-Alvarez.pdf
AishahSangcopan1
 
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 

Concept of CSS part 2

  • 1. CONCEPT OF CSS PART II BY:SURBHI SAROHA Assistant Professor 1SURBHI SAROHA
  • 2. SYLLABUS  CSS Id and Class.  Box Model(Introduction , Border properties , Padding Properties , Margin properties).  CSS Advanced(Grouping, Dimension , Display , Positioning , Floating , Align , Pseudo class, Navigation Bar , Image Sprites , Attribute sector)  CSS Color 2SURBHI SAROHA
  • 3. CSS Id and Class.  In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).  The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. 3SURBHI SAROHA
  • 4. The CSS id Selector  The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element is unique within a page, so the id selector is used to select one unique element!  To select an element with a specific id, write a hash (#) character, followed by the id of the element. 4SURBHI SAROHA
  • 5. Example  <!DOCTYPE html>  <html>  <head>  <style>  #para1 {  text-align: center;  color: red;  }  </style>  </head>  <body>  <p id="para1">HelloWorld!</p>  <p>This paragraph is not affected by the style.</p>  </body>  </html> 5SURBHI SAROHA
  • 6. The CSS class Selector  The class selector selects HTML elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the class name. 6SURBHI SAROHA
  • 7. Example  <!DOCTYPE html>  <html>  <head>  <style>  .center {  text-align: center;  color: red;  }  </style>  </head>  <body>  <h1 class="center">Red and center-aligned heading</h1>  <p class="center">Red and center-aligned paragraph.</p>  </body>  </html> 7SURBHI SAROHA
  • 8. Box Model(Introduction , Border properties , Padding Properties , Margin properties).  When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.  CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.  Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. 8SURBHI SAROHA
  • 10. Cont….  The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height).  It often has a background color or background image.  If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.  The padding area, bounded by the padding edge, extends the content area to include the element's padding.  Its dimensions are the padding-box width and the padding-box height.  The thickness of the padding is determined by the padding- top, padding-right, padding-bottom, padding-left, and shorthand padding properties. 10SURBHI SAROHA
  • 11. Cont…  The border area, bounded by the border edge, extends the padding area to include the element's borders.  Its dimensions are the border-box width and the border-box height.  The thickness of the borders are determined by the border- width and shorthand border properties.  If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max- width, height, min-height, and max-height properties.  When there is a background (background-color or background- image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering).  This default behavior can be altered with the background-clip css property. 11SURBHI SAROHA
  • 12. Cont….  The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors.  Its dimensions are the margin-box width and the margin- box height.  The size of the margin area is determined by the margin- top, margin-right, margin-bottom, margin-left, and shorthand margin properties.When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.  Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the borders and padding are still displayed around the content. 12SURBHI SAROHA
  • 13. Cont…  Explanation of the different parts:  Content -The content of the box, where text and images appear  Padding - Clears an area around the content. The padding is transparent  Border - A border that goes around the padding and content  Margin - Clears an area outside the border. The margin is transparent 13SURBHI SAROHA
  • 14. Example  <!DOCTYPE html>  <html>  <head>  <style>  div {  background-color: lightgrey;  width: 300px;  border: 15px solid green;  padding: 50px;  margin: 20px;  }  </style>  </head>  <body> 14SURBHI SAROHA
  • 15. Cont…  <h2>Demonstrating the Box Model</h2>  <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>  <div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. </div>  </body>  </html> 15SURBHI SAROHA
  • 16. CSS Advanced(Grouping, Dimension , Display , Positioning , Floating , Align , Pseudo class, Navigation Bar , Image Sprites , Attribute sector)  Image Sprites  An image sprite is a collection of images put into a single image.  A web page with many images can take a long time to load and generates multiple server requests.  Using image sprites will reduce the number of server requests and save bandwidth. SURBHI SAROHA 16
  • 17. Cont….  Image Sprites - Simple Example  Instead of using three separate images, we use this single image ("img_navsprites.gif"):  With CSS, we can show just the part of the image we need.  In the following example the CSS specifies which part of the "img_navsprites.gif" image to show: SURBHI SAROHA 17
  • 18. Example  <!DOCTYPE html>  <html>  <head>  <style>  #home {  width: 46px;  height: 44px;  background: url(img_navsprites.gif) 0 0;  }  #next { SURBHI SAROHA 18
  • 19. Cont….  width: 43px;  height: 44px;  background: url(img_navsprites.gif) -91px 0;  }  </style>  </head>  <body>  <img id="home" src="img_trans.gif" width="1" height="1"><br><br>  <img id="next" src="img_trans.gif" width="1" height="1">  </body>  </html> SURBHI SAROHA 19
  • 20. CSS Pseudo-classes  What are Pseudo-classes?  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 SURBHI SAROHA 20
  • 21. Syntax  selector:pseudo-class { property: value; } SURBHI SAROHA 21
  • 22. CSS Navigation Bar  Navigation Bar = List of Links  A navigation bar needs standard HTML as a base.  In our examples we will build the navigation bar from a standard HTML list.  A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: SURBHI SAROHA 22
  • 23. Example  <!DOCTYPE html>  <html>  <body>  <ul>  <li><a href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact">Contact</a></li>  <li><a href="#about">About</a></li>  </ul>  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>  </body>  </html> SURBHI SAROHA 23
  • 24. OUTPUT  Home  News  Contact  About  Note:We use href="#" for test links. In a real web site this would be URLs. SURBHI SAROHA 24
  • 25. Vertical Navigation Bar Examples  <!DOCTYPE html>  <html>  <head>  <style>  ul {  list-style-type: none;  margin: 0;  padding: 0;  width: 200px;  background-color: #f1f1f1;  } SURBHI SAROHA 25
  • 26. Cont….  li a {  display: block;  color: #000;  padding: 8px 16px;  text-decoration: none;  }  /* Change the link color on hover */  li a:hover {  background-color: #555;  color: white;  }  </style>  </head>  <body> SURBHI SAROHA 26
  • 27. CSS Color  Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.  <!DOCTYPE html>  <html>  <body>  <h1 style="background- color:Tomato;">Tomato</h1>  <h1 style="background- color:Orange;">Orange</h1>  <h1 style="background- color:DodgerBlue;">DodgerBlue</h1> SURBHI SAROHA 27
  • 28. Cont…  <h1 style="background- color:MediumSeaGreen;">MediumSeaGreen</h1>  <h1 style="background-color:Gray;">Gray</h1>  <h1 style="background- color:SlateBlue;">SlateBlue</h1>  <h1 style="background-color:Violet;">Violet</h1>  <h1 style="background- color:LightGray;">LightGray</h1>  </body>  </html> SURBHI SAROHA 28
  • 29. CSS Background Color  <!DOCTYPE html>  <html>  <body>  <h1 style="background-color:DodgerBlue;">HelloWorld</h1>  <p style="background-color:Tomato;">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  </p>  </body>  </html> SURBHI SAROHA 29
  • 30. CSS Text Color  <!DOCTYPE html>  <html>  <body>  <h3 style="color:Tomato;">HelloWorld</h3>  <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  </body>  </html> SURBHI SAROHA 30
  • 31. CSS Border Color  <!DOCTYPE html>  <html>  <body>  <h1 style="border: 2px solidTomato;">Hello World</h1>  <h1 style="border: 2px solid DodgerBlue;">Hello World</h1>  <h1 style="border: 2px solidViolet;">Hello World</h1>  </body>  </html> SURBHI SAROHA 31