SlideShare uma empresa Scribd logo
1 de 30
PRESENTATION SUMMARY
-> What is CSS ?
-> CSS and HTML
-> The Box Model.
-> Style Sheet Implementation.
-> CSS Rule Structure.
-> HTML and DIV’s.
-> Common CSS properties.
WHAT IS CSS ?
Css stands for cascading style sheet.
It is not a language. It is a pat of
design. CSS is a heart of HTML.
Typical CSS file is a text file with an
extension “.CSS” and contain a
series of commands.
HTML WITHOUT CSS:-
“Html without CSS is like a piece of candy without
a pretty wrapper.”
Without CSS, HTML elements typically flow from
top to bottom of the page and position
themselves to the left by default .
With CSS help, we can create containers or DIV’s
to better organize content and make a Web page
visually appealing.
CSS AND HTML:-
(a)HTML and CSS work together to
produce beautiful and functional Web
sites.
(b) HTML= Structure
(c) CSS= Style
THE BOX MODEL:-
CSS works on the box model. A typical
Web page consists of many boxes joined
together from top to bottom . These boxes
can be stacked nested, and float.
ATTACHING A STYLE SHEET:-
Attach a style sheet to a page by adding the code to the
<head>
Section of the HTML page. There are 3 ways to attach CSS
to a page:
1.External style sheet:- Best used to control styling
on multiple pages.
<link href=“css/style.css” type=“text/css”
rel=“stylesheet”/>
2.Internal style sheet:-Best used to control
styling in the page.
<style type=“type=“text/css”>
H1 { color : red }
</style>
3.Inline Style Sheet:- CSS is not attached in the
<header> but is used directly within HTML tages.
<p style=“color : red”> Some Text </p>
CSS RULE STRUCTURE:-
A CSS RULE is made up of a selector and a declaration. A
declaration consists of property and value.
Selector { property : value ; }
Declaration
SELECTOR:-
A selector, here in green, is often an element of
HTML.
body { property : value; }
h1 { property : value; }
em { property : value; }
p { property : value; }
PROPERTIES AND VALUES:-
body { background ; purple; }
h1 { color : green; }
h2 { font-size: large ; }
p { color : #FFF ; }
Properties and Values tell an HTML elements how to display.
body
{
background : purple ;
color : green ;
}
COMMENT IN CSS:-
. Explain the purpose of the coding.
. Help others read and understand the code.
. Server as a reminder to you for what it all
means.
. Starts with /* and ends with */.
TYPICAL WEB PAGE:-
TYPICAL WEB PAGE (HTML)
Typical HTML Web page is made up of containers(boxes)
or DIV’s. Each DIV is assigned an ID or a class.
<div id =“ container”>
<div id=“ header”> Insert Tittle </div>
<div id=“ main”> content
<div id=“ menu ”> content </div>
</div>
<div id=“ footer ”> content </div>
</div>
TYPICAL WEB PAGE (CSS)
The CSS file users t he same DIV / I D / C LASS
names as the HTML and uses them to style
the elements.
# container { property : value ; }
# menu { property : value ; }
# main { property : value ; }
# footer { property : value ; }
IDS AND CLASSES:-
. IDs (#) are unique and can only be used once on
the page.
. Classes ( . ) can be used as many times needed.
HTML codes:-
<h1 id =“ main heading”> Names</h1>
<p class =“name”>xyz</p>
CSS codes:-
#main heading { color : green}
.name { color :red}
CSS BOX PROPERTIES:-
. Background-color
. Width
. Padding
. Margin
. Border-width
. Border color
. Border-style
. Background-image
BACKGROUND COLOR:-
The background-color property specifies
the background color of an element.
Example
body {
background-color: light blue;
}
BACKGROUND IMAGE
The background-image property specifies an image
to use as the background of an element.
By default, the image is repeated so it covers the
entire element.
Example:-
body {
background-image: url("paper.gif");
}
CSS BORDER STYLE:-
The border-style property specifies what kind of border to
display.
The following values are allowed:
-dotted - Defines a dotted border
-dashed - Defines a dashed border
-solid - Defines a solid border
-double - Defines a double border
-none - Defines no border
-hidden - Defines a hidden border
CSS BORDER COLOR:-
The border-color property is used to set the color of the
four borders.
The color can be set by:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
Example
p.one {
border-style: solid;
border-color: red;
}
CSS HEIGHT AND WIDTH:-
The height and width properties are used to set the
height and width of an element.
The height and width can be set to auto (this is
default. Means that the browser calculates the
height and width), or be specified in length
values, like px, cm, etc., or in percent (%) of the
containing block.
Example:-
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
CSS MARGIN:-
The CSS margin properties set the size of the white
space OUTSIDE the border.
CSS has properties for specifying the margin for each side
of an element:
-margin-top
-margin-right
-margin-bottom
-margin-left
CSS PADDING:-
The CSS padding properties define the white space between the
element content and the element border.
The padding clears an area around the content (inside the
border) of an element.
CSS has properties for specifying the padding for each side of an element:
-padding-top
-padding-right
-padding-bottom
-padding-left
CSS FONTS:-
The CSS font properties define the font family, boldness,
size, and the style of a text.
(a) CSS Font Families:-
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look
(like "Serif" or "Monospace")
font family - a specific font family (like "Times New
Roman" or "Arial")
(b) Font Family:-
The font family of a text is set with the font-
family property.
Example
p {
font-family: "Times New Roman", Times, serif;
}
(c) Font Style:-
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
Example:-
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
(d) Font Size:-
The font-size property sets the size of the text.
Always use the proper HTML tags, like <h1> -
<h6> for headings and <p> for paragraphs.
ADVANTAGES OF CSS:-
-Easier to maintain and update.
-Greater consistency in design.
-More formatting options.
-Lightweight code.
-Faster download times.
-Search engine optimization benefits.
-Ease of presenting different styles to different
viewers.
-Greater accessibility.
Thank you

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
CSS
CSSCSS
CSS
 
Html basics
Html basicsHtml basics
Html basics
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Css3
Css3Css3
Css3
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
CSS
CSSCSS
CSS
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
css.ppt
css.pptcss.ppt
css.ppt
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 

Destaque

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 

Destaque (20)

Html Ppt
Html PptHtml Ppt
Html Ppt
 
Css
CssCss
Css
 
Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Css from scratch
Css from scratchCss from scratch
Css from scratch
 
OBIEE: How to change dashboard background color or add background image
OBIEE: How to change dashboard background color or add background imageOBIEE: How to change dashboard background color or add background image
OBIEE: How to change dashboard background color or add background image
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
HTML, CSS And JavaScript Training Institute in Ambala ! Batra Computer Centre
HTML, CSS And JavaScript Training Institute in Ambala ! Batra Computer CentreHTML, CSS And JavaScript Training Institute in Ambala ! Batra Computer Centre
HTML, CSS And JavaScript Training Institute in Ambala ! Batra Computer Centre
 
Web designing
Web designingWeb designing
Web designing
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Web Engineering - Basic CSS Properties
Web Engineering - Basic CSS PropertiesWeb Engineering - Basic CSS Properties
Web Engineering - Basic CSS Properties
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 

Semelhante a Css ppt (20)

WT CSS
WT  CSSWT  CSS
WT CSS
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
 
html-css
html-csshtml-css
html-css
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
Css
CssCss
Css
 
Ict 8 css
Ict 8 cssIct 8 css
Ict 8 css
 

Último

Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 

Último (20)

Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 

Css ppt

  • 1.
  • 2. PRESENTATION SUMMARY -> What is CSS ? -> CSS and HTML -> The Box Model. -> Style Sheet Implementation. -> CSS Rule Structure. -> HTML and DIV’s. -> Common CSS properties.
  • 3. WHAT IS CSS ? Css stands for cascading style sheet. It is not a language. It is a pat of design. CSS is a heart of HTML. Typical CSS file is a text file with an extension “.CSS” and contain a series of commands.
  • 4. HTML WITHOUT CSS:- “Html without CSS is like a piece of candy without a pretty wrapper.” Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default . With CSS help, we can create containers or DIV’s to better organize content and make a Web page visually appealing.
  • 5. CSS AND HTML:- (a)HTML and CSS work together to produce beautiful and functional Web sites. (b) HTML= Structure (c) CSS= Style
  • 6. THE BOX MODEL:- CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom . These boxes can be stacked nested, and float.
  • 7. ATTACHING A STYLE SHEET:- Attach a style sheet to a page by adding the code to the <head> Section of the HTML page. There are 3 ways to attach CSS to a page: 1.External style sheet:- Best used to control styling on multiple pages. <link href=“css/style.css” type=“text/css” rel=“stylesheet”/>
  • 8. 2.Internal style sheet:-Best used to control styling in the page. <style type=“type=“text/css”> H1 { color : red } </style> 3.Inline Style Sheet:- CSS is not attached in the <header> but is used directly within HTML tages. <p style=“color : red”> Some Text </p>
  • 9. CSS RULE STRUCTURE:- A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value. Selector { property : value ; } Declaration
  • 10. SELECTOR:- A selector, here in green, is often an element of HTML. body { property : value; } h1 { property : value; } em { property : value; } p { property : value; }
  • 11. PROPERTIES AND VALUES:- body { background ; purple; } h1 { color : green; } h2 { font-size: large ; } p { color : #FFF ; } Properties and Values tell an HTML elements how to display. body { background : purple ; color : green ; }
  • 12. COMMENT IN CSS:- . Explain the purpose of the coding. . Help others read and understand the code. . Server as a reminder to you for what it all means. . Starts with /* and ends with */.
  • 14. TYPICAL WEB PAGE (HTML) Typical HTML Web page is made up of containers(boxes) or DIV’s. Each DIV is assigned an ID or a class. <div id =“ container”> <div id=“ header”> Insert Tittle </div> <div id=“ main”> content <div id=“ menu ”> content </div> </div> <div id=“ footer ”> content </div> </div>
  • 15. TYPICAL WEB PAGE (CSS) The CSS file users t he same DIV / I D / C LASS names as the HTML and uses them to style the elements. # container { property : value ; } # menu { property : value ; } # main { property : value ; } # footer { property : value ; }
  • 16. IDS AND CLASSES:- . IDs (#) are unique and can only be used once on the page. . Classes ( . ) can be used as many times needed. HTML codes:- <h1 id =“ main heading”> Names</h1> <p class =“name”>xyz</p> CSS codes:- #main heading { color : green} .name { color :red}
  • 17. CSS BOX PROPERTIES:- . Background-color . Width . Padding . Margin . Border-width . Border color . Border-style . Background-image
  • 18. BACKGROUND COLOR:- The background-color property specifies the background color of an element. Example body { background-color: light blue; }
  • 19. BACKGROUND IMAGE The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Example:- body { background-image: url("paper.gif"); }
  • 20. CSS BORDER STYLE:- The border-style property specifies what kind of border to display. The following values are allowed: -dotted - Defines a dotted border -dashed - Defines a dashed border -solid - Defines a solid border -double - Defines a double border -none - Defines no border -hidden - Defines a hidden border
  • 21. CSS BORDER COLOR:- The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red" Hex - specify a hex value, like "#ff0000" Example p.one { border-style: solid; border-color: red; }
  • 22. CSS HEIGHT AND WIDTH:- The height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block. Example:- div { width: 500px; height: 100px; border: 3px solid #73AD21; }
  • 23. CSS MARGIN:- The CSS margin properties set the size of the white space OUTSIDE the border. CSS has properties for specifying the margin for each side of an element: -margin-top -margin-right -margin-bottom -margin-left
  • 24. CSS PADDING:- The CSS padding properties define the white space between the element content and the element border. The padding clears an area around the content (inside the border) of an element. CSS has properties for specifying the padding for each side of an element: -padding-top -padding-right -padding-bottom -padding-left
  • 25. CSS FONTS:- The CSS font properties define the font family, boldness, size, and the style of a text. (a) CSS Font Families:- In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial")
  • 26. (b) Font Family:- The font family of a text is set with the font- family property. Example p { font-family: "Times New Roman", Times, serif; }
  • 27. (c) Font Style:- The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics Example:- p.normal { font-style: normal; } p.italic { font-style: italic; }
  • 28. (d) Font Size:- The font-size property sets the size of the text. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
  • 29. ADVANTAGES OF CSS:- -Easier to maintain and update. -Greater consistency in design. -More formatting options. -Lightweight code. -Faster download times. -Search engine optimization benefits. -Ease of presenting different styles to different viewers. -Greater accessibility.