Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser...
-
Upload
brittney-blake -
Category
Documents
-
view
217 -
download
0
Transcript of Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser...
![Page 1: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/1.jpg)
Cascading Style SheetsCascading Style Sheets
Chapter FourChapter Four
![Page 2: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/2.jpg)
What are they?What are they?
A set of style rules that tell the web A set of style rules that tell the web browser how to present a web page or browser how to present a web page or document.document.Cascading Style SheetsCascading Style Sheets– Standard set by the W3C for managing the Standard set by the W3C for managing the
formatting information of HTML documentsformatting information of HTML documents– A single piece of formatting information is A single piece of formatting information is
called a called a stylestyle– CSS separates document content from its CSS separates document content from its
appearanceappearance
![Page 3: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/3.jpg)
Using Style Sheets - ConUsing Style Sheets - Con
Sites need much more planning for Sites need much more planning for effective useeffective useLearning curve can be steepLearning curve can be steepMuch more testing required in all Much more testing required in all possible browserspossible browsers
![Page 4: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/4.jpg)
A Brief History of HTML and A Brief History of HTML and CSSCSS
Separating Style from StructureSeparating Style from Structure– Mixing display instructions and structural Mixing display instructions and structural
information:information:Adds to complexity of codeAdds to complexity of code
Inefficient mechanism for handling display Inefficient mechanism for handling display characteristics of multi-page Web sitescharacteristics of multi-page Web sites
Limits cross-platform compatibility of contentLimits cross-platform compatibility of content– limits diversity of web deviceslimits diversity of web devices
![Page 5: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/5.jpg)
CONTENTSTYLE
What are they?What are they?
Web page
CSS styles are created CSS styles are created using name/value pairs using name/value pairs separated by a colonseparated by a colon
Name portion refers to Name portion refers to a specific CSS a specific CSS
style attribute known style attribute known as a as a propertyproperty
![Page 6: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/6.jpg)
Sample Style SheetSample Style Sheet
![Page 7: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/7.jpg)
What Can I Change?What Can I Change?
Font Stuff - size, family, weight, variant (small caps) Font Stuff - size, family, weight, variant (small caps) white space, letter spacing, line heightwhite space, letter spacing, line height
Spacing - margin, padding, Spacing - margin, padding,
Alignment - right, left, center, top, bottom, centerAlignment - right, left, center, top, bottom, center
Color - font, background, hoverColor - font, background, hover
Text - alignment, indent, decorationText - alignment, indent, decoration
Containers - size, placement, alignment, color, useContainers - size, placement, alignment, color, use
And more…And more…
![Page 8: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/8.jpg)
Single CSS to many Web PagesSingle CSS to many Web Pages
CSS
![Page 9: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/9.jpg)
Many CSS to Single Web Page Many CSS to Single Web Page
CSS
CSS
CSS CSS
CSS
Physical layout
HeadingsBody
Text
![Page 10: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/10.jpg)
DevicesDevices
CSSCSS
CSSContent
Content
PRINTMOBILE
BROWSER
Different CSS for Different Type of Browser
![Page 11: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/11.jpg)
The Box ModelThe Box Model
![Page 12: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/12.jpg)
ExampleExample
![Page 13: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/13.jpg)
Understanding BoxesUnderstanding Boxes
![Page 14: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/14.jpg)
Parents and ChildrenParents and Children
An object that contains another is the parent of the object it An object that contains another is the parent of the object it containscontainsAn object contained by another is the child of the object An object contained by another is the child of the object containing itcontaining it
![Page 15: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/15.jpg)
Types of CSSTypes of CSS
ExternalExternal
EmbeddedEmbedded
ImportedImported
InlineInline
![Page 16: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/16.jpg)
ExternalExternal
Connection made via the LINK tagConnection made via the LINK tag
Use the optional TYPE attribute to specify Use the optional TYPE attribute to specify a media typea media type– type/csstype/css
![Page 17: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/17.jpg)
Internal/EmbeddedInternal/Embedded
Style characteristics are embedded in the Style characteristics are embedded in the HEAD section of the webpageHEAD section of the webpage
Perhaps best used when a single page Perhaps best used when a single page requires a unique style sheetrequires a unique style sheet
![Page 18: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/18.jpg)
ImportedImported
Allows for using style sheets from other Allows for using style sheets from other sourcessources
Must be included at the beginning of the Must be included at the beginning of the style sheet using the style sheet using the @import@import statement statement
Other CSS rules can be includedOther CSS rules can be included
![Page 19: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/19.jpg)
InlineInline
Least flexibleLeast flexible
Requires each element to be tagged if you Requires each element to be tagged if you want them to appear differentlywant them to appear differently
Looses the advantage of using CSSLooses the advantage of using CSS
![Page 20: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/20.jpg)
Inserting a CSSInserting a CSS
External sheetExternal sheet
<head><head>
<link rel=“stylesheet” type=“text/css” <link rel=“stylesheet” type=“text/css” href=“mystyle.css” />href=“mystyle.css” />
</head></head>
![Page 21: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/21.jpg)
Inserting a CSSInserting a CSS
Internal/embedded sheetInternal/embedded sheet
<head><head><style type=“text/css”><style type=“text/css”>hr { color: navy}hr { color: navy}body {margin-left: 20px}body {margin-left: 20px}</style></style></head></head>
![Page 22: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/22.jpg)
Inserting a CSSInserting a CSS
Internal/embedded sheet for older browsersInternal/embedded sheet for older browsers
<head><head>
<style type=“text/css”><style type=“text/css”>
<!--<!-- hr { color: navy} hr { color: navy}
body {margin-left: 20px} body {margin-left: 20px} -->-->
</style></style>
</head></head>
![Page 23: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/23.jpg)
Inserting a CSSInserting a CSS
InlineInline
<p style=“color: yellow; font-family: verdana”><p style=“color: yellow; font-family: verdana”>
This is a paragraphThis is a paragraph
</p></p>
![Page 24: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/24.jpg)
Using multiple sheetsUsing multiple sheets
You can use multiple sheets to define the You can use multiple sheets to define the style of your documentstyle of your document
Internal styles will override external styles, Internal styles will override external styles, if they are duplicatedif they are duplicated
![Page 25: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/25.jpg)
Using multiple sheetsUsing multiple sheets
h3 {color: red; text-align: right; font-size: 8pt} h3 {color: red; text-align: right; font-size: 8pt} (external CSS)(external CSS)
h3 {text-align: center; font-size: 20pt} h3 {text-align: center; font-size: 20pt} (internal (internal CSS)CSS)
will yieldwill yield
![Page 26: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/26.jpg)
Using multiple sheetsUsing multiple sheets
h3 {h3 {color: redcolor: red; text-align: right; font-size: 8pt} ; text-align: right; font-size: 8pt} (external CSS)(external CSS)
h3 {h3 {text-align: centertext-align: center; ; font-size: 20ptfont-size: 20pt} } (internal (internal CSS)CSS)
will yieldwill yield
h3 {color: red; text-align: center; font-size: h3 {color: red; text-align: center; font-size: 20pt }20pt }
![Page 27: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/27.jpg)
Sheet weight or PrecedenceSheet weight or Precedence
Author’s style sheet
User’s style sheet
Browser’s style sheet
Greatest weight Least weight
![Page 28: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/28.jpg)
Sheet weight or PrecedenceSheet weight or Precedence
![Page 29: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/29.jpg)
Understanding the CascadeUnderstanding the Cascade
CascadingCascading– Determining rule weight by specificityDetermining rule weight by specificity
Rules with more specific selectors take precedence over Rules with more specific selectors take precedence over rules with less specific selectorsrules with less specific selectors
– Determining rule weight by orderDetermining rule weight by orderBased on order of rule within style sheetBased on order of rule within style sheet
– Those listed later take precedence over those listed earlier in Those listed later take precedence over those listed earlier in the style sheetthe style sheet
![Page 30: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/30.jpg)
Understanding the CascadeUnderstanding the Cascade
InheritanceInheritance– Based on hierarchical structure of documentsBased on hierarchical structure of documents
CSS rules inherit from parent elements to child CSS rules inherit from parent elements to child elements:elements:
– thus <LI> elements will inherit style rules from <UL> thus <LI> elements will inherit style rules from <UL> elements unless a style rule is specifically set for the elements unless a style rule is specifically set for the <LI> element<LI> element
![Page 31: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/31.jpg)
Basic CSS SyntaxBasic CSS Syntax
![Page 32: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/32.jpg)
Basic CSS SyntaxBasic CSS Syntax
Three parts:Three parts:– selectorselector– propertyproperty– valuevalue
selector {property: value}selector {property: value}
} declaration
![Page 33: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/33.jpg)
Basic CSS SyntaxBasic CSS Syntax
selector {property: value}selector {property: value}
selectorselector: the basic HTML element tag you wish : the basic HTML element tag you wish to define to define
bodybody
![Page 34: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/34.jpg)
Basic CSS SyntaxBasic CSS Syntax
selector {property: value}selector {property: value}
propertyproperty: the attribute of the selector that you : the attribute of the selector that you wish to changewish to change
bodybody {color {color
![Page 35: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/35.jpg)
Basic CSS SyntaxBasic CSS Syntax
selector {property: value}selector {property: value}
valuevalue: the particular markup value for that : the particular markup value for that attributeattribute
bodybody {color{color : black} : black}
![Page 36: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/36.jpg)
Basic CSS SyntaxBasic CSS Syntax
If the If the valuevalue has multiple words, put the value in has multiple words, put the value in quotesquotes
p {font-family: p {font-family: “sans serif”“sans serif” } }
![Page 37: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/37.jpg)
Basic CSS SyntaxBasic CSS Syntax
You can specify multiple You can specify multiple propertiesproperties to a single to a single selector. Properties must be separated by a selector. Properties must be separated by a semicolon.semicolon.
P { text-align: leftP { text-align: left;; color: red } color: red }
![Page 38: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/38.jpg)
Basic CSS SyntaxBasic CSS Syntax
To make properties more readable, put each on To make properties more readable, put each on a separate line.a separate line.
p { text-align: center;p { text-align: center;
color: navy;color: navy;
font-family: arialfont-family: arial
}}
![Page 39: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/39.jpg)
Basic CSS SyntaxBasic CSS Syntax
SelectorsSelectors can be grouped so that a common can be grouped so that a common property can be specifiedproperty can be specified
h1,h2,h3,h4,h5,h6h1,h2,h3,h4,h5,h6
{ color: yellow }{ color: yellow }
<h1> <h1> This is a level 1 headingThis is a level 1 heading </h1> </h1>
<h2> <h2> This is a level 2 headingThis is a level 2 heading </h2> </h2>
![Page 40: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/40.jpg)
Basic CSS SyntaxBasic CSS Syntax
SelectorsSelectors can be descendants can be descendants
P B P B { color: yellow }{ color: yellow }
In this example, only those In this example, only those <B><B> elements within a elements within a <P><P> element would be yellowelement would be yellow
<p><b> <p><b> This would be yellow This would be yellow </b></p></b></p>
<p> This would not be yellow<p> This would not be yellow </p></p>
![Page 41: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/41.jpg)
CSS Syntax - classCSS Syntax - class
The The classclass selector allows you to create different selector allows you to create different styles for the same HTML element.styles for the same HTML element.
p.right { text-align: right }p.right { text-align: right }
p.center { text-align: center }p.center { text-align: center }
![Page 42: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/42.jpg)
CSS Syntax - classCSS Syntax - class
p.right { text-align: right }p.right { text-align: right }
<p <p classclass=“right”>=“right”>
This paragraph will be right aligned.This paragraph will be right aligned.
</p></p>
Note: the class name must be in quotes inside Note: the class name must be in quotes inside the opening tagthe opening tag
![Page 43: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/43.jpg)
CSS Syntax - classCSS Syntax - class
This is improper use of the class This is improper use of the class selectorselector::
<p <p classclass=“right” =“right” classclass=“center”>=“center”>This paragraph will be right aligned.This paragraph will be right aligned.
</p></p>
Only one class selector can be included inside Only one class selector can be included inside the tagthe tag
![Page 44: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/44.jpg)
CSS Syntax - classCSS Syntax - class
You can also create a class selector free of a You can also create a class selector free of a tag name if you want all tags that have that tag name if you want all tags that have that class to be formatted the same.class to be formatted the same.
.center { text-align: center }.center { text-align: center }
Any tag with a “center” class will be aligned Any tag with a “center” class will be aligned centercenter
![Page 45: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/45.jpg)
CSS Syntax - classCSS Syntax - class
..centercenter { text-align: center } { text-align: center }
<h1 <h1 classclass=“center”>=“center”>
This heading will be centeredThis heading will be centered
</h1></h1>
<p <p classclass=“center”>=“center”>
So will this textSo will this text
</p></p>
![Page 46: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/46.jpg)
CSS Syntax - idCSS Syntax - id
While the class selector can apply to several While the class selector can apply to several different elements, the different elements, the idid selector can only selector can only apply to one, unique element.apply to one, unique element.
pp##para1 { text-align: center;para1 { text-align: center;
color: green }color: green }
![Page 47: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/47.jpg)
CSS Syntax - idCSS Syntax - id
pp##para1 { text-align: center;para1 { text-align: center;
color: green }color: green }
<p id=“para1”><p id=“para1”>
This text would be centered and greenThis text would be centered and green
</p></p>
![Page 48: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/48.jpg)
CSS syntax - <div>CSS syntax - <div>
<DIV> can be used with the CLASS attribute to <DIV> can be used with the CLASS attribute to create customized block-level elementscreate customized block-level elements– Declare it in the style rule:Declare it in the style rule:
DIV.introduction {font-size: 14pt; margin: 24 pt;}DIV.introduction {font-size: 14pt; margin: 24 pt;}
– Apply the style rule in the document:Apply the style rule in the document:<DIV CLASS=“introduction””>This is the introduction to the <DIV CLASS=“introduction””>This is the introduction to the document</DIV>document</DIV>
![Page 49: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/49.jpg)
CSS syntax - <span>CSS syntax - <span>
<SPAN> can be used with the CLASS attribute <SPAN> can be used with the CLASS attribute to create customized inline elementsto create customized inline elements– Declare it in the style rule:Declare it in the style rule:
SPAN.logo {color: white; background-color: black;}SPAN.logo {color: white; background-color: black;}
– Apply the style rule in the document:Apply the style rule in the document:<P>Welcome to the <SPAN CLASS=“logo””> Wonder <P>Welcome to the <SPAN CLASS=“logo””> Wonder Software</SPAN>Web site</P>Software</SPAN>Web site</P>
![Page 50: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/50.jpg)
Background PropertiesBackground Properties
![Page 51: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/51.jpg)
Background propertiesBackground properties
Define the background effects of an Define the background effects of an elementelement
Effects include color, using an image for a Effects include color, using an image for a background, repeating an image and background, repeating an image and positioning an imagepositioning an image
![Page 52: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/52.jpg)
Background propertiesBackground properties
Basic syntaxBasic syntax– backgroundbackground– background-colorbackground-color– background-imagebackground-image– background-repeatbackground-repeat– background-attachmentbackground-attachment– background-positionbackground-position
![Page 53: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/53.jpg)
Background propertiesBackground properties
All attributes can be set in a single All attributes can be set in a single declaration:declaration:
background: #000000 url(‘mark.gif’) no-background: #000000 url(‘mark.gif’) no-repeat fixed centerrepeat fixed center
![Page 54: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/54.jpg)
Background propertiesBackground properties
Setting the body background (internal Setting the body background (internal CSS)CSS)
body { background: #000000 url(‘mark.gif’) body { background: #000000 url(‘mark.gif’) no-repeat fixed center }no-repeat fixed center }
![Page 55: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/55.jpg)
Background propertiesBackground properties
Setting the body background (external Setting the body background (external CSS)CSS)
body: { background: #000000 url(‘mark.gif’) body: { background: #000000 url(‘mark.gif’) no-repeat fixed center }no-repeat fixed center }
![Page 56: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/56.jpg)
Background propertiesBackground properties
Elements can also be set separatelyElements can also be set separately
bodybody
{ { background-imagebackground-image: url(mark.gif);: url(mark.gif);
background-colorbackground-color: navy }: navy }
![Page 57: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/57.jpg)
Text PropertiesText Properties
![Page 58: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/58.jpg)
Text propertiesText properties
Controls the appearance of text in the web Controls the appearance of text in the web pagepage
![Page 59: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/59.jpg)
Text propertiesText properties
Commonly used attributesCommonly used attributes– colorcolor– directiondirection– text-aligntext-align– text-decorationtext-decoration– text-indenttext-indent
![Page 60: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/60.jpg)
Text propertiesText properties
colorcolor– sets the color of the textsets the color of the text– color can be represented by the color color can be represented by the color namename
(red), an (red), an rgbrgb value (rgb(255,0,0)), or by a value (rgb(255,0,0)), or by a hexadecimalhexadecimal number (#ff0000) number (#ff0000)
SyntaxSyntax– body {body {colorcolor: #ff0000}: #ff0000}
![Page 61: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/61.jpg)
Text propertiesText properties
directiondirection– sets the direction of the textsets the direction of the text– can be set as left to right (can be set as left to right (ltrltr) or right to left ) or right to left
((rtlrtl))
SyntaxSyntax– body {body {directiondirection: rtl}: rtl}
![Page 62: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/62.jpg)
Text propertiesText properties
text-aligntext-align– aligns the text in an elementaligns the text in an element– possible values are possible values are leftleft, , rightright, , centercenter and and
justifyjustify
SyntaxSyntax– p {p {text-aligntext-align: center}: center}
![Page 63: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/63.jpg)
Text propertiesText properties
text-decorationtext-decoration– adds certain decoration elements to the textadds certain decoration elements to the text– possible values are possible values are nonenone, , underlineunderline, , overlineoverline, ,
line-throughline-through and and blinkblink
SyntaxSyntax– p {p {text-decorationtext-decoration: underline}: underline}
![Page 64: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/64.jpg)
Text propertiesText properties
text-indenttext-indent– indents the first line of text inside an elementindents the first line of text inside an element– possible values are possible values are lengthlength (defines a fixed (defines a fixed
value) and value) and %% (defines a % of the parent (defines a % of the parent element)element)
SyntaxSyntax– p {p {text-indenttext-indent: 20px}: 20px}
![Page 65: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/65.jpg)
Font PropertiesFont Properties
![Page 66: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/66.jpg)
Font propertiesFont properties
Define the look of the font in text areasDefine the look of the font in text areas
One of the broader sets of properties in One of the broader sets of properties in CSSCSS
![Page 67: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/67.jpg)
Font propertiesFont properties
fontfont font-stylefont-style
font-variantfont-variant
font-weightfont-weight
font-size/line-heightfont-size/line-height
font-familyfont-family
![Page 68: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/68.jpg)
Font propertiesFont properties
font-stylefont-style normalnormal
italicitalic
obliqueoblique
Syntax: body {font-style: italic}
![Page 69: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/69.jpg)
Font propertiesFont properties
font-variantfont-variant normalnormal– font displays as isfont displays as is
small-capssmall-caps– font displays in all font displays in all
capitals, with lower case capitals, with lower case letters in smaller sizeletters in smaller size
Syntax: body {font-variant: small-caps}
![Page 70: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/70.jpg)
Font propertiesFont properties
font-weightfont-weight normalnormal
boldbold
bolderbolder
lighterlighter
weighted valuesweighted values
Syntax: body {font-weight: bold}
![Page 71: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/71.jpg)
Weighted valuesWeighted values
range from 100 – 900range from 100 – 900
400 is the same as normal weight400 is the same as normal weight
700 is the same as bold weight700 is the same as bold weight
![Page 72: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/72.jpg)
Font propertiesFont properties
font-sizefont-size xx-small to xx-largexx-small to xx-large
smallersmaller– smaller than parentsmaller than parent
largerlarger– larger than parentlarger than parent
%%– % of the parent% of the parent
Syntax: body {font-size: 20px} {font-size: x-large} {font-size: 125%}
![Page 73: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/73.jpg)
Font propertiesFont properties
font-familyfont-family family-namefamily-name– “ “times”, “arial”, “courier”, times”, “arial”, “courier”,
“verdana”“verdana”
generic-familygeneric-family– ““serif”, “sans-serif”, serif”, “sans-serif”,
“monospace”“monospace”
Syntax: body {font-family: verdana, sans-serif}
![Page 74: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/74.jpg)
Border PropertiesBorder Properties
![Page 75: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/75.jpg)
Border propertiesBorder properties
Allows you to specify the style, color and Allows you to specify the style, color and width of an element’s borderwidth of an element’s border
Many different properties can be appliedMany different properties can be applied
![Page 76: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/76.jpg)
Border propertiesBorder properties
You can specify the width, style, color, thickness You can specify the width, style, color, thickness and on which sides the border appearsand on which sides the border appears
![Page 77: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/77.jpg)
Margin PropertiesMargin Properties
![Page 78: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/78.jpg)
Margin propertiesMargin properties
Define the space around elementsDefine the space around elementsYou can use negative values to overlap You can use negative values to overlap contentcontentMargins can be set independently or Margins can be set independently or collectivelycollectivelyCan be set to auto, a fixed length or a % of Can be set to auto, a fixed length or a % of the total height of the documentthe total height of the document
![Page 79: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/79.jpg)
Margin propertiesMargin properties
PropertiesProperties– marginmargin– margin-topmargin-top– margin-rightmargin-right– margin-bottommargin-bottom– margin-leftmargin-left
![Page 80: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/80.jpg)
Margin propertiesMargin properties
margin-bottommargin-bottom autoauto– set by the browserset by the browser
lengthlength– fixedfixed
%%
Syntax: h1 {margin-bottom: 20px}
![Page 81: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/81.jpg)
Margin propertiesMargin properties
Can be set in one declarationCan be set in one declaration
Think clock faceThink clock face– toptop, , rightright, , bottombottom, left, left
h1 {margin: 10px 20px 30px 40px}
![Page 82: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/82.jpg)
Margin propertiesMargin properties
All margins can be set the sameAll margins can be set the same
h1 {margin: 40px}
![Page 83: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/83.jpg)
Margin propertiesMargin properties
Margin settings can be paired (left and Margin settings can be paired (left and right, top and bottom)right, top and bottom)
h1 {margin: 40px 5%}
In this example, the top and bottom margins would be 40 pixels,While the left and right margins would be 5% of the total height of
the document.
![Page 84: Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649e9f5503460f94ba1154/html5/thumbnails/84.jpg)
Margin propertiesMargin properties
0 size margins do not need to be 0 size margins do not need to be specified. 0px, 0pt and 0 are all equivalent.specified. 0px, 0pt and 0 are all equivalent.
h1 {margin: 40px 0 5% 0}
In this example, the top margin would be 40 pixels, the left andright margins would be 0, and the bottom margin would
be 5% of the total height of the document.