CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
Aasma13
20 views
32 slides
May 29, 2024
Slide 1 of 32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
About This Presentation
CSS INTRO
Slide Content
CSS
DIVTaginHTML
•The<div>tag definesa divisionor a sectioninan HTMLdocument.
•The<div>tag iseasily styledbyusingthe class oridattribute.
•The HTML Content Division element (<div>) is the generic container for
flowcontent.
•It has no effect on the content or layout until styled in some way using
CSS)
•The<div>tag definesa divisionor a sectioninan HTMLdocument.
•The<div>tag iseasily styledbyusingthe class oridattribute.
•The HTML Content Division element (<div>) is the generic container for
flowcontent.
•It has no effect on the content or layout until styled in some way using
CSS)
Cascadingstyle-sheets(CSS)
•CreatedbyHakonLieofMITin1994
•Has become the W3C standard for controlling visual presentation of web
pages
•Cascadingstyle-sheetsarepowerfulmechanismtoaddstyletoweb
document
•Enforcestandardsanduniformity
•Createdynamiceffects
•Worksbyallowingyou tospecifyrules
•CreatedbyHakonLieofMITin1994
•Has become the W3C standard for controlling visual presentation of web
pages
•Cascadingstyle-sheetsarepowerfulmechanismtoaddstyletoweb
document
•Enforcestandardsanduniformity
•Createdynamiceffects
•Worksbyallowingyou tospecifyrules
AdvantagesofCSS
•Savestime
•Easytochange
•Keepconsistency
•Giveyoumorecontrolover layout
•Usestyles withJavaScript
•Makeiteasy to createa common formatfor allthe Web pages
•Savestime
•Easytochange
•Keepconsistency
•Giveyoumorecontrolover layout
•Usestyles withJavaScript
•Makeiteasy to createa common formatfor allthe Web pages
TypesofStyleSheets
•In-linestyles
•Embedded/internalstyles
•Externalstylesheet
•In-linestyles
•Embedded/internalstyles
•Externalstylesheet
In-lineStyleSheet
•AddstylestoeachtagwithintheHTMLfile
•Useitwhenyouneedtoformat just a single sectionina webpage
•Style attributeisusedtoaddstyle
•Example
•<h1style=“color:red;font-family:sans-sarif;”>Thisismycontent</h1>
•AddstylestoeachtagwithintheHTMLfile
•Useitwhenyouneedtoformat just a single sectionina webpage
•Style attributeisusedtoaddstyle
•Example
•<h1style=“color:red;font-family:sans-sarif;”>Thisismycontent</h1>
InternalStyleSheet
•Astyleis appliedtothe entireHTMLfile
•Useitwhenyouneedtomodifyallinstancesof particularelement(e.g.,h1)ina
webpage
•Thisisdefinebetweenheadtag
Example
<style>
h1{
color:red;
font-family:sans-serif;
}
</style>
•Astyleis appliedtothe entireHTMLfile
•Useitwhenyouneedtomodifyallinstancesof particularelement(e.g.,h1)ina
webpage
•Thisisdefinebetweenheadtag
Example
<style>
h1{
color:red;
font-family:sans-serif;
}
</style>
OUTPUT
ExternalStyleSheet
•Anexternalstylesheetisatextfilecontainingthe styledefinition
(declaration)having extension.css
•Use itwhenyou needto controlthestylefor anentirewebsite
•Steps to createexternalstylesheet:-
•Openanew blankdocumentin NotepadorNotepad++
•Typestyledeclarations,Forexample:h1 {color:red;font-family:calibri;}
•Donotinclude<style>tags
•Savethedocumentasfilename.css
•Anexternalstylesheetisatextfilecontainingthe styledefinition
(declaration)having extension.css
•Use itwhenyou needto controlthestylefor anentirewebsite
•Steps to createexternalstylesheet:-
•Openanew blankdocumentin NotepadorNotepad++
•Typestyledeclarations,Forexample:h1 {color:red;font-family:calibri;}
•Donotinclude<style>tags
•Savethedocumentasfilename.css
ExternalStyleSheet
•OpenanHTMLfile
•Between<head>and</head>add
<linkhref=URLrel=“relation_type” type=“link_type”>
•URListhefile.css
•Relation_type=“stylesheet”
•Link_type=“text/css”
•Savethisfileas.html
Forexampleif.htmlandthe .css fileare inthe same directory
<linkhref=file.cssrel=“stylesheet”type=“text/css”>
•OpenanHTMLfile
•Between<head>and</head>add
<linkhref=URLrel=“relation_type” type=“link_type”>
•URListhefile.css
•Relation_type=“stylesheet”
•Link_type=“text/css”
•Savethisfileas.html
Forexampleif.htmlandthe .css fileare inthe same directory
<linkhref=file.cssrel=“stylesheet”type=“text/css”>
DefiningCSSRule
Aruleconsistsof
•Aselector:elementorelements the declarationapplies to
•Declaration:howthe elementsreferredto intheselectorshouldbe styled
•Property:whichisthepropertyoftheselectedelement
•Value:which isa specificationfor this property
Aruleconsistsof
•Aselector:elementorelements the declarationapplies to
•Declaration:howthe elementsreferredto intheselectorshouldbe styled
•Property:whichisthepropertyoftheselectedelement
•Value:which isa specificationfor this property
UsingID’s
°Use an id to distinguish something, like a paragraph, from the others in a
document
°Theidselectorisused to specifya stylefor asingle, uniqueelement
°Forexample:-
°CSSfile:
°#id_name
{style attributesandvalues}
°HTMLfile
°<tagID=id_name>
°Use an id to distinguish something, like a paragraph, from the others in a
document
°Theidselectorisused to specifya stylefor asingle, uniqueelement
°Forexample:-
°CSSfile:
°#id_name
{style attributesandvalues}
°HTMLfile
°<tagID=id_name>
UsingClasses
°HTMLandXHTMLrequireeachidbeunique–thereforeanidvaluecan
onlybeused onceina document
°You canmarka groupof elementswithacommonidentifierusingtheclass
attribute
°Tocreateaclass
•tag.class_name{styleattributes}or.class_name{styleattributes}
°Toapply astyle
•<tagCLASS=class_name>
•<h1CLASS=FirstHeader>Contentgoes here….</h1>
°HTMLandXHTMLrequireeachidbeunique–thereforeanidvaluecan
onlybeused onceina document
°You canmarka groupof elementswithacommonidentifierusingtheclass
attribute
°Tocreateaclass
•tag.class_name{styleattributes}or.class_name{styleattributes}
°Toapply astyle
•<tagCLASS=class_name>
•<h1CLASS=FirstHeader>Contentgoes here….</h1>
DifferencebetweenID’sandClasses
°Youcan’thave morethanonetagwiththesame IDvalue
°Youcanapply thesameClassvaluetomultipledocumenttags
°UseID's forany elementsthataresimplyusedonceona page
° OR
°Only use classes to style websites, but, when you have to use an element in
JavaScript,use an identifier
°Youcan’thave morethanonetagwiththesame IDvalue
°Youcanapply thesameClassvaluetomultipledocumenttags
°UseID's forany elementsthataresimplyusedonceona page
° OR
°Only use classes to style websites, but, when you have to use an element in
JavaScript,use an identifier
HTMLFile CSSFile
file.cssPage.html
file.cssPage.html
OUTPUT
HTMLFile CSSFile
file.css
Page.html
Wecanusemorethanoneclassesinonetagbyusing“space”
file.css
Page.html
Wecanusemorethanoneclassesinonetagbyusing“space”
OUTPUT
CSSFontproperties
°font-family
°font-size
°font-weight
°font-style
°font-variant
°font-family
°font-size
°font-weight
°font-style
°font-variant
CSSFontproperties
font-family:
°Specifies the typeface or family of font that should be used
Commonvalues:
°Arial, Courier/Courier New, Georgia, Times/Times New Roman and
Verdana
Example:
h1{
font-family:arial
}
font-family:
°Specifies the typeface or family of font that should be used
Commonvalues:
°Arial, Courier/Courier New, Georgia, Times/Times New Roman and
Verdana
Example:
h1{
font-family:arial
}
CSSFontproperties
font-size:
°Specifies the size of a font
Commonvalues:
°Inpixels(12px,20pxetc.)
°Absolutsize(small,medium,lage,x-largeetc.)
Example:
h1{
font-size:20px
}
font-size:
°Specifies the size of a font
Commonvalues:
°Inpixels(12px,20pxetc.)
°Absolutsize(small,medium,lage,x-largeetc.)
Example:
h1{
font-size:20px
}
CSSFontproperties
font-weight:
°Specifieswhetherthe fontshould beboldornormal
Commonvalues:
°Normal,bold,bolder,lighter
°100,200,300, 400,500,600,700,800,900
Example:
h1{
font-weight:bold
}
font-weight:
°Specifieswhetherthe fontshould beboldornormal
Commonvalues:
°Normal,bold,bolder,lighter
°100,200,300, 400,500,600,700,800,900
Example:
h1{
font-weight:bold
}
CSSFontproperties
font-style:
°Specifieswhetherthe fontshould benormal,italicor oblique
Commonvalues:
°Normal, italic, oblique
Example:
h1{
font-style:italic
}
font-style:
°Specifieswhetherthe fontshould benormal,italicor oblique
Commonvalues:
°Normal, italic, oblique
Example:
h1{
font-style:italic
}
CSSFontproperties
font-variant:
°Specifieswhetherthefontshouldbenormalorsmall-caps(smallerversion
ofuppercase)
Commonvalues:
°Normal,small-caps
Example:
h1{
font-variant :small-caps}
font-variant:
°Specifieswhetherthefontshouldbenormalorsmall-caps(smallerversion
ofuppercase)
Commonvalues:
°Normal,small-caps
Example:
h1{
font-variant :small-caps}
CSSTextproperties
°color
°text-align
°vertical-align
°text-decoration
°text-transform
°word-spacing
°letter-spacing
°color
°text-align
°vertical-align
°text-decoration
°text-transform
°word-spacing
°letter-spacing
CSSTextproperties
°color:
•specifiesthecolorofthetext
•P{color:green}
°text-align:
•horizontalalignmentofthetext
•Left,right,centeror justify
°vertical-align:
•Verticalalignmentofthetext
•Sub,super,top,middle,bottom
°color:
•specifiesthecolorofthetext
•P{color:green}
°text-align:
•horizontalalignmentofthetext
•Left,right,centeror justify
°vertical-align:
•Verticalalignmentofthetext
•Sub,super,top,middle,bottom
CSSTextproperties
°text-decoration:
•specifiesthewhetherthetextshouldbeunderline, overline,
line-throughorblinking
°text-transform:
•text shouldbelowercase,uppercaseorcapitalized
°letter-spacing:
•Specifiesthe spacebetweenletters
•H1{letter-spacing:3px}
°text-decoration:
•specifiesthewhetherthetextshouldbeunderline, overline,
line-throughorblinking
°text-transform:
•text shouldbelowercase,uppercaseorcapitalized
°letter-spacing:
•Specifiesthe spacebetweenletters
•H1{letter-spacing:3px}
CSSTextproperties
°word-spacing:
•Specifiesthespacebetweenwords
•H1{word-spacing:4px}
°word-spacing:
•Specifiesthespacebetweenwords
•H1{word-spacing:4px}
CSSBackgroundproperties
°background-color:
•Specifiesthebackgroundcolor
°background-image:
•Specifiesthebackgroundimage
°background-repeat:
•Specifieswhetherthe image shouldrepeatornot
°background-position:
•Whereanimageshouldbepositioned
°background-color:
•Specifiesthebackgroundcolor
°background-image:
•Specifiesthebackgroundimage
°background-repeat:
•Specifieswhetherthe image shouldrepeatornot
°background-position:
•Whereanimageshouldbepositioned
CSSBorderproperties
°border-style(solid,dashed,doted,double etc.)
°border-color
°border-bottom(solid,dashed,doted,double etc.)
°Padding-left
°Padding-right
°Padding-top
°padding-bottom
CSSPaddingproperties
°border-style(solid,dashed,doted,double etc.)
°border-color
°border-bottom(solid,dashed,doted,double etc.)
°Padding-left
°Padding-right
°Padding-top
°padding-bottom
CSSPaddingproperties
Styling“HYPERLINKS”
°color:
•Changes thecolorofthe links
°background-color:
•Highlightsthelink,as ifithad beenhighlightedwith a
highlighterpen
°text-decoration:
•Underline,strikethrough,over-line, blink
°color:
•Changes thecolorofthe links
°background-color:
•Highlightsthelink,as ifithad beenhighlightedwith a
highlighterpen
°text-decoration:
•Underline,strikethrough,over-line, blink
Styling“HYPERLINKS”
°Pseudo-classesoflinks:
°Link:
•Stylesforlinksingeneral
°Visited:
•Stylesthelinkswhicharealready visited
°Hover:
•Styleswhensomeonhoveringoveralink
°Active:
•Stylesthelinkswhena linksisbeingclicked
°Pseudo-classesoflinks:
°Link:
•Stylesforlinksingeneral
°Visited:
•Stylesthelinkswhicharealready visited
°Hover:
•Styleswhensomeonhoveringoveralink
°Active:
•Stylesthelinkswhena linksisbeingclicked
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 20
- Slides 32
- Age 553 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
29 views