doing it with style style sheets: separating form from function
TRANSCRIPT
![Page 1: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/1.jpg)
Doing It With Style
Style Sheets: Separating Form from Function
![Page 2: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/2.jpg)
First, A Little History …
When HTML was first developed, there were no GUI browsers; Result: no need for fancy formattingHTML was originally developed to distribute information – little attention was paid to the form of that information
![Page 3: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/3.jpg)
As Time Went By …
More & more GUI browsers were invented
People wanted more from their web pages
HTML evolved to include formatting tags
![Page 4: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/4.jpg)
RESULT: Bloated Pages!
HTML scripts became bogged down with tons of formatting tags
Extra tags required more disk space
![Page 5: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/5.jpg)
Style Sheets to the Rescue!
Separated form from function
Reduced file size of HTML scripts
Introduced portable code
![Page 6: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/6.jpg)
What can styles do for us?
Make our code portable (write once, apply everywhere)
Continuity: make pages across websites look the same
Reduce code!
Allow us some room for “customized” styles
![Page 7: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/7.jpg)
Three Main Types of Styles
Used at the tag-level
Usually applied to individual tags or groups of tags
Similar to <font> container
Can “pollute” a script with extraneous code
Best used to override higher-level styles
![Page 8: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/8.jpg)
Three Main Types of Styles
Defined in the <head> container
Configures styles for a SINGLE web page
Generally used to override External Style Sheets or when a style is going to be used only on a single page
![Page 9: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/9.jpg)
Three Main Types of Styles
Defined in another document with an extension of “.css”
Configures styles for multiple web pages
Highest level of style
![Page 10: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/10.jpg)
Style Rules
Styles are defined according to rules
The general* format is:
•- There are some exceptions to this. Inline styles
use a slightly different syntax
selector { property:value }
Declaration
![Page 11: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/11.jpg)
Style Rules
selector { property:value }
The selector is usually the HTML tag to which a style will apply.Example: p
The property is the attribute being changed. Example: font-family
The value represents what the new look the property will take.Example: Arial
![Page 12: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/12.jpg)
Style Rules - Example
p { font-size:14pt }
![Page 13: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/13.jpg)
Style Rules - Syntax
p {font-family:”Arial Narrow”,Arial,Tahoma,sans-serif
}
Multiple values can be assigned using commas:
![Page 14: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/14.jpg)
Style Rules - Syntax
p { font-size:14pt;font-color:red }
You can apply many styles to the same selectorDeclarations are separated with semi-colons:
![Page 15: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/15.jpg)
Style Rules - Syntax
p,li { font-size:14pt;font-color:red }
You can apply styles to many different selectorsSelectors are separated by commas:
![Page 16: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/16.jpg)
Style Rules - Syntax
li em { font-size:14pt;font-color:red }
You can apply styles given certain conditions using contextual selectorsContextual selectors are separated by a space:
This means that <em> containers which are also encapsulated within a <li> container will have a font-size of 14 points and a font color of red.
![Page 17: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/17.jpg)
Style Rules - Syntax
li em, h2 b {font-size:14pt;font-color:red
}
You can group multiple contextual selectors using commas to separate:
![Page 18: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/18.jpg)
Defining a Class
You can create “custom” styles to apply based on unique identifying attributes
These “custom” styles are called classes
Classes are referenced by attributes in HTML tags
![Page 19: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/19.jpg)
Defining a Class
p.myClass {font-family:Arial;font-color:red
}
Classes can be defined for individual tags:
![Page 20: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/20.jpg)
Defining a Class
.myClass {font-family:Arial;font-color:red
}
Or, classes can be defined for use in many tags:
![Page 21: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/21.jpg)
Referring to a Class in HTML
<p class=“myClass”>This is a line of text to which a stylehas been applied.
</p>
References to a class are made in individual HTML tags:
![Page 22: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/22.jpg)
Extending HTML for Style Sheets
<div class=“myClass”><h1>Hi There!</h1><p>This is a line of text to which a stylehas been applied.</p>
</div>
The <div>…</div> container is used to apply styles to block-level elements:
![Page 23: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/23.jpg)
Extending HTML for Style Sheets
Mary had a <span class=“myClass”>little lamb, little lamb,</span> little lamb.
The <span>…</span> container is used to apply styles to groups of characters:
![Page 24: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/24.jpg)
The External Style SheetA list of rules (no other syntax except for rules)
Saved with a file extension of “.css”
644 permissions (just like an HTML document)
Saved as a straight-text file (ASCII file)
Highest-Level Style
![Page 25: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/25.jpg)
The External Style Sheet - Example
h1 { font-family:Arial;font-size:42pt }
p { font-family:Arial;font-size:12pt }
li { font-family:Verdana;font-size:10pt }
![Page 26: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/26.jpg)
Referencing the External Style Sheet
<head><link rel=“stylesheet”
href=“css/myStyle.css”type=“text/css”>
</head>
External style sheets are linked to an HTML document in the <head> container:
![Page 27: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/27.jpg)
The Embedded Style SheetA list of rules (no other syntax except for rules)
Defined in the <head> container of an HTML document
Embedded styles trump external styles, but are subservient to all other styles
Usually contained within an HTML comment
![Page 28: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/28.jpg)
The Embedded Style Sheet - Example
<head><style type=“text/css”><!--
li { font-family:Arial }p { font-family:Arial;
font-size:12pt }--></style>
</head>
![Page 29: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/29.jpg)
The Inline StyleRules applied to individual tags
Defined at the tag level
Inline styles trump external embedded styles, but are subservient to HTML tags
Use them sparingly!
![Page 30: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/30.jpg)
The Inline Style - Example
<p style=“font-face:Arial;font-size:12pt;color:blue”>A style has been applied to this paragraph of text.</p>
![Page 31: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/31.jpg)
InheritanceStyles are inherited from parent-level styles to child-level stylesExample: An inline style inherits the properties of an embedded style and an external style
External
Embedded
Inline
Inhe
ritan
ce F
low
s T
his
Way
![Page 32: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/32.jpg)
Conflicting StylesWhen styles conflict, the more specific style will have more weight
Default Browser Settings
User-Defined Settings
External Styles
Embedded Styles
Inline Styles
HTML Tag Attributes Mor
e W
eigh
t
![Page 33: Doing It With Style Style Sheets: Separating Form from Function](https://reader033.vdocuments.net/reader033/viewer/2022051316/56649e9f5503460f94ba1117/html5/thumbnails/33.jpg)
Questions?