cascading style sheets dreamweaver. styles determine how the html code will display determine how...
TRANSCRIPT
Cascading Style Cascading Style SheetsSheets
DreamweaverDreamweaver
StylesStyles
Determine how the HTML code Determine how the HTML code will displaywill display
Gives designers much more Gives designers much more controlcontrol– Over the look of the pageOver the look of the page– With page layoutWith page layout
Style SheetStyle Sheet
List of RulesList of Rules
– Each Rule has a Selector and a Each Rule has a Selector and a
DefinitionDefinition
– Each Rule can have one or more Each Rule can have one or more
DefinitionsDefinitions
– Each Definition can be applied to one Each Definition can be applied to one
or more selectoror more selector
Syntax of Style RulesSyntax of Style Rules
Syntax:Syntax:– Selector { definition;}Selector { definition;}
Selector { attribute: value;}Selector { attribute: value;}
h1 {h1 {
font-size: 130%;font-size: 130%;
}}
Style RulesStyle Rules
h1,h2,h3,h4 {h1,h2,h3,h4 { color: #ff3300; color: #ff3300; font-family: Arial; font-family: Arial;}}
h1{h1{ font-size: 160%; font-size: 160%;}}
Three Kinds of StylesThree Kinds of Styles
InlineInline Internal (Embedded)Internal (Embedded) External (Linked)External (Linked)
InlineInline
Very similar to regular HTML stylesVery similar to regular HTML styles Applied to each individual instanceApplied to each individual instance <style =attribute:values><style =attribute:values>
contentcontent
</style></style> Must be hand coded in Must be hand coded in
Dreamweaver except with layers Dreamweaver except with layers for positioning.for positioning.
InternalInternal
Placed in the Placed in the <head><head> of your document of your document Rules are wrapped in style tagsRules are wrapped in style tags Styles are wrapped in comment markersStyles are wrapped in comment markers
<style type =“text/css”><style type =“text/css”><!– <!– H1 {H1 {
font-size: 16px;font-size: 16px;} -->} --></style></style>
ExternalExternal
Totally separate from the HTML Totally separate from the HTML DocumentDocument
Can be linked or importedCan be linked or imported Referenced in the <head> sectionReferenced in the <head> section <link rel=“stylesheet” href=“styles.css”><link rel=“stylesheet” href=“styles.css”> @import “styles.css”@import “styles.css” Can be used by many web pagesCan be used by many web pages
Cascading OrderCascading Order
Browser default Browser default External style sheet External style sheet Internal style sheet (inside the Internal style sheet (inside the
<head> tag) <head> tag) Inline style (inside an HTML Inline style (inside an HTML
element) element)
MethodsMethods
Redefine HTML tagsRedefine HTML tags Create a new .ClassCreate a new .Class Advanced SelectorsAdvanced Selectors
– Multiple tagsMultiple tags– #ID’s#ID’s
Redefine HTMLRedefine HTML
Use any HTML tagUse any HTML tag Override Browser defaultsOverride Browser defaults Make the HTML item look the way Make the HTML item look the way
you wantyou want Make all of the same tags look Make all of the same tags look
alikealike
.Class.Class
Created as neededCreated as needed You decide the name You decide the name You decide the rulesYou decide the rules Can be applied to sections of a Can be applied to sections of a
pagepage Can be used multiple times on a Can be used multiple times on a
pagepage
#ID’s#ID’s
Similar to a classSimilar to a class You create the nameYou create the name You decide the rulesYou decide the rules Can only be used once per pageCan only be used once per page Layers use ID selectorsLayers use ID selectors
Compound SelectorsCompound Selectors
HTML tags and/or other selectors HTML tags and/or other selectors can be combined to target can be combined to target specific areasspecific areas
Allows different look of the same Allows different look of the same tags in different areas of the pagetags in different areas of the page
LayoutLayout
Use <span> tags for inline Use <span> tags for inline elementselements– No break createdNo break created
Like a wrapper for an element or section Like a wrapper for an element or section of text.of text.
Use <div> tags for block elementsUse <div> tags for block elements– Create whitespace like a paragraphCreate whitespace like a paragraph– Pulls content out of the page flowPulls content out of the page flow